Using Masonry + Infinity Scroll + ImagesLoaded in WordPress Themes Today


During the update of our Rich Grid and Super Grid Theme as well as the development of the Rich Modern Theme I came across an issue with the Masonry + Infinity Scroll + ImagesLoaded combination of scripts.

While the first set of posts always rendered without issues, the second set would either overlap or images would not be displayed in newer Safari versions.

It turned out that he ImagesLoaded script is not yet compatible with the WordPress srcset responsive images.

While I had no interest in disabling the responsive images completely, except than for the feature image call in our loop.php I though that there would be an easy way to just disabling responsive images for one add_image_size.

It turned out, that the best solution is actually much simpler:

I added image size in my functions.php

add_image_size( 'grid-thumb', 500, 99999 );

… and then simply read out the_post_thumbnail_url instead of using the the_post_thumbnail tag.

<img width="500px" src="<?php the_post_thumbnail_url('grid-thumb'); ?>" alt="<?php the_title(); ?>" />

It actually is a simple, effective and elegant solution to a complex problem. Once the ImagesLoaded script will support the srcset responsive images we will be able to change it back to the_post_thumbnail call without having to change a lot.

Leave a Reply

Your email address will not be published. Required fields are marked *