Kirby and Fleximages

I am working on a gallery page laying the images out using Fleximage.js and am having a hard time pulling in the image dimensions as data points for the script to use.

Below is my code for fetching the images. They need to have height and width data points for the script. Currently the is applying the first images dimensions to all the images retrieved.

Any thoughts?

		<div class="flex-images my-gallery">
	      <?php foreach($page->images()->sortBy('sort', 'asc') as $image): ?>
		  	<div class="item" data-w="<?php echo $page->image()->width() ?>" data-h="<?php echo $page->image()->height() ?>">
			  <img src="<?= $image->url() ?>" alt="<?= $page->title()->html() ?>"/>
			</div>
		  <?php endforeach ?>
		</div>

The problem is that instead of using your $image variable within your loop, you call $page->image()for the data-w and data-h attributes. $page->image() always gets the first image in the folder.

<div class="flex-images my-gallery">
  <?php foreach($page->images()->sortBy('sort', 'asc') as $image): ?>
    <div class="item" data-w="<?= $image->width() ?>" data-h="<?= $image->height() ?>">
      <img src="<?= $image->url() ?>" alt="<?= $page->title()->html() ?>"/>
    </div>
  <?php endforeach ?>
</div>

Perfect! Thanks for the help!