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.
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)
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).
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.
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?
It is more consistent for the user based on other tags I am using
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.