Add Lightbox to KirbyText Image Tag

The CMS Questions
1

I’m looking to add a lightbox to the KirbyText Image Tag, the way that Images in Block Layouts have them added.

I was reviewing the following custom tag tutorial but the final part of replacing the HTML lost me and I’m unsure how to even debug or test.

https://getkirby.com/docs/cookbook/extensions/extending-kirbytags

Can anyone point me in the right direction of making this possible?

1 Like
2

You don’t have to use the original tag but can simply overwrite it. Refer to the source code for guidance:

3

Thanks! I’d actually pulled up the tags.php code as you recommended it and it was helpful to see what was available.

This is what I ended up doing if anyone needs it. It requires that the lightbox Kirby comes with be installed.

<?php

$originalTag = Kirby\Text\KirbyTag::$types['image'];
Kirby::plugin('your/plugin', [
    'tags' => [
        'image' => [
            'attr' => array_merge(
                $originalTag['attr'],
                [
                    'data-lightbox',
                ]),

            'html' => function($tag) use ($originalTag)  {

                $file = $tag->file($tag->value());
                $result = $originalTag['html']($tag);

                if (! $file === true) {
                    return $result;
                }

                $pattern = '/<img.*?>/i';

                // build a new image tag with the srcset
                $image = Html::a($tag->src(), [
                    Html::img($tag->src, [
                    'width'  => $tag->width,
                    'height' => $tag->height,
                    'class'  => $tag->imgclass,
                    'title'  => $tag->title,
                    'alt'    => $tag->alt ?? ' '
                ]) ], [
                    'data-lightbox' => $tag->src()
                ]);

                // replace the old image tag
                $result = preg_replace($pattern, $image , $result);

                return $result;
            }
        ]
    ]
]);
1 Like
4

It took me an embarrassingly long time to figure this out even after reading the thread. :see_no_evil: So I’ll share my lessons to potentially save others time.

If you started with PlainKit, you will NOT have lightbox included. Here’s how to add it:

  1. Copy the following files from StarterKit:
  • /assets/css/lightbox.css
  • /assets/js/lightbox.js files
  • /assets/index.js file
  1. Update /site/snippets/header.php to reference lightbox.css.
  2. Update /site/snippets/footer.php to reference lightbox.js & index.js
    (note: the JS will not work if placed in the header snippet).

From this point on, any <a> tag with the “data-lightbox” label that wraps an <img> will trigger lightbox. Now the trick is how to add the label to the HTML created by the KirbyText Image tag.

This is where a custom plugin comes into play:

  • Create a /site/plugins/custom-tags/ folder.
  • Copy the code that Brighurst shared above.
  • Save the code in a new index.php file within the “custom-tags” folder.