Make images on a page "unlisted" vs "listed" like pages can be?

Kirby 3 Solved ✅
1

Images make up 90% of the content on my site, and my template is set up to where the page for a given post just calls on all of the current page’s images:

<?php foreach ($page->images() as $image): ?>

but I want to be able to store additional images in the page’s folder that will be ignored when the post is displayed, primarily to store alternate versions/sizes that i can call on specifically in other scenarios. Is there a function for images similar to how a page can be listed or unlisted, and you can specifically call on only listed pages? Or if not, what would be the most efficient means to go about this?

2

I think you want a files section with a specific template, which can then be called in your html template.

Where do you display them and what other version do you need? You could use the thumb method to do this from your main image: Image thumbnails | Kirby CMS

3

I also had this challenge with a project. Only certain images should be displayed in a slider, as there are often images or logos in the folder that are used in a different position. I solved this with a selection field. In your example, you can use the selection field to select the irrelevant images. It would be too cumbersome to select the relevant images if 90% of them are relevant.

images
images1674×2128 171 KB

4

You could also put a toggle feild in the files meta data and filter on it. I sometimes do this with feature images that get pulled into a slider on another page.

5

So, I’ve got my panel set up with a files section now and that feels like the most logical solution to my problem, but what would be the syntax to call all of the images I have selected? My html template uses a foreach function that currently calls up all images of the page, is there a way to write it as a foreach of each file listed in that field in the txt file?

6

If you have named the selection field with the desired images “imageselection”, this is the simplest output of the images:

<?php foreach($page->imageselection()->toFiles() as $file): ?>
<img src="<?= $file->url() ?>">
<?php endforeach ?>

If you want to scale or crop the images, you can add to the output.
Here is an example of scaling the width of the images to 600 pixels:

<?php foreach($page->imageselection()->toFiles() as $file): ?>
<img src="<?= $file->resize(600)->url() ?>">
<?php endforeach ?>
7

Have you assigned a template name? Can you post your blueprint?

You can find the example code in the linked doc (Files section | Kirby CMS). With this code you only show the images with the template gallery. Change it to yours accordingly.

<?php $galleryImages = $page->images()->template('gallery'); ?>
<ul>
<?php foreach ($galleryImages as $image): ?>
    <li><img src="<?= $image->url() ?>" alt="<?= $image->alt() ?>"></li>
<?php endforeach ?>
</ul>
8

This worked perfectly, i had the exact same setup but i didnt know there was a difference between toFile and toFiles hahaha! Thank you for your help : )

1 Like
9

I assume you have informed yourself about the differences in the meantime :sunglasses:
With “toFile()”, only one image is output, such as the cover image. And “toFiles” outputs several images in a foreach loop. As in your case.

1 Like