Masonry sometimes messed up.

[Adri Oosterwijk]

Hi,

I’m very happy with the masonry layout for archives. Especially the masonry for WooCommerce archives. However I noticed that sometimes the layout is messed up. See screenshot:

reloading the pages fixes it. But I can’t expect a visitor to reload th page when it looks messy.

I did some investigations and the solution should be the installation of the imagesLoaded.js file.

Strange enough when searching the source code I did noticed that this script is already loaded.

Hen I inspect the page I see that there are some errors.

Any idea?

[Andy]

Thank you for letting us know about this issue.

The theme did previously make use of imagesLoaded to only position the items after all images had loaded, but it didn’t work very well with the homepage product tabbed areas so we decided to not use it when we added masonry to the homepage tabs.

We tested it without and didn’t see any issues but I will of course look into the issue and see if we can fix it.

[Andy]

Hi Adri,

As a temporary fix, could you try adding this CSS and please let me know if this works for your site.

.woocommerce ul.products li.product:before,
.woocommerce ul.products li.product:after,
.woocommerce-page ul.products li.product:before,
.woocommerce-page ul.products li.product:after{
    content: "";
    display: table;
}

[Adri Oosterwijk]

Hi Andy,

I added the code to my css file and it looks like it is working. I did noticed however that the imagesLoaded script is fired. I saw this line in my html output:

<script type="text/javascript" src="http://stockphotosite.dev/wp-includes/js/imagesloaded.min.js?ver=3.2.0"></script>

I don’t know if it is called but still…. I thought to let you know.

I suggest to keep the thread open for a while. I will test it further and let you know.

Best Regards,

Adri

[Andy]

Thanks for letting me know that the css is working for you.

WordPress includes imagesLoaded by default when masonry is enqueued, so that is why you see it loaded in your html source.

[Andy]

Hi Adri

Version 1.1.5 is now available with a fix for this issue.

[Adri Oosterwijk]

Hi Andy,
After updating the theme (and disabling the temporary css fix) it looks ok Thank you for solving it this quick.
I will mark this topic as solved. I will open a new one if needed.

Have a good one!

Cheers,

Adri

[Author]

Posts