CODEWITHSUNDEEP
packeryimagesloadedkirby
Chaz
Chaz

Reputation: 233

Image overlapping issue with Packery and ImagesLoaded with images served over PHP

Been at this for maybe too long now but cannot seem to get the packery/imagesLoaded combo to work with my Kirby site. I get the infamous picture overlap. The following is where I enter the imageURL into the tag.

<div class="grid">
  <div class="grid-sizer"></div>
  <div class="gutter-sizer"></div>

  <?php foreach($projects as $project): 

      $project_image = $project
        ->files()
        ->filterBy('type', 'image')
        ->shuffle()
        ->first();
  ?>

  <div class="grid-item">
  <?php 
    <img src="<?= $project_image->url() ?>" alt="<?= $project->title()->html() ?>" class="showcase-image" /> 
  ?>
    <div class="showcase-name left">
        <p class="showcase-title"><?= $project->title()->html() ?></p>
        <p class="showcase-occupation"><?= $project->occupation()->html() ?></p>
    </div>

  </div>

  <?php endforeach ?>

And this is where I initialize packery and imagesLoaded in the footer:

 <script>
    // init Packery


    $(document).ready(function() {
      var $grid = $('.grid').packery({
        itemSelector: '.grid-item',
        gutter: '.gutter-sizer',
        columnWidth: '.grid-sizer',
        percentPosition: true
      });
      // layout Packery after each image loads
      $('.grid').imagesLoaded().progress( function() {
        $('.grid').packery();

        });
      });

  </script>

I know there a a bunch of people with the same issue and I have tried some other solutions like this one but no avail. Does it have to do with the manner in which I serve the images? Any info and help is greatly appreciated.

Upvotes: 1

Views: 370

Answers (1)

muneebbug
muneebbug

Reputation: 9

This worked for me like a charm!

<script src="/assets/templates/site/js/imagesloaded.pkgd.js" type="text/javascript"></script>
<script src="/assets/templates/site/js/packery.pkgd.js" type="text/javascript"></script>

<script>
var $grid = $('.packery').packery({});

$grid.imagesLoaded().progress( function() {
      $grid.packery();
    });

</script>

Upvotes: 0

Related Questions