WIP: New Masonry Layout - partly shifted loop items above each other

Bugs
1

Bildschirmfoto 2024-11-27 um 17.05.33
Bildschirmfoto 2024-11-27 um 17.05.331920×1169 384 KB

I have a test site, where I tried the new Masonry Layout. The items of the query loop are shifted partly above each other.

This happens in the current versions of Google Chrome, but the masonry layout works in Firefox and Safari.

Link to the test site:

https://duplikatprint.bertholdsteinhilber.com/test-masonry/

I came across this on another site, where I used WP Grid Builder for the facets, and there I had the same problems with shifted loop items above each other in all browsers.

This reminds me of the same problems I had with the image gallery and masonry layout ca. 1.5 years ago.

Thank you for any help and ideas

Berthold

2

Hi,

I can see the issue on your website. Can I ask how you load the images? Are they lazy-loaded? If they are, can you try to disable it, and see if it makes a difference?

Thanks,
Matej

3

Dear Matej,

thank you for your help. If I change the loading of the images in the card to eager the masonry layout seems to work.
But as soon as I want only to show e.g. 9 loop items and the rest of the loop items with infinite scrolling the overlapping starts again.

The same happens with the load more option of WP GridBuilder. The first loops are displayed correct in masonry layout, but when I click load more the same overlapping happens as well here.

Hope this info could help

Thanks
Berthold

4

Can you try setting an aspect ratio on your image container? That should ensure the space is locked in regardless of the image lazy loading

5

Dear Pete,
yes, that is what I used to do with the aspect ratio, and it works perfectly - I just wanted to test the new masonry layout setting of Bricks to be able to mix landscape and portrait orientated photographs in the cards.

If I use WP GridBuilder for facets I wanted to avoid using their cards…

So for now I stick with the aspect ratio solution.

Thanks
Berthold

6

Hi,

I was able to replicate the issue locally, and I’ve opened an internal task for this.

Thank you,
Matej

1 Like
7

Hi @berthold

We have a potential fix ready for this issue.
Are you able to provide admin access for us to apply the fix on your test site?
If so, kindly email to help@bricksbuilder.io and include this forum thread as a reference

Regards,
Jenn