Editor: Extend Image

Kirby 3 Solved ✅
1

Hey everyone!

I’ve started using the new editor and would like to extend the image class to have a second type of image to which I can add another class. It already shows up in the editor itself but the block doesn’t appear on the actual website. Could you please help me figure out what’s wrong?

index.php:

        Kirby::plugin('smiddyburbon/onecolumn-image-block', [
        'snippets' => [
            'editor/onecolumn-image' => __DIR__ . '/snippets/onecolumn-image.php'
        ]
    ]);

onecolumn-image.php (copied from snippets/image.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() ?>">
          </a>
          <?php else: ?>
          <img src="<?= $src ?>" alt="<?= $attrs->alt() ?>">
          <?php endif ?>

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

index.js:

        editor.block("onecolumn-image", {
      extends: "image",

      // will appear as title in the blocks dropdown
      label: "OneColumn Image",

      // icon for the blocks dropdown
      icon: "image",
    });

Best,
Dennis

2

Maybe I’m missing something, but I don’t quite see the point since you can add an individual class to each image anyway?

I know this doesn’t answer your question…

3

How do I do that? That would also be a viable solution actually :face_with_monocle:

Nevermind, found it! :exploding_head:

Follow-up question: Is there a way I could also add classes to paragraphs?

4

No, that’s not possible out of the box.

5

Sorry to reopen this topic but I had the same issue. I want different blocks so editors don’t have to insert css classes.

I’m not sure if it’s a bug or not, but the problem came from this in the snippet.

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

Checking if block is NOT empty returns true. If I remove this check, the snippet works as intended.