Isotope with Masonry Layout Broken / Not Lining Up (and How to Fix It!)
I love the folks at Metafizzy, especially for their Flickety slider, but a recent project called for using their Isotope layout feature.
And then one day, it broke.
I struggled to figure out the answer, searching through their documentation, endless Stackoverflows, and all across Google, but couldn’t figure it out.
Until I did! The problem?
Lazy loading images!
I happen to host with SiteGround, and the project was a WordPress site, so I used their SG Optimizer plugin. This plugin includes a lazy loading feature, and I was able to easily resolve the issue.
First, where I was calling the images, I was simply using the_post_thumbnail('medium');
The SG Optimizer plugin has the ability to exclude lazy loading by class, in this case that class was .skip-lazy
.
So in my theme file, I just changed it to:
<?php the_post_thumbnail('medium', ['class' => 'skip-lazy']); ?>
Problem solved!
Up Next: CSS: How to Position a Background Image X Pixels from the Right Edge