Css for images in Blocks?

In the Editor plugin you could add custom css to images by typing classes into Images Settings (“Bildeinstellungen” in my görman version). That was a very important feature because it would empower users to have control over images on their site and prevent them from mess them up by just typing if it is a small, medium, big image. If it is with or without a shadow or rounded corners or or or.

Is there a way or a trick that I am not aware of, to add such classes to images in Kirbys new Blocks Editor?

I guess, you really want me to write a custom block type… ?

Yes; this sounds like a use case for extending core blocks?

I tried already. To reproduce the example in the docs, I made a folder in site/blueprints/blocks with a heading.yml in it and the same thing in site/snippets/blocks with a heading.php . That didn’t work. Gives me an internal server error:

The JSON response of the API could not be parsed:

Where am I to put the extension of the blueprint? It dosen’t say in the docs.

The extending takes place in the blueprint where you add the field, you don’t create a yaml file anywhere.

If you want to extend Blocks image field you can also do it this way:


And to be able to use your Image blueprint you must add something like this to your page blueprint

    type: blocks
       - heading
       - text
       - list
       - quote
       - markdown
       - code
       image: fieldsets/image

Best regards.

I tried putting it directly into the blueprint as well, but I got an error Gewitter. But - it was again my inability of correct indentation, that destroyed everything. I fail at indentation every single time. Is it true that in yml files one has to use spaces, not tabs?

Anyway: Now I have headings with IDs - why not?

Bildschirmfoto 2020-12-28 um 02.28.20


            label: Media
            type: group
                extends: blocks/image
                    label: Stil
                    type: text


<?php if ($image = $block->image()->toFile()): ?>
<figure<?= attr(['data-ratio' => $block->ratio(), 'data-crop' => $block->crop()->isTrue()], ' ') ?>>
  <?php if ($block->link()->isNotEmpty()): ?>
  <a href="<?= $block->link()->toUrl() ?>">
    <img class="<?= $block->stil() ?>" src="<?= $image->url() ?>" alt="<?= $block->alt()->or($image->alt()) ?>">
  <?php else: ?>
  <img class="<?= $block->stil() ?>" src="<?= $image->url() ?>" alt="<?= $block->alt()->or($image->alt()) ?>">
  <?php endif ?>

  <?php if ($block->caption()->isNotEmpty()): ?>
    <?= $block->caption() ?>
  <?php endif ?>
<?php endif ?>

Easy peasy.

PS: Can’t belief I made it in 5 minutes. Now I am ready for christmas.
PPS: Thank yous!

I am gonna make one for the missing hr element. My users really need that and it is missing in the blocks editor.

Yes, spaces, no tabs.

Edit: If you use a good code editor, you can set that it inserts spaces and how many if you press the tab key.

1 Like

I still use Sublime text and had set it to 4 but it does just 2.

Two spaces is perfect per indentation level.

…and a <hr> block in the fieldset of global blocks:

blueprint in site->blueprints->blocks:

name: line
icon: my-line
label: Horizontale Linie
    type: line

index.php in site->plugins->icons:


Kirby::plugin('my/icons', [
    'icons' => [    

index.js in site->plugins->icons

panel.plugin('my/icons', {
  icons: {
    'my-line': '<rect x="1" y="6" width="15" height="2"/>'

snippet in site->snippets:

<hr <?= $block->horizontalRuler() ?> >

Bingo bango.

I have a similar issue, and I managed to get as far as Ndugu has: CSS class to be entered through a text field. (Thanks for the explanation, everyone!)

What I would prefer though, is the possibility to limit the possible classes to a certain number accessible through a select menu.

    label: CSS
    type: select
      	one: class_one
      	two: class_two
      	three: class_three

Leads me to

Illegal offset type in isset or empty

I have a feeling I might be missing something. Do you have any ideas what it might be?
Many thanks for your help!

Your options should be on the same indent level as type.

1 Like

I tried the select as well, decided against it but don’t remember why. Maybe it was because of commas in the classes in the html. Please share your experience/ solution.

Thanks a lot! That helped. The indentation logic still escapes me sometimes, but I am getting there someday. :slight_smile:

My solution works like this:
I have three image orientations: floated left, floated right and full width.
In /site/blueprints/fieldsets/image.yml

    label: Ausrichtung
    type: select
  	  links: links
  	  rechts: rechts
  	  full__width: volle Breite

In /site/snippets/blocks/image.php

<?php if ($image = $block->image()->toFile()) { ?>
<figure class="<?= $block->stil() ?>"<?= attr(['data-ratio' => $block->ratio(), 'data-crop' => $block->crop()->isTrue()], ' ') ?>>
	<?php if ($block->link()->isNotEmpty()) { ?>
		<img src="<?= $image->url() ?>" alt="<?= $block->alt()->or($image->alt()) ?>">
	<?php if ($block->caption()->isNotEmpty()) { ?>
		<?= $block->caption() ?>
	<?php } ?>
<?php } ?>

Switching from the text based solution I adopted as a workaround to the select-based solution worked instantly, because the names of the classes was identical. I found the select fields already correctly selected. :slight_smile:

Where did you come across commas? I simply insert the key in the options (the part before the colon) as the name of my class, and it works beautifully.

Same here (sigh)

I wanted to be able to add several utility like classes and therefore I decided against the select. Then I tried the multiselect but that adds commas into the selector in the html. Anyway, my users don’t use one or the other… ;(

Maybe next time users do ¯_(ツ)_/¯

That doesn’t matter, you can either replace the commas with a space using str_replace(), or you create an array from the values then implode:

// create array from comma separated values
$classArray = $page->multiselectfield()->split(',');
// join array elements with string
$classes = implode(' ', $classArray);
echo $classes;

Finally getting some idea of PHP here. Thank you! Gonna try that!