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!