Creating a custom image Kirbytag with a CSS class applied

Kirby 3 Questions 🤔
1

I want to create a new KirbyTag, called image-right, that mimics the built-in image tag with one exception. And that is to add a class of right to the generated figure tag. In other words I want (image-right: test.jpg) to behave exactly as if I typed (image: test.jpg class: right) using the built-in image tag. I am pretty sure the answer lies in the documentation here, but I had a hard time following it (and I am horrible with regex). Any help would be greatly appreciated.

Thanks,

Keith

2

Im not sure i understand the question. Whats wrong with the built in way? I cant see why you want to re-invent it for the same result?

A quick way of doing this, and a more versatile way if you find yourself wanting random tags for things like is to make a tag that loads a snippet. On a basic level…

<?php

return [
  'attr' => [
    'snippet'
  ],
  'html' => function($tag) {
  	$snipfile = $tag->attr('snippet');

  	return snippet($snipfile);
  }
];

Then you can use like:

(snippet: yoursnippet)

You can build on this to add attributes as desired and pass them through to the snippet:

<?php

return [
  'attr' => [
    'snippet',
    'image' // test.jpg
  ],
  'html' => function($tag) {
  	$snipfile = $tag->attr('snippet');

  	return snippet($snipfile, ['file' = $tag->attr('image')]);
  }
];

Use like:

(snippet: yoursnippet image: test.jpg)

That way you can put whatever custom code you want in a regular snippet without having to get fancy with a complex custom tag. You’ll have to build it up though if you also want things like width and height etc, but those are just extra attributes really.

If you set the name up as image-left when you set the tag up, and hard code the snippet name, you can still call it like you wanted in a text area with (image-left: test.jpg)

3

This recipe should be helpful, because you can actually reuse a lot of the original tag and only replace what is necessary.

Keep in mind that using the original tag is supported in the Panel using drag and drop or the insert functions in a textarea field, so adding a class to the original tag is probably easier then remembering a new tag (but that’s just my 2c).

4

I agree this might seem like a kludgy thing to do, but I’ll provide some context. I’m building a site using Bootstrap CSS. I created a modified image tag, invoked using (image-wide: test.jpg). Here is that KirbyText, which wraps the built-in image tag around some closing and opening divs to make the image expand outside the parent column in Bootstrap.

<?php

Kirby::plugin('knipling/image-wide', [
    'tags' => [
        'image-wide' => [

            'attr' => Kirby\Text\KirbyTag::$types['image']['attr'],

            'html' => function($tag) {

                $id = $tag->parent()->id();
                $groups = 'events';

                $image =  Kirby\Text\KirbyTag::$types['image']['html'];
                $markup = $image($tag);

                $html = '';

                if (strpos($id, $groups) !== false) {

                    $html .= '</div></div><div class="row"><div class="col-lg-10 offset-lg-2">';

                } else{

                    $html .= '</div></div><div class="row"><div class="col-lg-10 offset-lg-1">';
                };

                $html .= $markup;

                if (strpos($id, $groups) !== false) {

                    $html .=  '</div></div><div class="row"><div class="col-md-4 inner-right-sm"></div><div class="col-md-8 inner-left-sm">';

                } else{

                    $html .= '</div></div><div class="row"><div class="col-lg-8 col-md-9 mx-auto">';

                };

                return $html;
            }
        ]
    ]
]);

I also have another (image-full: test.jpg) tag that is similar, but extends the image out to the full with of the container.

I similarly have (table: ), (table-wide: ), and (table-full: ) that insert tables based on structure fields in the content.

(None of this is important and is just for context.)

From a user’s perspective, I want to keep things consistent, and have (image-left: test.jpg) and (image-right: test.jpg) tags that only insert a class into the generated figure tag, equivalent to (image: test.jpg class: right). Again, why?

  1. It is more consistent for the user based on other tags I am using
  2. If I change the class name in the CSS, changing one KirbyTag will be a little easier than doing a find/replace through all the content files.

Thanks for the link @texnixe. As I said in my initial post, I was pretty sure the answer was on that page, but I’ve poked at it a bit and cannot get it to work (I am admittedly horrible at regex). Inserting HTML before/after the generated tag is easy (that’s what the code example above does). But I can’t get inserting a class into the generated tag to work.

Thanks,

Keith