Page preview image

Kirby 3 Solved ✅
1

I’d like to show a custom page preview image (a.k.a. page thumbnail) from a field called “post_image”, and if not specified, the first image (as is default). I’ve got the first part right but don’t know how to do the alternative. This works but, of course, doesn’t show a fallback:

image: page.post_image.toFile

I tried this:

image: page.post_image.toFile.or(page.image.toFile)

but that doesn’t even show the custom image anymore. I also tried

image: page.post_image.or(page.image).toFile

and similar things but the fallback default first image isn’t shown. What am I doing wrong? What’s the default function for retrieving the first image, anyway?

2

No, that won’t work, you need a page model with a method that returns one or the other. Like the cover method in the Starterkit.

In blueprint: https://github.com/getkirby/starterkit/blob/57569683df0025e6410c6a8896ffd33e4c1ca033/site/blueprints/sections/albums.yml#L14

3

Wow, the replies come quick here. :slightly_smiling_face:

But I’m probably stupid, I couldn’t get this to work with my setup.

I have a page called ideas.yml containing a file field named “post_image” and have now created a file called “ideas.php” in /site/models. In this file I have:

class IdeasPage extends Page {
	public function previewImage() {
		return $this->content()->get('post_image')->toFile() ?? $this->image();
	}
}

and in ideas.yml:

image: page.previewImage.toFile

I’ve also tried

image:
  query: page.previewImage

but nothing is shown. :frowning:

4

This would be the right solution, not the first, because you already return a file from your method.

Could you provide the context for your image query? What is that, a section? If so, I need the complete section definition.

5

Here is a reduced version of ideas.yml:

tabs:
  content:
    columns:
      column1:
        width: 2/3
        sections:
          listed:
            extends: sections/ideas
            empty: No posts yet
            status: listed
            headline: Published

the extension:

type: pages
info: "{{ page.date.toDate('m-d-Y') }}"
template: idea
empty: No posts
sortBy: date desc
image:
  query: page.previewImage

and on the page where the image is coming from (which is a child page of Ideas):

tabs:
  content:
    label: Content
    columns:
      column1:
        width: 2/3
        fields:
          …
          …
      column2:
        width: 1/3
        fields:
          post_image:
            type: files
            label: Post Image
            max: 1
            multiple: false
            layout: cards

Is that sufficient or do you need more info?

6

Your model must be idea.php and class IdeaPagenot ideas, because it is in reference to the child pages, not the parent.

7

Ah, thank you so much, it works now. Incidentally the same idea crossed my mind but I wasn’t too sure because my PHP skills are pretty limited. Thanks again for your prompt response. :slight_smile: