Extend kirby editor image block

Kirby 3 Questions 🤔
1

I’m looking to extend the settings for the image block in the Kirby editor. The default image block has a modal with some options (alt text, link, css class). I’d like to add additional options like display size, and caption position.

What is the best way to do this? Create a new block that extends the image block functionality? Here is what a first attempt in that direction:

// site/plugins/image-layout-block/index.js

editor.block("image-layout", {
  extends: "image",
  label: "image-layout",
  icon: "dashboard",
  computed: {
    fields() {
      return {
        alt: {
          label: this.$t('editor.blocks.image.alt.label'),
          type: "text",
          icon: "text"
        },
        imagesize: {
          label: 'Image Size',
          type: "select",
          icon: "dashboard",
          options: [
            { value: "4", text: "Small" },
            { value: "8", text: "Medium" },
            { value: "12", text: "Large" },
          ]
        }
      };
    }
  }
});

// site/plugins/image-layout-block/index.php

<?php
Kirby::plugin('yourname/custom-block', [
  'snippets' => [
    'editor/image-layout' => __DIR__ . '/snippets/image-layout.php'
  ]
]);
2

Hello Max,

I’m looking for the answer to this. Have you found the solution? Let me know.

Thanks.

3

Hey @julienmillies, the code i was testing above works well. It seems to be the best way to add additional fields to the editor image block. All the files for the custom block live in a plugin folder. The documentation for making a block extension is here: https://github.com/getkirby/editor/wiki/Block-extensions

In addition to the documentation, these two files are key to setting up additional fields:

site/plugins/image-layout-block/index.js
// js file that registers your vue component, it should extend the default image block,
// and add your custom fields

site/plugins/image-layout-block/snippets/image-layout.php
// the front end template to generate the custom html for this block,
// the template has access to the custom fields via $attrs->yourfieldname()->value()
4

I want to extend the image block by fields like image-size and image-alignment. I’ve tried the solution above but it doesn’t work.
I created an image-layout-block folder in site/plugins and created this files:
Bildschirmfoto 2020-09-27 um 17.17.13

    //index.js
editor.block("image-layout", {
      extends: "image",
      label: "Bild mit Einstellungen",
      icon: "dashboard",
      computed: {
        fields() {
          return {
            alt: {
              label: this.$t('editor.blocks.image.alt.label'),
              type: "text",
              icon: "text"
            },
            imagesize: {
              label: 'Image Size',
              type: "select",
              icon: "dashboard",
              options: [
                { value: "4", text: "Small" },
                { value: "8", text: "Medium" },
                { value: "12", text: "Large" },
              ]
            }
          };
        }
      }
    });

// index.php
<?php
Kirby::plugin('yourname/custom-block', [
    'snippets' => [
        'editor/image-layout' => __DIR__ . '/snippets/image-layout.php'
    ]
]);

// snippets/image-layout.php
<?php if ($block->isNotEmpty()): ?>
    <figure<?= attr(['class' => $attrs->css()->value()], ' ') ?>>
        <?php if ($attrs->link()->isNotEmpty()): ?>
            <a href="<?= $attrs->link()->toUrl() ?>">
                <img src="<?= $src ?>" alt="<?= $attrs->alt() ?>" class="img-fluid <?= $attrs->imagesize()->value() ?>">
            </a>
        <?php else: ?>
            <img src="<?= $src ?>" alt="<?= $attrs->alt() ?>" class="img-fluid">
        <?php endif ?>

        <?php if ($attrs->caption()->isNotEmpty()): ?>
            <figcaption>
                <?= $attrs->caption() ?>
            </figcaption>
        <?php endif ?>
    </figure>
<?php endif ?>

The block is displayed in the panel and I can upload an image. But it does not render the image. When I delete the check if the block is empty I get the error that $src is not defined.

I hope you can help me. I’m also open for other solutions.

Thank you very much!

5

You need to define $src in your snippets/image-layout.php file. I solved that with something like this:

<?php $src = $block->parent()->file($attrs->filename()->value()); ?>

However I found that extending the Kirby editor was getting messy with too many files to keep track of, so I’m going to switch to using the Kirby Builder plugin instead.