The theme is not generating any thumbnails

Hi there,

Looking at your sites home page first.
I can see all the src-set images in the HTML and on a GT Metrix test it is requesting the 768px image.

To make it request a smaller image you can change the width of the Archive Featured image in Customizer > Layout > Blog --> Featured images. Setting it to 300px should work.

The single post looks fine - no issues reported aside from the Related Post thumbnails in the sidebar which are 50px and are using the 150px thumbnails size.

Hi David,

The thumbnails in the single post (viewing on a Mac) appear to be just reduced versions of the full size images and not the generated 150 px resolution images (As you see on the sidebar). Is it possible that when we display thumbnails inside the post, we can request 150 px images which when clicked leads to the full size image?

Hmmm - maybe a plugin such as the lazyloader is interfering with the thumbnail creation as this is a WP thing not GP.

OK - so in Customizer > Layout > Blog --> Featured Images > Post you could set the width to 150px.
Add this PHP snippet to the site to create a link to the Large URL:

add_filter( 'generate_single_featured_image_html', 'custom_add_post_thumbnail_link',25,1 );
function custom_add_post_thumbnail_link($image_html) {
    if( $image_html == '' ) {
        $image_html = $image_html;
    } else {
        $large_image_url = wp_get_attachment_image_src( get_post_thumbnail_id(), 'large');
        $linked_html = '<a href="' . $large_image_url[0] . '">' . $image_html . '</a>';
    }
    return $linked_html;
}

A lightbox plugin could be used to open the image whilst remaining in the single post..

Hello team,

I checked my website on the W3 validator and I see a bunch of errors mainly on 'sizes' 'align' and 'type' attribute. I've pasted the link to W3 validator in my first reply (in the box where the URL is hidden). Could you please take a look and let me know your feedback on this?

Hi there,

the type attribute warnings are a requirement of WP coding standards. They can be ignored.

You're lazy loader is inserting placeholders for your images, which is why those errors are being displayed. That site does not fire the JS required to swap the images as it would do on load. This also can be ignored.

Hi David,

Just another quick question on this - On my Google Pagespeed report, I came across one ' Largest Contentful Paint element - 1 element found '.

I've added the Pagespeed URL in my first reply (in the box where the URL is hidden), would you please take a look and tell me what is causing this?

Thanks

LCP elements get reported when a site loads in stages.
They are the largest elements in pixels.
That information is to help users ascertain and issues with your LCP times.

In the case of that website you have a long LCP time because that image is being lazy loaded. Exclude above the fold images from lazy loading to reduce LCP time.

Hey David, I am using Sitegound's default Optimizer Plugin for lazy load and there is no specific option for enabling or disabling above the frame lazy load. However I do have a small box into which I can add a CSS class - https://imgur.com/a/kl5nArA

How can i disable above the fold images with this plugin?

Try adding the PHP snippet i provide here:

https://generatepress.com/forums/topic/excluding-featured-image-for-shortpixel-adaptive-images/#post-1349606

Then you can use the no-lazy class to exclude it.

Hi David, added your code using the Code Snippets plugin (and activated it to Run on the front-end), but there is no change in the google pagespeed report.

Could you please check my screenshot above? Should I replace 'no-lazy' in your code with 'skip-lazy' for this to work on my site?

Is the code still added to your site ?
If so can you disable SG Optimizer so i can take a look.

Hi David, added your code using the Code Snippets plugin (and activated it to Run on the front-end), but there is no change in the google pagespeed report.

Could you please check my screenshot above?

Should I replace ‘no-lazy’ in your code with ‘skip-lazy’ for this to work on my site?

Or should I just add your code and include the term 'no-lazy' to the field under 'Exclude from Lazy Load ' in the SG Optimizer plugin setting?

Can you set the code to Run Everywhere.

Should I replace ‘no-lazy’ in your code with ‘skip-lazy’ for this to work on my site?

You can use whatever class as long as its included in ‘Exclude from Lazy Load ‘ field.

Tried both, but to no effect, it still shows the same thing.