Essayer de faire fonctionner Masonry-Layout dans Safari avec imagesLoaded

Question

J'ai implémenté avec succès Masonry-Gallery pour le site Web WordPress en utilisant Bootstrap 5 combiné avec « Masonry-Layout ». Cela fonctionne très bien sauf dans Safari où la mise en page se casse souvent, c'est un problème connu et la solution devrait être "imagesLoaded". J'ai beaucoup essayé mais je n'arrive tout simplement pas à ajouter les cours requis au bon endroit. Autant que je sache, le code est le suivant. Quelqu'un peut-il m'aider ?

<div class="row grid" id="gallery-masonry" data-masonry='{"percentPosition": true }'>
    
<?php 
$images = get_field('gallery');
$size = 'large';
    
if( $images ): ?>       
        <?php foreach( $images as $image_id ): ?>
    
<div class="col-md-6 mb-3">            
    <div id="post-<?php the_ID(); ?>" class="card rounded-0" >  

    <?php echo wp_get_attachment_image( $image_id, $size, "", ["class" => "card-img-top rounded-0","alt"=>""]); ?>

    </div>
</div>   
        <?php endforeach; ?>
  
<?php endif; ?>

</div>

<!--Masonry-Layout-->
<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>


<!--ImagesLoaded-->
<script src="https://unpkg.com/imagesloaded@5/imagesloaded.pkgd.min.js"></script>


<!--Script ImagesLoaded-->
<script>
var $grid = $('.grid').imagesLoaded( function() {
  // init Masonry after all images have loaded
  $grid.masonry({
    // options...
  });
});
</script>

Answer 1

Consultez mon article sur l'ajout de Masonry à votre site WordPress.

https://www.customfitwebdesign.com/how to add maçonnerie layout in wordpress/

Remarque : la maçonnerie est en fait intégrée au cœur de WordPress ( wp-includes/js/masonry.min.js ). Cette version WordPress de Masonry inclut également ImagesLoaded (imagesloaded.min.js).