Centring images in the Panel preview

Kirby 4 Question❓
1

I’ve created a couple of plugins to add ‘text-center’ and ‘text-right’ marks/buttons to the writer field in a text block. Because of the structure of the plugins’ JS files, I’ve been able to apply the text alignment in both the front-end and in the Panel preview.

image
image693×154 20.7 KB

I also want to be able to apply alignment to images/figures in the image block that also applies in the Panel preview.

I’ve added an alignment toggles field to a custom image blueprint.

alignment:
  type: toggles
  width: 1/2
  labels: false
  grow: false
  options:
    - value: center
      icon: text-center
    - value: right
      icon: text-right

image
image2344×695 115 KB

It works in the front-end with a custom image snippet that uses an if/elseif/else statement to add auto margin (via Tailwind classes) to the relevant sides.

image
image955×227 31.7 KB

But how do I insert styles into the Panel content, that I can then target in panel.css, based on the toggles field selection?

  • Is there somewhere else I need to extend the image block?
  • Do I need to create another plugin and, if so, is there a template?

I found instructions for extending the writer field but I can’t find anything that answers my image block question.

Thanks.

2

Each block consists of a

  • block snippet
  • block yaml
  • block preview

Defaults for each block type, e.g. image: image | Kirby CMS, see link to vue file at bottom

So yes, you also need to overwrite the preview to apply your styles.

See also: Page builder | Kirby CMS, in particular the two chapters about custom blocks.

3

Oh dear! Vue is not my area of expertise at all. :worried:

I’m guessing I need to add some parseDOM/toDOM info inside the <script> tags to grab the custom blueprint field value and inject it into the preview? I’ll try to figure it out but I think this one might be beyond me.

A couple of other questions…

  • For the Vue component, that page gives just the link rather than overwrite instructions. Does that mean that the default Vue file needs to be edited (rather than placing a replacement somewhere else)?
  • If so, where can I find it? The file location is different in the link and on GitHub but I don’t have either location in my Kirby 4 file structure.

Thanks, Sonja.

4

Oh no! Never ever edit anything in the source code! To overwrite this, you need to create a plugin.

No? The original file is where the link says it is: kirby/panel/src/components/Forms/Blocks/Types/Image.vue at main · getkirby/kirby · GitHub

You can use that as basis for your own.

Nor mine, but when you read the documentation carefully, I’m pretty sure you can figure it out. The blocks collection examples are a very good starting point.

5

Thanks.

That’s what I thought!

Sorry, what I meant here is that there isn’t a corresponding location in my project. I wasn’t sure where to put an overriding Vue file, But it’ll be in the plugin folder, so you’ve answered that.

I’ll give it a try.

6

Sorry, @texnixe, one last question…

I already have blueprint and snippet files that I’d created as overrides. But if I move those files to the plugin folder, and use the index.js file to control the preview…

image

…will Kirby automatically pick up the plugin as an override for the native image block? The same way it did when the override files were in the /blueprints/blocks and /snippets/blocks folders?

7

If you register them in the plugin’s index.php, then yes, just putting them there won’t do anything.

8

That’s done by the Kirby::plugin() method, yes?

I think my index.php file should work…

<?php

Kirby::plugin('brandsistency/image-block', [
	'blueprints' => [
		'blocks/image' => __DIR__ . '/blueprints/blocks/image.yml'
	],
	'snippets' => [
		'blocks/image' => __DIR__ . '/snippets/blocks/image.php'
	]
]);
9

Right!