Demo site, image order

Kirby 3 Solved ✅
1

Hi all,

a question, related to image ordering. When I look at the trykirby sites, specifically the portfolio sub-site, in the projects / animals section. (https://trykirby.com/xxxxxx/portfolio/projects).

Since I reordered the ‘animals’ images in the panel, the first image is for example the turtle. Yet when I’m on the project page, the image for ‘animals’ is the fish, which seems to indicate that the image chosen for the ‘animals’ category is based on alpha sorting.

  <?php foreach (collection('portfolio/projects') as $project): ?>
  <li class="column" style="--columns: 3">
    <a href="<?= $project->url() ?>">
      <figure>
        <span class="img" style="--w:4;--h:5">
          <?= $project->image()->crop(400, 500) ?>
        </span>
        <figcaption class="img-caption">
          <?= $project->title()->html() ?>
        </figcaption>
      </figure>
    </a>
  </li>
  <?php endforeach ?>

How can I get the image I selected (turtle) to be the first one, without resorting to renaming the image itself ?

Thanks,

j.

2

You need to tell kirby how to sort them on the front end, which in your case, you need to do it in the collection.

You can find more on sorting here:

3

I understand for the sorting of the collection, but it isn’t what I need. The image pulled for that particular project ‘animal’ is not the one that I ordered manually within the files of the ‘animal’ project.

The image that comes up to illustrate the ‘animal’ seems to be just the first alpha ordered one from all images in that project. How can I (short of having a ‘coverimage’ field for each project) use the manual sorting made in the back-end so that the project image be the same as the first image of that project ? Can that be done ?

Thanks,

j.

4

Yes, its on the Sorting guide i linked to above…

$files = $page->files()->sortBy('sort');

Then you should be able to get the first one like this

$feature = $files->first();
5

And before you call crop, check if that image exists!

if ( $feature ) {
  echo $feature->crop(400, 500);
}
6

Yes ! Thanks to both ! What worked :

  <ul class="projets">
    <?php foreach ($page->children() as $billet): ?>
      <li>
        <a href="<?= $billet->url() ?>">
          <?php
            // was :  = $billet->image()->crop(300) 
            $files = $billet->images()->sortBy('sort'); // images() instead of files() to limit the type
            $feature = $files->first();
            if ( $feature ) {
              echo $feature->crop(300);
            }
            ?>
          <?= $billet->title() ?>
        </a>
      </li>
    <?php endforeach; ?>
  </ul>

Thank you very much !

j.

7

No worries. Incase you might uploading other types of files, you can change the line to:

$files = $page->images()->sortBy('sort');

That will stop things like zip files getting caught in it. Another way is to filter the files by filetype.

8

Even better ! thanks again !

j.