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

u003cstrongu003eWhat is an image optimizer, and how does it improve website performance?u003c/strongu003e

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.

u003cstrongu003eWhy does my image optimizer plugin conflict with Masonry on my WordPress site?u003c/strongu003e

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.

u003cstrongu003eHow can I ensure my Masonry layout works smoothly with an image optimizer plugin like EWWWIO?u003c/strongu003e

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:u003cbru003ejavascriptCopyEditu003ccodeu003edocument.addEventListener(‘lazyunveilread’, function(e) {u003cbru003e$gallery.masonry(‘layout’);u003cbru003e});u003c/codeu003eu003cbru003eThis ensures your layout updates even when the images are optimized or lazy-loaded.

u003cstrongu003eCan an image optimizer affect the quality of images on my website?u003c/strongu003e

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.

u003cstrongu003eWhat are the best practices for using an image optimizer with Lazy Load in WordPress?u003c/strongu003e

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.

u003cstrongu003eDoes using WebP images with an image optimizer affect my Masonry layout?u003c/strongu003e

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 u003ccodeu003elazyunveilreadu003c/codeu003e event to re-trigger Masonry can resolve this.