Need help to render images in block preview

Kirby 3 Solved ✅
1

Hi,

I tried to build my first custom block to be able to adjust the block preview in the panel.
I found an example here which I downloaded and implemented in my project. (I removed the nested block as I don’t need it)
It works fine and the block preview looks perfect too but now I want to have two Images in my block. I think I am looking for a poster image which is explained here but as soon as I try to add this piece of code

<k-aspect-ratio class="k-block-type-audio-poster" ratio="1/1" cover="true">
<img
  v-if="poster.url"
  :src="poster.url"
  alt=""
>
</k-aspect-ratio>

to my index.js in the plugin block folder, the panel is telling me “Can’t find variable: poster”.

This is my block.yml:

plugins/faq-block/blueprints/blocks/faq.yml

name: FAQ
icon: star
fields:
  headline:
    type: text
  text:
    type: writer
  poster:
    type: files
    query: page.images.template('poster')
    uploads: poster
    multiple: false
    width: 1/2

My block index.php:

plugins/faq-block/index.php

<?php

Kirby::plugin('your-project/faq-block', [
    'blueprints' => [
        'blocks/faq'      => __DIR__ . '/blueprints/blocks/faq.yml',
        'files/poster' => __DIR__ . '/blueprints/files/poster.yml'
    ],
    'snippets'   => [
        'blocks/faq'      => __DIR__ . '/snippets/blocks/faq.php',
    ]
]);

What am I missing here?
I would also appreciate any link to an example to download with image preview! :slight_smile:

Thanks!

2

In the example, poster refers to a computed method that returns , read the recipe carefully again.

<script>
export default {
  computed: {
    poster() {
      return this.content.poster[0] || {};
    },
    source() {
      return this.content.source[0] || {};
    }
  }
};
</script>
3

Thank you!
Is there maybe another easier way to pull images from a files-field and display them in the panel as images? :slight_smile:

4

What do you mean with an easier way? Or what problem exactly do you have with this?

5

I’m completely new to all this and thought that I maybe can add an Image just like any other content from a block like e.g.:

{{ content.headline }}

but I understand that it is more complex to render images :slight_smile:
Thanks!

6

No, for the image you want to get the url, so you better use the computed methods, to return an empty object if the field is empty. It’s only little more work.

1 Like