Forum Replies Created
-
AuthorPosts
-
Erik D. SlaterMember
Disabling Photon would be the first step here, I believe. Hopefully, that will resolve the issue. I'm reasonably confident it will because we're trying to prevent the Jetpack version of the image.
Instead of using Jetpack to serve images (and even modify them), CloudFlare would be a better CDN option. For one thing, you can clear CloudFlare's cache of your resources ... something you can't do with Jetpack.
Erik D. Slater: Digital Platform Consultant โข LinkedInErik D. SlaterMembernot sure why you’re speaking in Greek today
Not my speak ... I swear ๐ References to pngquant, OptiPNG and jpegoptim are actually links on the that page. But when I copied the line, you only get the Greek ๐
I've actually used these tools before. And y'know what? I hate them. They don't work ... whereas other online tools work flawlessly. This circles back to a previous conversation we had before ๐
The "Save for Web" thing you mentioned ... not weird at all. In fact, it is becoming more and more likely that Photon is the culprit ... because the "Save for Web" feature probably runs the image through something like - or even one of - pngquant, OptiPNG or jpegoptim.
We know that the original upload is OK because we can actually see it. The served version is definitely not OK - we can see that too. The file sizes are different ... yet the dimensions are the same.
It's Photon, man ... all the way ๐
Erik D. Slater: Digital Platform Consultant โข LinkedInErik D. SlaterMemberI checked the source code of the page ... and Photon is definitely on.
The reason I believe the problem is related to Photon is because of this:
"All images are compressed on the fly using either a combination of pngquant and OptiPNG or jpegoptim. Lossless compression is available by specifying a quality setting of 100 in the query arguments"This would explain why the problem occurs sporadically.
Erik D. Slater: Digital Platform Consultant โข LinkedInErik D. SlaterMemberIf you are using Yoast's SEO plugin, you can modify the output of the breadcrumbs by hooking into the wpseo_breadcrumb_output filter.
Seriously ... provide us with a link to your site. You will be amazed just how much more effective the solution could be ... because then, we can actually play around with things ... including your site ๐
Erik D. Slater: Digital Platform Consultant โข LinkedInErik D. SlaterMemberURL please.
Different sites have different ways of displaying breadcrumbs.
But just so you know ... you don't always need to use classes to define complete CSS rules. You can target HTML tags directly, e.g.
.breadcrumb span a { }
or
.breadcrumb a { }
Erik D. Slater: Digital Platform Consultant โข LinkedInErik D. SlaterMemberReading again through some of the earlier comments, I'm fairly certain Photon is currently activated.
Erik D. Slater: Digital Platform Consultant โข LinkedInErik D. SlaterMemberAdditional info.
The file size of the undesired version is actually larger than the version uploaded by the OP!! The dimensions are, of course, the same.
Erik D. Slater: Digital Platform Consultant โข LinkedInErik D. SlaterMemberHey ... I'm a woman ๐
Oh wow. That's quite a difference. The image on the right is the image I am seeing.
And ... oh my ... I'm such an idiot for not noticing this earlier. Check out these two links:
- undesired version
- desired versionThe first image is being served by WordPress.com ... i.e. Jetpack ... and the OP may have Photon turned on. If you try to drag the image from the browser to your desktop, it won't give you the image directly, i.e. something else is getting in the way.
The second image is being served by veronicacolvin.com. If you try to drag the image from the browser to your desktop, it does exactly what you would expect, i.e. it's just an image.
Regardless if Photon is turned on or not, Jetpack is the issue here.
Erik D. Slater: Digital Platform Consultant โข LinkedInErik D. SlaterMemberThen I saw that you (the Moodster) took on the task of trying to solve the problem ... so I thought I'd leave it in your capable ๐
I'm still a bit fuzzy on the issue ... but I'm also interested ๐
The thing is ... on my 23-inch monitor, I see no issues between carousel version and direct version.
Is there a better example of the carousel vs non-carousel conflict?
Erik D. Slater: Digital Platform Consultant โข LinkedInErik D. SlaterMemberI actually did take a look initially ... but the links provided were getting me all confused, e.g. this link here wasn't going to where I think the OP had intended. It just takes me to the Editorial / Beauty page.
Erik D. Slater: Digital Platform Consultant โข LinkedInErik D. SlaterMemberWhen you change to a different theme, it might mess up a lot of your layout and other things
If you change a theme, it "should" move any widgets to the Inactive Widgets area ... since widgets are theme-based ... and the cause of theme compatibility issues ๐
You may want to try the Preview option first ... just to minimize (or even eliminate altogether) the chance of screwing things up royally ๐
Erik D. Slater: Digital Platform Consultant โข LinkedInErik D. SlaterMemberYep, no problem ๐
Perhaps the cleanest way to achieve this is to only modify the JavaScript file that makes that magic happen. You would have to modify it anyway.
Pop yourself into a file called global.js ... which you will find under:
wp-content -> themes -> altitude-pro -> jsDon't panic if code isn't your thing. This is a very small file ... and we are only working with the first few lines at the top ๐
Then, change the following code from:
if( $( document ).scrollTop() > 0 ){ $( '.site-header' ).addClass( 'dark' ); } // Add opacity class to site header $( document ).on('scroll', function(){ if ( $( document ).scrollTop() > 0 ){ $( '.site-header' ).addClass( 'dark' ); } else { $( '.site-header' ).removeClass( 'dark' ); } });
to
/* ALL THAT JAVASCRIPT CODE YOU SEE ABOVE */ $( '.site-header' ).addClass( 'dark' );
In other words, we are:
(1) adding /* before the code block
(2) adding
*/
$( '.site-header' ).addClass( 'dark' );
after the code blockGive that a whirl, then check back in ๐
Erik D. Slater: Digital Platform Consultant โข LinkedInErik D. SlaterMemberYour form’s action=”http://janehenry.ca/”
It is supposed to be like that.
WordPress processes the form input parameters to identify the search request. You can also perform searches directly using http://janehenry.ca/?s=something.
Erik D. Slater: Digital Platform Consultant โข LinkedInErik D. SlaterMemberI would love to just use a background image but the one in the WP customizer doesn’t stretch the whole screen
It's all stretchy from what I can see ๐ You may need to clear caches, do a hard refresh, etc ... unless it was a problem and you fixed it in the meantime ... but it did look OK earlier, as I recall (although I can't truly remember) ๐
Oh ... and you won't find it in style.css ... but you will find it in this code snippet (taken from view-source):
<script type='text/javascript' src='http://cybersprout.net/wp-content/themes/agency-pro/js/backstretch.js'></script> <script type='text/javascript'> /* <![CDATA[ */ var BackStretchImg = {"src":"\/\/cybersprout.net\/wp-content\/uploads\/2015\/06\/Background-Top.png"}; /* ]]> */ </script> <script type='text/javascript' src='http://cybersprout.net/wp-content/themes/agency-pro/js/backstretch-set.js'></script>
And while I was in there, I noticed you applied some changes ... and there is a significant difference in your page load time compared to earlier ๐
Erik D. Slater: Digital Platform Consultant โข LinkedInJune 20, 2015 at 11:30 pm in reply to: How to increased number of posts listed on the blog page? #156969Erik D. SlaterMemberYep, Marcy got there just before I could hit Submit ๐
The difference between the two methods is dependent on what you select for Settings -> Reading -> Front page displays.
If you choose Your latest posts then the value from Genesis -> Theme Settings is used.
If you choose A static page (select below) then the value from Settings -> Reading -> Blog pages show at most is used.
Erik D. Slater: Digital Platform Consultant โข LinkedInErik D. SlaterMemberIf you are only using the framework - without a child theme - then that would be a bit of a struggle ๐
If you don't want to get neck deep into your style.css file to apply CSS changes, GDPP may work quite well for you. If you do purchase it, buy it through your My StudioPress account rather than from the original developers so that you can get a discount.
Oh ... those links are direct links to the sources. They are NOT affiliate links ๐
Erik D. Slater: Digital Platform Consultant โข LinkedInErik D. SlaterMemberBy Palette Pro, are you referring to Genesis Design Palette Pro? If so, it's not a theme. It's a plugin that provides you with a frontend-style capability to modify your styles (CSS) without having to touch any code.
As for the Lifestyle Pro theme, that's a fair question since the demo might suggest otherwise. But yes, it does provide support for a custom header image and a custom background image ... both of which are responsive-friendly (not just for mobile).
Erik D. Slater: Digital Platform Consultant โข LinkedInErik D. SlaterMemberTypically, backstretch images are loaded by JavaScript when the document is "ready". So there will be a bit of a lag there anyway. If you try out some of the StudioPress demos (e.g. Sixteen Nine Pro, The 411), you will notice the backstretch image load situation.
But - and as my buddy Christoph mentions - you are using CloudFlare's Rocket loader to handle a lot of JavaScript resources - 18 to be exact. That requires JavaScript to load those JavaScript resources ... which means it has to inject the JavaScript code into your HTML so that it can run that JavaScript code to then download the JavaScript from CloudFlare ... and that includes the loading of jQuery, upon which everything depends . This will likely slow down your page load time.
Also, GTmetrix only sees 57 resources being loaded. Your home page is requesting 77 resources ... 18 of those 20 being the rocket loader stuff.
As for the background images ... they load instantly because they are regular image resources requested via the HTML
<img>
tag.You could try not using the rocket loader option in CloudFlare ... then allow CloudFlare to cache the data-rocketsrc-declared JavaScript files directly.
Does any of this make sense to you?
Erik D. Slater: Digital Platform Consultant โข LinkedInErik D. SlaterMemberAs long as you use the same database the page/post id stays the same no matter what
That's very true ... and I did say that "It is not always guaranteed" ๐ But ...
The risk of damaging the WordPress installation is significantly higher when you work directly with the backend database ... and while you and I may not have an issue dealing with MySQL tables and SQL queries, most WordPress users never know it exists. Not all recovery processes are of a clean nature, i.e. many are partial recoveries. While the file import process is intelligent enough to know if a page/post already exists, if a page/post has changed in the meantime - and a new import takes place - a new version of that page/post will be created. The user will then remove the old version ... and that is when a new page-id gets created ... but the custom body class will remain the same. This is the sort of scenario that I have seen happen on more occasions that it probably should ๐
It should also be noted that the custom body class is a Genesis Framework feature. Regular WordPress doesn't provide this option.
I did not intend to give advice to place code there in general. I apologize for not taking the time to explain that this is not a good place to insert code, but for this short snippet, it doesn’t hurt to put it there.
Iยดm sorry for rushing my answer not taking the time to explain better practices.I actually wasn't directing my "seen some people make this recommendation" comment at you ๐ And there are times when we do need to make a judgement call on the advice we provide ... which may be based on the OP, the issue in hand, etc.
There are cases where the CSS file that needs to be updated is a separate custom file ... or even inline stuff ... which gets loaded after the main style.css file ... which effectively adds CSS after the media queries definitions ๐ In those cases, they tend to be overrides of CSS defined in the main file, and so any media queries overrides would be included in those too.
And besides ... I've seen a lot of the advice you have given ... and I usually find myself nodding in agreement ๐
Erik D. Slater: Digital Platform Consultant โข LinkedInErik D. SlaterMemberWhere can I adjust height of that area to stay at 600
The maximum size of your image here is 600px by default. If you are talking about the padding below the image, that is outside the image dimensions. You will want to play around with the following CSS selector:
.home-featured .widget:last-of-type { padding-bottom: 80px; }
I am trying to get the image flush on the sides. Do I need to fix the padding of the .home-featured area
So close ๐ You'll want to play around with the padding in
.home-featured .widget
Erik D. Slater: Digital Platform Consultant โข LinkedIn -
AuthorPosts