Float image block in editor

Kirby 3
1

Hi!

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.

Thank you!

Related discussions:

2

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?

3

Yeah, I mean float like in CSS, something like:

image

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. float: left):

image

Which is the standard Kirby approach for this? :frowning:

4

I’d use a layout field for this purpose, where the image would go into one column, the text into the other.

1 Like
5

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. :thinking:

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?

Thanks!

6

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.

1 Like
7

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. :slight_smile: