I’m a big fan of EWWWIO for WordPress and Masonry. But lately, I’ve noticed some issues when using them together. Masonry recommends using a companion plugin called imagesLoaded to detect when an image is completely downloaded into the browser window. That allows you to run a function to trigger the re-layout of Masonry. However, when using an image optimizer like EWWWIO, Masonry was failing even after all the images were downloaded and visible on this project.

I didn’t verify this, but my hunch is that it has to do with how the Lazy Load component of EWWW works; it may even have to do with the fact that I’m using webp versions of images.

Whatever the reason, I found a perhaps more elegant version of triggering Masonry. We can hook into the DOM event that Lazy Load puts out when an image is revealed, and then re-trigger Masonry!

Here’s the code:

//Define the set of images you want to display using Masonry
var $gallery = $('.project-gallery').masonry({
		  itemSelector: '.image-item',
		  percentPosition: true,
		  columnWidth: '.image-item',
		  gutter:0,
		});

//Listen for lazyunveilread and trigger masonry re-draw 
document.addEventListener('lazyunveilread', function(e) {           
     $gallery.masonry('layout');
});

If you need help with web solutions, feel free to contact us.

Frequently Asked Questions

What is an image optimizer, and how does it improve website performance?

An image optimizer is a tool or plugin that reduces the size of images without compromising their quality. By compressing and optimizing images, websites load faster, improving user experience and SEO rankings. An image optimizer can also convert images to more efficient formats like WebP, which further reduces file size while maintaining visual integrity.

Why does my image optimizer plugin conflict with Masonry on my WordPress site?

When using an image optimizer like EWWWIO along with Masonry, issues may arise due to Lazy Load or the way images are handled. EWWWIO’s Lazy Load can sometimes prevent Masonry from recognizing when all images are fully loaded, resulting in layout issues. This is often caused by how the images are served, especially in formats like WebP.

How can I ensure my Masonry layout works smoothly with an image optimizer plugin like EWWWIO?

To ensure Masonry works with an image optimizer like EWWWIO, you can hook into the DOM event that Lazy Load triggers when an image is revealed. This allows Masonry to adjust the layout when images are fully loaded. Here’s a solution to trigger the Masonry re-layout:

javascriptCopyEditdocument.addEventListener('lazyunveilread', function(e) {
  $gallery.masonry('layout');
});

This ensures your layout updates even when the images are optimized or lazy-loaded.

Can an image optimizer affect the quality of images on my website?

A high-quality image optimizer will compress images efficiently without sacrificing visible quality. It will use advanced techniques like lossless compression and conversion to modern formats like WebP, which offers excellent quality at smaller file sizes. However, the right settings and the type of images you choose to optimize can affect the final result.

What are the best practices for using an image optimizer with Lazy Load in WordPress?

When using an image optimizer with Lazy Load in WordPress, ensure your images are being served in efficient formats like WebP and that Lazy Load is properly configured to work with your Masonry layout. You can implement custom JavaScript to trigger re-layout events in Masonry when images are revealed, ensuring everything is displayed correctly.

Does using WebP images with an image optimizer affect my Masonry layout?

Using WebP images with an image optimizer shouldn’t directly cause issues with Masonry, but it can affect how images are loaded. WebP images are optimized for the web and provide smaller file sizes, but if Lazy Load isn’t properly triggering the layout function when images are loaded, Masonry may fail to adjust the layout. Using the lazyunveilread event to re-trigger Masonry can resolve this.