Filter images in the panel and in the frontend

I’m trying to have different images on the same project, for different purpose.
But I don’t really achieve to filter them in my front-end right now.

What I would like is a hero part, where the user can upload an hero image.

 hero:
        label: Zoomed image
        type: files
        layout: cards
        size: tiny
        text: "{{file.name}} - {{file.orientation}}"
        multiple: false
        search: false

followed by a more general medias that will generate a slider on the front-end.

      medias:
        uploads: true
          template: VideoImg
        label: Images
        type: files
        layout: cards
        size: medium
        text: "{{file.name}} - {{file.orientation}} {{file.video}}"

here is the full part of the blueprint :

  files:
    label: Files
    icon: file-image
    fields:
      info-img:
        theme: normal
        label: About this project
        type: info
        text: Contains **{{ page.files.count }}** images. For a total of **{{ page.files.niceSize }}** 
      hero:
        label: Zoomed image
        type: files
        layout: cards
        size: tiny
        text: "{{file.name}} - {{file.orientation}}"
        multiple: false
        search: false
      medias:
        uploads: true
          template: VideoImg
        label: Images
        type: files
        layout: cards
        size: medium
        text: "{{file.name}} - {{file.orientation}} {{file.video}}"

So it works and let me have two separate places to upload my files, one for the hero, the other for the medias.

Now I would like to fetch my images and later get some filters using ifs but somehow I can’t manage to filter only the images from medias

but this :
<?php foreach($page->images('medias')->sortBy('sort') as $image): ?>
returns me all the 3 images (not only the two one from the screenshot for example)

Also, obviously, when i delete an image from mediasit’s not deleted from all the image list in my txt file.

Should be

uploads: videoimg

And same for the other field with a different templates.

Use in templates see docs: Files | Kirby CMS

1 Like

AFAIK, the $page->images() method takes no parameter, and always returns the full list of all images on the page - which is what you seem to be getting. You could probably achieve what you’re trying there with the $files->filterBy() method, like this:

foreach($page->images()->filterBy('template', '==', 'videoimg') as $image): 

But you should be able to get what you want simply by using your “medias” field directly in your template, as described in the docs - just pass its content to the toFiles() method, like this:

$images = $page->medias()->toFiles();
foreach($images as $image):
...

Thanks for the help,
also
$page->images()->template('VideoImg') is also great, but I prefer the toFiles() method.
it’s more convenient if the template is changed later.

Thanks a lot!