Match preview image for pages section with card layout with child page gallery image order

Kirby 4 Solved ✔️
1

Hi everyone,
is it possible to match the preview image of pages in the panel that contain a gallery with the gallery sorting?

I have a “residents”-page, with an overview of all residents. Each resident has the option to upload images in a gallery.
For the residents page in the panel, I’ve used a ‘pages’-section:

title: Residents

sections:
  residents:
    type: pages
    layout: cards
    status: listed
    image:
      ratio: 1/1
      cover: true

So far the image shown seems to be the first image uploaded in the gallery of each child page.

This is the gallery of the resident’s Detail page:

  right:
    width: 1/2
    sections:
      gallery:
        template: image
        type: files
        layout: cards
        info: "{{ file.dimensions }}"
        ratio: 1/1
        max: 8

the files/images.yml:

title: Image

accept: image/*

fields:
  alt:
    type: text
    width: 1/2
  caption:
    type: text
    width: 1/2

The goal is, that when the user changes the order of the images in the gallery, the image shown in the ‘card’-layout of the detail pages adapts to that.

Here are screenshots where you can see, that the image of the bull (first one uploaded to the gallery) is in 5th position but appears as a preview image to the page in the card layout:

gallery
gallery812×687 188 KB

residents
residents764×470 109 KB

2

You can set the image to your needs in the page section via the image option, see docs: Pages section | Kirby CMS

So here you could query the first image by sorting number

image: page.images.sorted.first
3

Thanks for the quick reply, I’ve set the options for the image with ratio and cover and I am unsure where I should nest the image option.

See below the nesting I’ve tried (without success), assuming I’m adding this to the residents.yml:

    image:
      image: page.images.sorted.first
      ratio: 1/1
      cover: true

    image:
      page.images.sorted.first
      ratio: 1/1
      cover: true

    image: page.images.sorted.first
    image:
      ratio: 1/1
      cover: true
4

Edit:

    image:
      query: page.images.sorted.first
      ratio: 1/1
      cover: true

This works fine, thank you for pointing me to the direction!