Can't get image on template

The CMS Questions
1

I’m struggling with getting the image on my template. I’m using Kirby 4 with Twig.

I’m just trying to get an event thumbnail for my page.

This is my full blueprint:

title: Event
pages: false
icon: 📅
num: "{{ page.from.toDate('Ymd') }}"


columns:

  # main
  main:
    width: 2/3
    fields: 
  

        headline1:
          label: Event info
          type: headline

        from:
          label: Start
          type: date
          width: 1/6
          default: today
        timefrom:
          label: Time
          type: time
          width: 1/6
          default: now

        to:
          label: End
          type: date
          width: 1/6
          default: today + 1day
        timeto:
          label: Time
          type: time
          width: 1/6
          default: now

        type:
          label: Category
          type: select
          width: 1/4
          options:
            residency: Residency
            ind: Independent Event
            research: Research

        description:
          label: Description
          type: textarea
          size: tiny
        
        thumbnaill:
          label: Event Thumbnail
          type: files
          multiple: false
          layout: cards
          width: 1/3
          image:
              ratio: 5/4
              cover: true
              min: 1
              size: small
              help: Please upload an image for the event thumbnail.
          uploads:
              template: image

        slices:
          type: blocks
          label: Content
          fieldsets:
            - image
            - gallery
            - video
            - text
            - heading
          # sidebar
  sidebar:
    width: 1/3
    sections:
        thumbnail:
          label: Event Thumbnail
          type: files
          multiple: false
          layout: cards
          width: 1/3
          image:
              ratio: 5/4
              cover: true
              min: 1
              size: small
              help: Please upload an image for the event thumbnail.
          uploads:
              template: image

{{ dump(page) }} will print this out:

object(Kirby\Cms\Page)#237 (15) {
  ["content"]=>
  object(Kirby\Content\Content)#451 (10) {
    ["title"]=>
    string(13) "Event example"
    ["from"]=>
    string(10) "2024-04-25"
    ["timefrom"]=>
    string(8) "09:15:00"
    ["to"]=>
    string(10) "2024-04-26"
    ["timeto"]=>
    string(8) "09:15:00"
    ["type"]=>
    string(3) "ind"
    ["description"]=>
    string(20) "Description of event"
    ["thumbnaill"]=>
    string(25) "- file://dcIkvNFZhBt4yPEB"
    ["slices"]=>
    string(0) ""
    ["uuid"]=>
    string(16) "hjoPkRSXi5WKgS18"
  }
  ["translations"]=>
  object(Kirby\Cms\Collection)#534 (0) {
  }
  ["children"]=>
  object(Kirby\Cms\Pages)#555 (0) {
  }
  ["files"]=>
  object(Kirby\Cms\Files)#552 (1) {
    [0]=>
    string(52) "events/event-example/20231114_084338_4013_opt_02.jpg"
  }
  ["id"]=>
  string(20) "events/event-example"
  ["mediaUrl"]=>
  string(53) "http://[sitename].test/media/pages/events/event-example"
  ["mediaRoot"]=>
  string(65) "/Users/[username]/Sites/[sitename]/media/pages/events/event-example"
  ["num"]=>
  int(20240425)
  ["parent"]=>
  string(6) "events"
  ["slug"]=>
  string(13) "event-example"
  ["template"]=>
  object(Wearejust\Kirby\Twig\Template)#240 (4) {
    ["defaultType":protected]=>
    string(4) "html"
    ["name":protected]=>
    string(5) "event"
    ["type":protected]=>
    string(4) "html"
    ["twigpath":"Wearejust\Kirby\Twig\Template":private]=>
    string(10) "event.twig"
  }
  ["uid"]=>
  string(13) "event-example"
  ["uri"]=>
  string(20) "events/event-example"
  ["url"]=>
  string(41) "http://[sitename].test/events/event-example"
  ["siblings"]=>
  object(Kirby\Cms\Pages)#236 (1) {
    [0]=>
    string(20) "events/event-example"
  }
}

No matter what I do, the “thumbnail” field will not show up. All image uploads will end up in the files array, but the thumbnail field is nowhere to be seen. This hints at some blueprint error I cannot seem to figure out. This is weird because I can see on the panel, on the sidebar, and I am able to upload an image into it.

So I tried a second field, the thumbnaill field in the main section. This does work, kind of, in the sense that I get something out of thumbnaill but it’s a string I can’t use for <img> tags, and I’m not sure how to get a simple .jpg out of it

{{ page.thumbnaill() }} will give me a - file://dcIkvNFZhBt4yPEB

I’m struggling with a lot of basic things when using Kirby it seems, even after years of using twig and WP. I’m not sure if this is displaying a knowledge gap I have that I didn’t know about or I’ve just had bad luck. Any tips welcome.

2

I only see one files field, the one with the double lls at the end. The other thumbnail thing is a files section, not a field, it’s under the sections keyword.

3

You’re absolutely right, that answers my question of what could be wrong in the blueprint.

I’m still not sure how to get the image’s source so I can display them.

{{ page.thumbnail }}

{{ page.thumbnail() }}

{{ page.thumbnail.src }}

{{ page.thumbnail().src }}

{{ page.thumbnail().url }}

{{ page.thumbnail().url() }}

All of these return - file://dcIkvNFZhBt4yPEB

I’ve got somewhere with {{ page.thumbnaill().toFiles() }} but this will give me a relative URL

So the only way I’ve managed to make it work is by using
<img src="{{ site.url }}/{{ page.thumbnaill().toFiles() }}">

And I’m sure there must be an easier way…?

4

Ok, I managed with

{{ page.thumbnail().toFile().url }}

I can add a twig variable to make this easier to template for different pages. I’m just wondering – is this the most common method?

5

Yes, see this section in the files field docs: Files | Kirby CMS