Image sorting/re-arranging in panel

Kirby 3 Solved ✅
1

Hi there, I am creating a portfolio site for an artist. For the page template I load the images like this:

<div class="images">
      <?php foreach ($page->images()->sortBy('sort') as $image): ?>
          <figure class="<?= $image->orientation() ?>">
              <img src="<?= $image->url() ?>" alt="">
              <p class="caption"><?= $image->caption() ?></p>
          </figure>
       <?php endforeach ?>
    </div>

For the page blueprint I have this:

            images:
                label: Images
                type: files
                sortable: true
                multiple: true
                empty: "No images selected"
                image:
                    cover: true

And currently, when I upload a group of images, and then try to re-order them, it doesn’t reflect the new order in the frontend.

Any tips? Thanks!

2

Screen Shot 2020-08-19 at 1.46.30 PM

This is what it looks like in the panel. I can manually re-arrange, but it doesn’t actually do anything in the front end.

3

And lastly, A SECOND QUESTION IS THIS:
When I click the remove button (the little circle with a line through it in screenshot above) the image is removed from the panel, but still shows up in the front end. How do I allow the admin to remove the image besides deleting it?

Or perhaps I can get rid of that circle so they are forced to delete it and don’t have the option to “remove it” from the line up, which doesn’t actually do what you’d think it would do. ?

4

That’s because you are using a field with the same name as the native images method. So calling $page->images() does not get the images stored in the field, but the images from the folder.

So, to fetch the files inside that field:

$images = $page->content()->images()->toFiles();

To prevent having to use content, rename your field to, e.g. myimages.
No use to use sort here, because the files are stored in the content file in the desired order.

That’s for the same reason, because you are getting the wrong files.

5

So it should read:

 <div class="images">
      <?php foreach $images = $page->content()->images()->toFiles(); ?>
          <figure class="<?= $image->orientation() ?>">
              <img src="<?= $image->url() ?>" alt="">
              <p class="caption"><?= $image->caption() ?></p>
          </figure>
       <?php endforeach ?>
    </div>

That seems to break the page, what am I missing?

6

You have some syntax errors in your control structure. A foreach loop has to look like this:

<?php foreach ( $page->content()->images()->toFiles() as $image ) : ?>
<!-- rest of code here -->
<?php endforeach; ?>
7

YES! AWESOME THANK YOU THAT WORKS