0

I'm using the Masonry-layout jQuery in combination with Bootstrap 5 as per docs from Bootstrap. I have used this before without any problems in ACF repeater fields. Now I'm using it in an ACF gallery.

The problem is that on first load of the page, the items are displayed almost on top of each-other. The height of that full block is variable on each first-load. After a refresh of the page, the gallery is displayed fine with the masonry.

enter image description here

The problem is the masonry, as I do not see this problem without the masonry. What I have tried so far:

  1. Changing ACF gallery to ACF repeater fields for the images
  2. Added latest jQuery in header.php
  3. disabled all CSS

Is this issue a bug? is it seem before or a know nug?

Kind regards,

quinox
  • 43
  • 4

3 Answers3

1

Problem is solved by using another javascript. According to the Bootstrap docs I had to use:<script src="https://cdn.jsdelivr.net/npm/masonry-layout@4.2.2/dist/masonry.pkgd.min.js" async></script> script. This failed so I used another one script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>. This works great now and problem is solved.

quinox
  • 43
  • 4
1

I had the same Problem with bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js and masonry-layout@4.2.2/dist/masonry.pkgd.min.js.

The issue was that the browser finished to load the libraries before loading the images I had in my dom. Thus masonry transformed the layout and afterwards when the browser finished to load the images, the layout was destroyed. Since you also have images in your dom, I think my solution could help you.

I solved the problem by moving the libraries loading to the end of the html document and added preloading for the images.

The thired step ist to define the height of the image, so ist will be rendered correctly before ist was loaded completely.

<head>
   <link rel="preload" as="image" type="image/webp" ref="img/image.webp">
</head>
<body>
   <div class="container">
      <div class="row" data-masonry='{"percentPosition": true }'>
         <div class="col-sm-4 col-md-3 py-2">
            <img src="img/image.webp" width="200" height="250">
         </div>
         {{/*  some more cloumns */}}
      </div>
   </div>
   <script src="bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"</script>
   <script src="masonry-layout@4.2.2/dist/masonry.pkgd.min.js"</script>
</body>
Niwtro
  • 11
  • 2
  • An other way to solve this problem is to use a library (https://github.com/desandro/imagesloaded) to init masonry after all images have been loaded. It is documented here: https://stackoverflow.com/questions/20542309/using-masonry-with-imagesloaded – Niwtro Jun 13 '23 at 18:51
0

@isherwood, Bootstrap V5.

Integrated Masonry-layout to Bootstrap by adding data-masonry='{"percentPosition": true } to the .row wrapper.

Then added this <script src="https://cdn.jsdelivr.net/npm/masonry-layout@4.2.2/dist/masonry.pkgd.min.js" integrity="sha384-GNFwBvfVxBkLMJpYMOABq3c+d3KnQxudP/mGPkzpZSTYykLBNsZEnG2D9G/X/+7D" crossorigin="anonymous" async></script> to my header.php.

I've added this the necessary code to my row class: <div class="row" data-masonry='{"percentPosition": true }'>

quinox
  • 43
  • 4