Multiple images on page?

The CMS Questions
1

A very simple one it sounds, but I cannot figure how to separate out the images on a page as a new person to Kirby.

I have three rows of different images, including main hero image, a gallery of images and a gallery or logos…

Hero
Gallery
Logos

If using the:
<?php foreach ($page->images() as $image): ?>
…

It seems to get all images and I’m not sure in the .yml file how to separate out the three sections as they are showing all the image under one section and then show the images on the page as three different section.

Thanks.

2

Could you post your blueprint with the sections (complete blueprint), please? I guess you are not assigning different templates per section? Or how are your images separated into hero, logo and image galleries in the Panel? Are you using fields for this?

3

I’m honestly not sure, at the moment all images are showing in the sidebar, but are not separated.

sidebar

  sidebar:
    width: 1/3
    sections:

      # a list of files
      sponsorsLogos:
        type: files
        label: Sponsor's Logos

Ideally there need to be

Hero
  type: files
  label: Hero image

Gallery
  type: files
  label: Gallery image

Sponsors
  type: files
  label: Sponsor's logos

As a starter any help would be much appreciated.

4

I’d define either a files field for every category, then you can select the files you need for each category in these fields. See Files | Kirby CMS. A files field is basically a select field, the documentation has instructions how to use at the end of that page.

Alternatively, you can set up a separate section for each type. Then you need to assign a different template for each section, and filter by that template when querying the files in your template, see Files section | Kirby CMS and in particular Files section | Kirby CMS.

With the second option, in your template

if ($hero = $page->images()->template('hero')->first()) {
  // html to output image
}
5

Thanks, will take a look. For a CMS that says it for designers I find it quite confusing.

Ideally I need the separate lists in the Kirby CMS page. but at the moment the images are all appearing under one list and when I add to another list.

For example, when I add an image under this one

cover:
            label: Main Image
            type: files
            layout: cards
            max: 1
            image:
              cover: true

It auto appears under this:

sponsorsLogos:
        type: files
        label: Sponsor's Logos
6

Right, please read carefully what I wrote above and the docs. Your sponsorLogos is still a section, not a field. It is important to understand the difference between the two and how to make them do what you want.

1 Like