# Implementing custom tags

**URL:** https://forum.getkirby.com/t/implementing-custom-tags/28658
**Category:** Questions
**Tags:** v3
**Created:** [May 26, 2023, 10:10am UTC](https://forum.getkirby.com/t/implementing-custom-tags/28658 "2023-05-26T10:10:27Z")
**Posts on this page:** 8
**Page:** 1

<div class="post-metadata">

### Author: ![Hicksdesign](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/hicksdesign/32/9330_2.png) [@Hicksdesign](https://forum.getkirby.com/u/Hicksdesign)
#### Post date: [May 26, 2023, 10:10am UTC](https://forum.getkirby.com/t/implementing-custom-tags/28658/1 "2023-05-26T10:10:27Z")

</div>

I’m wanting to expand the output of the image kirbytag, and this is exactly what I’m after: [Reusing KirbyTags | Kirby CMS](https://getkirby.com/docs/cookbook/extensions/extending-kirbytags). However, I’m just trying to get my head around how to implement this.

So far, I’ve placed this code in `/site/plugins/custom-tags/index.php` and changed the tag name to just ‘image’ so that it replaces the original custom tag.

In my templates, the content is being output with:

` <?= $page->text()->kt() ?>`

What am I missing? Do I need to change the `'your/plugin'` path? Or rename the plugin folder? Thanks in advance!

---

<div class="post-metadata">

### Author: ![jimbobrjames](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/jimbobrjames/32/5802_2.png) [@jimbobrjames](https://forum.getkirby.com/u/jimbobrjames)
#### Post date: [May 26, 2023, 10:31am UTC](https://forum.getkirby.com/t/implementing-custom-tags/28658/2 "2023-05-26T10:31:37Z")

</div>

> [@Hicksdesign](#):
>
> Do I need to change the `'your/plugin'` path?

Thats not actually a path, its an identifier for the plugin. I could be wrong I think if you already have a plugin installed called ‘your/plugin’, the first one kirby loads takes precedence. Try change it to something like `hicksdesign/customtags`.

please also post the contents of `/site/plugins/custom-tags/index.php` incase theres something a miss in there.

---

<div class="post-metadata">

### Author: ![Hicksdesign](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/hicksdesign/32/9330_2.png) [@Hicksdesign](https://forum.getkirby.com/u/Hicksdesign)
#### Post date: [May 26, 2023, 11:44am UTC](https://forum.getkirby.com/t/implementing-custom-tags/28658/3 "2023-05-26T11:44:33Z")

</div>

Thanks James! The contents of that file are now:

```auto
<?php

$originalTag = Kirby\Text\KirbyTag::$types['image'];
Kirby::plugin('hicksdesign/customtags', [
		'tags' => [
				'image' => [
						'attr' => array_merge(
								$originalTag['attr'],
								[
										'srcset'
								]),

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

								$file = $tag->file($tag->value());
								$srcset = $tag->srcset ? explode(',', $tag->srcset): null;
								$result = $originalTag['html']($tag);

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

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

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

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

								return $result;
						}
				]
		]
]);

```

---

<div class="post-metadata">

### Author: ![jimbobrjames](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/jimbobrjames/32/5802_2.png) [@jimbobrjames](https://forum.getkirby.com/u/jimbobrjames)
#### Post date: [May 26, 2023, 12:00pm UTC](https://forum.getkirby.com/t/implementing-custom-tags/28658/4 "2023-05-26T12:00:03Z")

</div>

I just set that up using your code above in a basic project and it works fine when i do this in the text area:

```auto
(image: 3sbk0w5f9o.jpg srcset: 300, 800, 1024)

```

---

<div class="post-metadata">

### Author: ![Hicksdesign](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/hicksdesign/32/9330_2.png) [@Hicksdesign](https://forum.getkirby.com/u/Hicksdesign)
#### Post date: [May 26, 2023, 12:19pm UTC](https://forum.getkirby.com/t/implementing-custom-tags/28658/5 "2023-05-26T12:19:28Z")

</div>

Thanks, it does! I think my issue is then with what the custom tag does - I was looking to output the images’ height and width as well as the src and alt attributes. I guess with this snippet the width and height are entered as values via the tag, rather than taken from the image itself.

For instance, if I’m handling the image in the template, I can do this to output the dimensions:

```auto
<?php if($image = $page->mainimage()->toFile()): ?>
   <img src="<?= $image->url() ?>" width="<?= $image->width() ?>" height="<?= $image->height() ?>" alt="<?= $image->alt() ?>">
<?php endif ?>

```

---

<div class="post-metadata">

### Author: ![jimbobrjames](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/jimbobrjames/32/5802_2.png) [@jimbobrjames](https://forum.getkirby.com/u/jimbobrjames)
#### Post date: [May 26, 2023, 12:26pm UTC](https://forum.getkirby.com/t/implementing-custom-tags/28658/6 "2023-05-26T12:26:02Z")

</div>

OK, If you tweak the custom tag so that the part that makes image tag looks like this:

```php
$image = Html::img($tag->src, [
    'width' => $tag->width ?? $file->width(),
    'height' => $tag->height ?? $file->height(),
    'class' => $tag->imgclass,
    'title' => $tag->title,
    'alt' => $tag->alt ?? $file->alt(),
    'srcset' => $file->srcset($srcset),
    'decoding' => 'async',
]);

```

That will cause it to use the images physical width and height if you dont supply those values on the kirby tag in the textarea.

edit: just noticed you want the alt as well, you can do the same thing there too. ☝

---

<div class="post-metadata">

### Author: ![Hicksdesign](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/hicksdesign/32/9330_2.png) [@Hicksdesign](https://forum.getkirby.com/u/Hicksdesign)
#### Post date: [May 26, 2023, 12:46pm UTC](https://forum.getkirby.com/t/implementing-custom-tags/28658/7 "2023-05-26T12:46:58Z")

</div>

Many thanks for all your help James! After implementing your code changes I found it only worked if I included the srcset attribute in the kirby tag, so I removed the $srcset portion (it was the dimensions I was after), and I’m sorted!

Do you have a ‘donate a coffee’ link at all\>

---

<div class="post-metadata">

### Author: ![jimbobrjames](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/jimbobrjames/32/5802_2.png) [@jimbobrjames](https://forum.getkirby.com/u/jimbobrjames)
#### Post date: [May 26, 2023, 12:50pm UTC](https://forum.getkirby.com/t/implementing-custom-tags/28658/8 "2023-05-26T12:50:26Z")

</div>

Awesome 🙂 my pleasure. Very kind… [PayPal](https://www.paypal.com/paypalme/hashandsalt?locale.x=en_GB)
