Hello gang,
Is there a pre-made text and image block so that I don’t have to reinvent the wheel? My intention is to have a block where you can have text and image side by side (in viewports that allow this), with a way to select the alignment (image left or right). Ideally it would also have a block preview in the editor.
Is there something like that out there already?
The Custom Block video covers this. It’s pretty straightforward.
I don’t see this type of block covered in the video. Are you saying I should use a structure field for that? Because that’s not actually what I need. Also, I should say that I’m using Kirby 3.9, and there is no WYSIWYG preview, so I’d have to create my own view which is why I’m asking whether someone has created something like this already, so I don’t have to reinvent the wheel.
I’m a newbie, but I’ve just created a custom block, consisting of a text and image field, for use in the Panel.
I think that Kirby 4 and the updated video makes this a whole lot easier than in Kirby 3.
Instead of the structured field shown in the video use a text field and an image field.
Here’s my page Blueprint which includes the custom block ‘guitar’
title: Guitar Page
columns:
main:
width: 2/3
type: fields
fields:
hero_image:
label: Hero image
type: files
multiple: false
layout: cards
size: medium
image:
back: white
heading:
type: text
guitar_blocks:
type: blocks
label: Content
pretty: true
fieldsets:
- heading
- text
- type: guitar
preview: fields
wysiwyg: true
label: Guitar for sale
fields:
guitar_for_sale_photo:
type: files
label: Photo
guitar_for_sale_description:
type: text
label: Description
guitar_for_sale_price:
type: text
label: Price
And this is my guitar.php snippet
<div class="guitar-for-sale">
<?php if($image = $block->guitar_for_sale_photo()->toFile()): ?>
<img src="<?= $image->url() ?>" alt="">
<?php endif ?>
<p><?= $block->guitar_for_sale_description() ?><br>
<?= $block->guitar_for_sale_price() ?></p>
</div>
@VIPStephan Pretty sure people have already created such blocks, but I don’t really think they are usually available as ready-to-use plugins. I guess you are familiar with our little block collection which should help you set up such a block including panel preview: Custom block type from scratch | Kirby CMS
I found the written docs on creating a custom block very complicated Custom block type from scratch | Kirby CMS. But the video fairly straight-forward https://www.youtube.com/watch?v=XbFoF92ZoyY
I’m unsure why there appears to be a difference between the two? Are the written docs for Kirby 3 and the video has been updated for Kirby 4, and custom blocks are easier to build in Kirby 4?
No, the difference is that the video uses a very simple block without a visual Panel preview, while the custom block type from scratch is a detailed example of a much more complicated block with API requests.
The examples here are more simple: More block examples | Kirby CMS
I don’t understand. The custom block shown in the video appears in the Panel and can be used by an editor in the Panel.
Yes, that’s not what I’m saying. But the video promises a follow up with visual editable preview.
But Kirby 4 added the preview: fields property, which wasn’t available in Kirby 3, so that allows you to directly edit inline without having to open the drawer, which makes things easier if you don’t need visual previews.
But all built-in custom blocks use Vue components (image | Kirby CMS) to create a preview, and that’s what is explained in the guide.
And again, @VIPStephan was asking for a ready-to-use block plugin with such a Vue-component preview.
Plus: what is shown in the video works fine with a single custom block that you add directly into the blocks field definition. It becomes a mess once you have many complicated block types, then you want to move them into their own files or into a plugin.
Okay, I get it. There are two types of custom blocks.
A simple one that can be used in the Panel.
And another type that can be used in the Panel and there is a visual preview in the Panel.