Selecting images from another page

The CMS Questions
1

Hi, I’m wondering if it’s possible to select images from another page?

I have Starterkit installed, which I’ve added a Gallery page to. Ideally I’d like to be able to populate the Photography > Album pages by selecting images from the Gallery page.

From having a browse on the forum, and looking at the documentation it seems I may be able to do this using a query in the blueprint. However, nothing I’ve tried seems to work.

My gallery.yml Blueprint:

title: Gallery

sections:
  files:
    label: Gallery images
    type: files
    layout: cards
    size: medium
    template: gallery-image
    text: "{{ file.title }}"
    info: "{{ file.photographer }}"
    image:
      cover: true

…and my album.yml Blueprint:

title: Album

icon: 🖼

status:
  draft: true
  listed: true

columns:
  - width: 1/3
    fields:
      cover: fields/cover
      headline:
        type: text
        placeholder: "{{ page.title }}"
        help: Leave empty to use the title as headline
      subheadline:
        type: text
      text:
        type: writer
      tags: true

  - width: 2/3
    sections:
      images:
        type: files
        layout: cards
        size: medium
        template: gallery-image
        info: "{{ file.dimensions }}"
        image:
          ratio: 5/4
          cover: true
        options: query
        query: site.find('gallery').images
        uploads: 
            parent: site.find('gallery')
            template: gallery-image

I’ve also tried using:

query: site.find('gallery').images.template('gallery-image')

When editing an album page I still get the Add Files option, not the Add > Select or Upload like the Cover image.

Capture
Capture950×194 6.51 KB

When I do upload an image it still uploads to that particular album’s folder and not the gallery content folder.

Is it possible to do what I’ve described?

I’ve only recently started using Kirby, so I feel like I could be missing something obvious here.

Any help would be much appreciated.

Thanks,
Iain

2

Update: I’ve also tried using a page model for this.

site/models/album.php:

class AlbumPage extends Page
{
    public function cover()
    {
        return $this->content()->get('cover')->toFile() ?? $this->image();
    }
	
	public function getAllImages()
	{
		return $this->images()->add($site->find('gallery')->images());
	}
}

album.yml Blueprint:

title: Album

icon: 🖼

status:
  draft: true
  listed: true

columns:
  - width: 1/3
    fields:
      cover: fields/cover
      headline:
        type: text
        placeholder: "{{ page.title }}"
        help: Leave empty to use the title as headline
      subheadline:
        type: text
      text:
        type: writer
      tags: true

  - width: 2/3
    sections:
      images:
        type: files
        layout: cards
        size: medium
        template: gallery-image
        info: "{{ file.dimensions }}"
        image:
          ratio: 5/4
          cover: true
        options: query
        query: page.getAllImages
        uploads: 
            parent: site.find('gallery')
            template: gallery-image

No luck with this either unfortunately. :sob:

Also, forgot to say I’m using Kirby 3.7.0.2 running on PHP 8.1.6

3

When you look closely at Files section | Kirby CMS you’ll find the parameters parent and uploads.

parent: site
query: site.images
uploads:
  parent: site
  template: image

This will find you all images below site and upload them to the same directory.

4

A files section does not have query option. You have to set the parent property:

sections:
  images:
    type: files
    parent: site.find('gallery')
    template: gallery-image

query and uploads are properties of the files field.

5

@texnixe Thanks Sonja.

I’ve updated my album.yml to contain:

    sections:
      images:
        label: Images
        type: files
        parent: site.find('gallery')
        template: gallery-image
        layout: cards
        size: medium
        info: "{{ file.dimensions }}"
        image:
          ratio: 5/4
          cover: true

All of my Album pages (in the Panel) now display all of the images in Gallery, and upload to Gallery.

Is it possible to select which images from Gallery appear in each Album?

6

No, a section is not for selecting files, if you want to select files out of a set, you would need a files field instead.

1 Like
7

Thank you! I’ve updated my original album.yml above, swapping section: for fields: and it’s now working as expected!

    fields:
      images:
        type: files
        layout: cards
        size: medium
        template: gallery-image
        info: "{{ file.dimensions }}"
        image:
          ratio: 5/4
          cover: true
        options: query
        query: site.find('gallery').images
        uploads: 
            parent: site.find('gallery')
            template: gallery-image

Now I just need to work out how to get them to display on the front-end.

8
1 Like
9

Thanks, I was already looking at that, and seem to have sussed it out.

Not sure if this will help anyone else in the future, but I’ve updated the file controllers/album.php to the below, and all seems to be working as expected.

return function ($page) {

    $gallery = $page->content()->get('images')->toFiles()->sortBy('sort', 'filename');

    return [
        'gallery' => $gallery
    ];

};

For completeness, this is the corresponding field from the album.yml blueprint:

    fields:
      images:
        type: files
        layout: cards
        size: medium
        template: gallery-image
        info: "{{ file.dimensions }}"
        image:
          ratio: 5/4
          cover: true
        options: query
        query: site.find('gallery').images
        uploads: 
            parent: site.find('gallery')
            template: gallery-image

Thanks for your help!

1 Like
10

my bad! thx for watching out @texnixe !