Thumbnails don't show up in the panel

Kirby 3 Solved ✅
#1

I want to display the product thumbnails in the panel, similar to Starterkit. However, the thumbnails don’t show up, it shows the :framed_picture: icon instead. The thumbnails render nicely on the front-end.

28
Screenshot 2019-04-16 23.01.28.png720×929 43.2 KB

Here are my blueprints:
site.yml


columns:
  - width: 1/2
    sections:
      products: sections/products
  - width: 1/2
    sections:
      notes: sections/notes

sections/products.yml

type: pages
headline: Products
parent: site.find("products")
size: tiny
info: "{{ page.images.count }} photo(s)"
layout: cards
template: product
empty: No products available
image:
  query: page.thumbnail 
  ratio: 1/1
  cover: true

pages/product.yml

title: Product
icon: 🖼

status:
  draft: true
  listed: true

columns:
  - width: 2/3
    sections:
      content:
        type: fields
        fields:
          title:
            type: text
          description:
            type: textarea
      images:
        type: files
        layout: cards
        template: image
        info: "{{ file.dimensions }}"
        image:
          ratio: 1/1
          cover: true
        min: 1
        size: small
    

  - width: 1/3
    fields:
      thumbnail:
        type: files
        multiple: false
      tags: true

Thanks for your help!

Min

#2

Thats an odd one. Since your thumbs are ok on the front end, seems like the generation went ok. Guessing it not a server issue.

I dont suppose you have an ad blocker installed in your browser? You may have hit a common advert size by pure fluke, and the blocker could be hiding them.

#3

There is no page.thumbnail, should be something like

query: page.image.findBy("name", "cover")

or

query: page.image # get the first image, that's the default anyway

unless you have defined a thumbnail page method somewhere.

1 Like
#4

query: page.image Works like a charm. Thanks a lot!

#5

I change to query: page.image as @texnixe suggested and it works nicely

11
Screenshot 2019-04-16 23.32.11.jpg719×926 300 KB

#6

Smashing :slight_smile: You can actually take that line out completely, since query: page.image is the default, and does not require being explicitly set.

1 Like
#7

I am maybe missing something but custom thumbnail does not work for me:

sections/film.yml

type: pages
headline: Films
info: "{{ page.date.toDate('d.m.Y') }}"
template: film
empty: No content yet
sortBy: date desc
image: page.image.findBy("name", "cover")

page/film.yml

title: Film
num: '{{ page.date.toDate("Ymd") }}'

status:
  draft:
    label: Draft
    text: The article is still in draft mode. It can only be seen by editors with panel access.
  listed:
    label: Published
    text: The article is online and listed in the blog

columns:
  main:
    width: 2/3
    fields:
      cover: # <-- this field should be used for thumbnail
        label: Image de couverture
        type: files
        layout: cards
        template: image
        info: "{{ file.dimensions }}"
        image:
          ratio: 16/9
          cover: true
        max: 1
        size: large
        ...

This is not working also :

    image:
        query: page.image.findBy("name","cover")

    image:
        query: '{{ page.image.findBy("name","cover") }}'

No image option and image: page.image is working, but takes the first image in the files panel.

I am using the Kirby Plainkit, so I tried to add the blueprints/files/image.yml and replace the image but this does not work too.

Thanks for your help !

#8

Should be page.cover.toFile() I think.

1 Like
#9

Thanks ! page.cover.toFile() works.
Just to understand what I was doing wrong, why does this work and page.image.findBy("name","cover") taken from the doc doesn’t ?

Thanks

#10

The code in the docs doesn’t make sense.

#11

Ok thanks, I think there is a misunderstanding between page.image that is working and page.image.findBy(...) that is not, I thought .findBy() was a kind of filter for all images in the page…

#12

Yes, findBy() can be used with a collection, not with a single object.

#13

Wrong image is being displayed in the cover image option, how can i fix this issue? here is the image query in the blueprint:
page.images.template(“cover”).first