How does Kirby sort uploaded images by default?

Kirby 2 Solved ✅
1

Hi folks, is it common for Kirby to alphabetically sort images attached to a page even if sortable is set to true in the blueprint? No matter if I manually sort the images in the panel Kirby is displaying my cover image based on the filename. I’m not sure if it’s something related to my customization or if this is native Kirby functionality.

Here’s the scoop:

Let’s assume I upload a series of images (image1.jpg, image2.jpg, image3.jpg). The way I currently have it configured, Kirby will automatically display image1.jpg as my cover photo and the other two can be used in the content textarea if the user wishes to drag-n-drop them in as kirbytext, e.g. (image: image1.jpg).

If I manually sort the images in the panel and move image2.jpg as the first image in the series, I figured Kirby would display it as the cover image instead of image1.jpg.

It doesn’t.

It’s probably easier to use the ‘image’ panel field type to set a cover image but I’m simply experimenting right now.

Thanks for any help you can provide.

2

When you sort images manually, the Panel will add a meta data file with a sort field. So to get the first image of these sorted images, you can do this:

$coverImage = $page->images()->sortBy('sort')->first();
3

Thank you, Sonja. That was simple enough.

I’m not currently using the image field type and ($coverImage) but here’s the code I added to my template:

<div>
  <?php if($image = $page->images()->sortBy('sort')->first()): ?>
     <img src="<?php echo $image->url() ?>" alt="" border="0">
  <?php endif ?>
</div>

If I wanted users to select a cover image using the image field type instead of the way I described above, what would be the best way to integrate that into my template?

4

Hi @kmedeiros,

$coverImage is just a variable, not a field.

Suppose you had a field called cover_image, you can get the image like this:

<div>
  <?php if($coverImage = $page->cover_image()->toFile()): ?>
     <img src="<?php echo $coverImage->url() ?>" alt="">
  <?php endif ?>
</div>
```
6

i would like to get an cover_image to the Head of the Page and in the content the second image in the folder.
how can i get the picture its is not cover_image

<?php if($image = $project->cover_image()->toFile()): $thumb = $image->crop(1240, 867); ?>
     <figure><img src="<?= $thumb->url() ?>" alt="<?= $project->title()->html() ?>" class="slider--image" /><figure>
<?php endif ?>

the first one is

 <?php if($image = $project->images()->sortBy('sort', 'asc')->first()): $thumb = $image->width(800); ?>
     <figure> <img src="<?= $thumb->url() ?>" alt="<?= $project->title()->html() ?>" class="showcase-image" /> </figure>
 <?php endif ?>

can someone help?

7

You can exclude a particular image like this and then fetch the first of the rest:

$image = $project->images()->sortBy('sort', 'asc')->not($project->cover_image())->first();