Adding a KirbyTag attribute for Image captions

The CMS Questions
1

Hi — I’m comfortable with Kirby but I have never tried to alter anything like a KirbyTag. My question is to gain clarity on the (image: …) tag.

Is there a reason that there is no attribute for adding a class to the figcaption element?

I make good use of “class:” and “imgclass:” for a CSS Grid layout. I assume I can add my own “figclass:” attribute as well? Would I do this by altering the tags.php file in config?

It would be great if this was included by default. But I’m open to learning! That’s what Kirby’s all about, right? :slight_smile:

Thank you.

2

No, never touch the source code, any changes in there will be overwritten.

Our docs have documentation how to override a default kirbytag: KirbyTags | Kirby CMS

Examples in our getkirby.com repo: getkirby.com/site/plugins/site/extensions/tags.php at main · getkirby/getkirby.com · GitHub (note that the syntax is a bit different there, because the file is included from another file).

3

Thanks for pointing back to that document. I’d read all these various documents and even your replies here in the forum. But I wasn’t sure where to start. I (we all!) appreciate your patience with duplicative questions.

Tailoring a plugin is new territory for me, but I’ll work at it.

5

Is it true that overriding a default KirbyTag means you have to rebuild it entirely?

After more reading, I ended up at the Reusing KirbyTags page. Merging with the existing Image tag seems more appropriate—I only want to add a new attribute.

Writing a Plugin is way beyond my skills but after a lot of trail and error, I have it working. This PHP may not be elegant, but it appears to replace the figcaption element and add in mine, with the new “capclass” (applies a class to <figcaption>).

<?php

$originalTag = Kirby\Text\KirbyTag::$types['image'];
Kirby::plugin('image-extend/index', [
	'tags' => [
		'image' => [
			'attr' => array_merge(
				$originalTag['attr'],
				[
					'capclass'
				]),
			'html' => function($tag) use ($originalTag) {
				
				$str = $originalTag['html']($tag);	
				
				$pattern = '/<figcaption.*?>.*?<\/figcaption>/i';
				
				$figcaption = Html::figcaption($tag->caption, [
					'class' => $tag->capclass
				]);
				
				$result = preg_replace($pattern, $figcaption, $str);
				
				return $result;
			}
		]
	]
]);