If so, maybe you need to disable lazyload images for that image to get it works. Please try disable lazyload images for your first posts via Customize > Single Post Options > Disable Lazy Load Images on Single Posts
Re: Amp issue. I didn't realize that there was an update to the theme and AMP plugin - so I updated and now Google search console is validating the fix. I will reply about this again if validation fails but it is currently in progress.
Re: WebP images I deactivated lazy load and now the feature images appear BUT, I would like to turn lazy load back on please for speed. I found this Perfmatters article: https://perfmatters.io/docs/lazy-load-wordpress/
-----
Exclude images from lazy loading using no-lazy CSS class
If you have access to add a CSS class to the specific image you are wanting to exclude, simply add the no-lazy class and it should be ignored when the document is being prepared for lazyloading.
I've changed my font settings to be Raleway for both title and body but I've noticed that the body text is actually displaying Raleway LIGHT - not REGULAR font style and this is not easy to read.
Can you tell me where I can specify this? I want to use Raleway Regular font for body copy throughout and Semi bold (600 weight) for the titles/headings.
1/ For lazyload, there is no way to do that. It seems that's conflict between lazyload images and webP image.
In this case, I recommend you disable lazyload images from your plugin and enable lazyload images from the theme & disable lazyload for single post pages.
2/ For the font issue, as I can see the font you're using for body text is regular ( font-weight is 400 )
If you want to change font weight for body text, you can add more this code to Customize > Custom CSS:
1/ Disappointed about the lazy load solution. - I found the disable lazyload for single post pages but where do I enable lazyload in the theme customizer? Please advise
2/ I inserted the custom css you provided and there was no change. So, I opted to change the font family to Open Sans and this is working better. Disappointed because I did prefer Raleway font but the font will not display 500 weight for some reason.
NEW Question about font awesome - I see a setting for font awesome 5 in the theme now. - I've installed font awesome 4.7 locally via their cdn, should I remove this since now I see both fonts loading?
I just finished optimizing all my images for webP using Short Pixel plugin.
Now the featured images do not display at the top of posts - even though they display correctly in the blog module.
Attached are the settings I used in Short Pixel
Please help. Thanks!
Hi,
If so, maybe you need to disable lazyload images for that image to get it works. Please try disable lazyload images for your first posts via Customize > Single Post Options > Disable Lazy Load Images on Single Posts
Best Regards,
PenciDesign
Lazy load is not turned on there. BUT Lazy load is turned on in Perfmatters. (see attached)
I don't understand why featured images in single posts would disappear if all my other images are still appearing with Lazy Load turned on...
Today I started receiving AMP errors. Is this related?
- Google search error says "The parent tag of tag 'picture' must be 'noscript'."
Hi,
Have you tried deactivate lazyload images from your plugin and try it again?
About your AMP issue, when I check your site on https://search.google.com/test/amp?url=https%3A%2F%2Fwww.calculatedtraveller.com%2Famp%2F - I see everything is fine, what's URL you got this issue?
Best Regards,
PenciDesign
Thanks for your fast reply!
Re: Amp issue.
I didn't realize that there was an update to the theme and AMP plugin - so I updated and now Google search console is validating the fix. I will reply about this again if validation fails but it is currently in progress.
Re: WebP images
I deactivated lazy load and now the feature images appear BUT, I would like to turn lazy load back on please for speed. I found this Perfmatters article: https://perfmatters.io/docs/lazy-load-wordpress/
-----
Exclude images from lazy loading using no-lazy CSS class
If you have access to add a CSS class to the specific image you are wanting to exclude, simply add the no-lazy class and it should be ignored when the document is being prepared for lazyloading.
------
Is this possible?
Sorry but I discovered another issue just now.
I've changed my font settings to be Raleway for both title and body but I've noticed that the body text is actually displaying Raleway LIGHT - not REGULAR font style and this is not easy to read.
Can you tell me where I can specify this? I want to use Raleway Regular font for body copy throughout and Semi bold (600 weight) for the titles/headings.
Thank you very much!
Hi,
1/ For lazyload, there is no way to do that. It seems that's conflict between lazyload images and webP image.
In this case, I recommend you disable lazyload images from your plugin and enable lazyload images from the theme & disable lazyload for single post pages.
2/ For the font issue, as I can see the font you're using for body text is regular ( font-weight is 400 )
If you want to change font weight for body text, you can add more this code to Customize > Custom CSS:
#main #bbpress-forums .bbp-login-form fieldset.bbp-form select, #main #bbpress-forums .bbp-login-form .bbp-form input[type="password"], #main #bbpress-forums .bbp-login-form .bbp-form input[type="text"], body, textarea, #respond textarea, .widget input[type="text"], .widget input[type="email"], .widget input[type="date"], .widget input[type="number"], .wpcf7 textarea, .mc4wp-form input, #respond input, div.wpforms-container .wpforms-form.wpforms-form input[type=date], div.wpforms-container .wpforms-form.wpforms-form input[type=datetime], div.wpforms-container .wpforms-form.wpforms-form input[type=datetime-local], div.wpforms-container .wpforms-form.wpforms-form input[type=email], div.wpforms-container .wpforms-form.wpforms-form input[type=month], div.wpforms-container .wpforms-form.wpforms-form input[type=number], div.wpforms-container .wpforms-form.wpforms-form input[type=password], div.wpforms-container .wpforms-form.wpforms-form input[type=range], div.wpforms-container .wpforms-form.wpforms-form input[type=search], div.wpforms-container .wpforms-form.wpforms-form input[type=tel], div.wpforms-container .wpforms-form.wpforms-form input[type=text], div.wpforms-container .wpforms-form.wpforms-form input[type=time], div.wpforms-container .wpforms-form.wpforms-form input[type=url], div.wpforms-container .wpforms-form.wpforms-form input[type=week], div.wpforms-container .wpforms-form.wpforms-form select, div.wpforms-container .wpforms-form.wpforms-form textarea, .wpcf7 input, #searchform input.search-input, ul.homepage-featured-boxes .penci-fea-in h4, .widget.widget_categories ul li span.category-item-count, .about-widget .about-me-heading, .widget ul.side-newsfeed li .side-item .side-item-text .side-item-meta{ font-weight: 500; }Change value 500 to font weight value as you want.
Best Regards,
PenciDesign
Thank you as always for your fast response time.
1/ Disappointed about the lazy load solution.
- I found the disable lazyload for single post pages but where do I enable lazyload in the theme customizer? Please advise
2/ I inserted the custom css you provided and there was no change. So, I opted to change the font family to Open Sans and this is working better. Disappointed because I did prefer Raleway font but the font will not display 500 weight for some reason.
NEW Question about font awesome - I see a setting for font awesome 5 in the theme now.
- I've installed font awesome 4.7 locally via their cdn, should I remove this since now I see both fonts loading?
Hi,
1/ You can enable lazyload images from the theme via:
Enable lazyload images on category mega menu on Customize > Logo and Header Options
Enable lazyload images on all layouts, widgets on Customize > General Options
Enable lazyload images on featured slider on Customize > Featured Slider Options
2/ Yeah, you can remove the fontawesome 4.7 loads via CDN.
Best Regards,
PenciDesign