Does Lazy Loader work on archives?

Hi Matt,

thanks, nice to hear that ??

To your question: the plugin should work for those page types as well. Could you provide a link to your site so I can take a look?

Thanks,
Florian

Sure, the site is https://thingstodoinbarcelona.com/

On the homepage and archive pages (https://thingstodoinbarcelona.com/attractions/) lazy loading doesn’t seem to work, while single posts/pages work fine.

I’m using the GeneratePress theme: https://github.com/tomusborne/generatepress

Thank you!

Thanks for the links! Do you have other plugins installed that are modifying the markup of the images? I installed GeneratePress on my local development site and there it works for the blog view.

As far as I see, the theme uses the get_the_post_thumbnail() function for displaying the featured images on blog and archive pages, and that is supported by my plugin… But there are classes missing for the img elements on your site that should be present for image elements that are generated using the function (like, for example, the wp-post-image class), so I think a plugin or modification of the theme causes the issue.

Thanks for your fast reply!

I do have a few custom functions to set srcset and sizes attributes, maybe that’s the problem. I’ll have a look and if the solution could be helpful for others I’ll follow up here.

Sounds good! And thanks a lot for your donation ?

My pleasure ??

The theme author told me this:

Yes, we alter the image HTML when resizing is enabled, as we need to call a different image function.

What’s the class that needs to be added? We should be able to give you a filter to add it manually.

The class that I should add is lazyload right? Or do we need to add anything else?

Yes, the lazyload class is needed, but also the src attribute needs to change to data-src. And for disabled JavaScript, a noscript element with the original img element as a fallback would be good. You can see examples of the needed markup in the readme of the lazysizes script: https://github.com/aFarkas/lazysizes#how-to

?[…] as we need to call a different image function.?

If this is a custom function of the theme to build the markup, and not wp_get_attachment_image(), and they could add a filter to modify the resulting markup of that function, I could use that filter in Lazy Loader and it should work.

Ok, for anyone else who wants to get this plugin to work well with GeneratePress blog and archive pages, here’s what you need to do:

1. Turn off the image sizing options in Customize > Layout > Blog.
2. Change the image size in this filter to the size you use and include it in your functions file:

   
   add_action('after_setup_theme', 'tu_add_image_sizes');
   function tu_add_image_sizes() {
       add_image_size( 'large-thumbnail', 600, 600, true );
       add_filter( 'generate_page_header_default_size', 'tu_set_image_size' );
   }
   
   function tu_set_image_size() {
       return 'large-thumbnail';
   }

Happy that you got it working!