Image Preview Default

Kirby 3 Solved ✅
1

Referring to the documentation - https://getkirby.com/docs/reference/panel/sections/pages#preview-images

It shows I can create a model and then use image: page.previewImage So that I can display a default image from the assets folder or then display an image if it has been uploaded.

But if I have

image:
  cover: true
  ratio: 5/4

What is the option for this preview?

For example is it something like this?

image:
  cover: true
  ratio: 5/4
  preview: page.previewImage
2

No:

image:
  cover: true
  ratio: 5/4
  query: page.previewImage

(but it’s in the docs)

45
Bildschirmfoto 2019-08-23 um 17.22.45.png1902×532 21.6 KB

3

Shouldn’t kirby()->root('assets') . "/assets/images/default.jpg") just be kirby()->root('assets') . "/images/default.jpg") as root(‘assets’) will be at /assets/ anyway.

And I use query for other things, but just because it’s in the documentation unrelated to the new feature doesn’t mean it’s clear that’s how you do it.

4

Yes, definitely. Will fix. Is fixed. Thanks for pointing it out.

The new feature only relates to using assets, doesn’t change the default way of querying a preview image.

5

I am going to need to re-open this.

I have a field associated to my album.yml that is called ‘cover’. This is just a type of files.

pages/album.yml

      # cover photo
      cover:
        type: files
        label:
          en: Cover Photo
          de: Cover Photo
        min: 1
        multiple: false

I then have a section called albums.yml which is used to display the album in the panel. This isn’t straying too far from what is inside the starterkit already.

sections/albums.yml

# TYPE
type: pages
# HEADLINE
headline:
  en: Photography
  de: Photography
# TEMPLATE
template: album
# OPTIONS
empty:
  en: No albums yet
  de: No albums yet
image:
  cover: true
  ratio: 5/4
  query: page.cover
info: "{{ page.images.count }} image(s)"
layout: cards
parent: kirby.page("photography")
size: tiny

pages/albums.yml

  # SECTION: Unlisted
  unlisted:
    extends: sections/albums
    status: unlisted
    headline:
      en: Ready For Review
      de: Ready For Review

The query on the image above ‘page.cover’ doesn’t work and the preview that the panel is showing is just an icon and not the cover picture.

Where am I going wrong? (I hope this all made sense btw xD)

6

In the Starterkit, there is a custom page model. Is that still present in your project? In any case you have to return a file object, without the plugin you can do that with page.cover.toFile()

1 Like
7

OK, so some things I can still use like toFile() - I’ll keep that in mind for next time.