I’ve looking around the documentation & the forums and I’m not sure if this possible. I want to be able to float the images (left/right) or leave the image in the center (no float, same behavior as the default Kirby image block). I understand that for this I need to create/extends a new block and add the extra option; is that correct?
Now, the real doubt, is it possible to also float the preview? I want it to be WYSIWYG as possible so that there aren’t surprises for the editor.
Not sure what you mean with float? Have them next to text or whatever, or just have a negative left or right margin with still only one image in the line?
Yeah, I mean float like in CSS, something like:
Inspecting the block editor DOM I don’t think this is possible on the preview (the image should be child of the text block?). Although I suppose I could have a block row with the image aligned left/right and then some “placeholder” text lines (just some grey rectangles), like so (e.g.
Which is the standard Kirby approach for this?
I’d use a layout field for this purpose, where the image would go into one column, the text into the other.
UX-wise I don’t think it’s a good solution; too much trouble for the user for such a simple use case. And I want to keep the experience/options constrained in a case of a blog post.
Also, I still would need somehow to express if the image is floated or it’s a column. And the user might add extra content below the image… which might be interesting to create asides; but probably it’s not what I want.
I understand, that the alternatives are:
- Add a custom block… but this won’t be WYSIWYG
- Use KirbyText? (which is not very user friendly)
- Use another field type e.g. the paid TinyMCE plugin?
A custom block with a text and an image field could do the job, additionally a selector to float left or right. Then create a preview for this custom block.
Thanks, I think I’ll either extend the image block to add the alignment option (even if it’s not WYSIWYG) or I’ll just embrace the limitations and just use the default image block.