# No srcset output using custom KirbyTag

**URL:** <https://forum.getkirby.com/t/no-srcset-output-using-custom-kirbytag/29645>\
**Category:** Questions\
**Tags:** v3\
**Created:** [October 3, 2023, 12:55am UTC](https://forum.getkirby.com/t/no-srcset-output-using-custom-kirbytag/29645 "2023-10-03T00:55:06Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![colinjohnston](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/colinjohnston/32/4176_2.png) [@colinjohnston](https://forum.getkirby.com/u/colinjohnston)\
**Post date:** [October 3, 2023, 12:55am UTC](https://forum.getkirby.com/t/no-srcset-output-using-custom-kirbytag/29645/1 "2023-10-03T00:55:06Z")

</div>

Hello–

I’m coming back to an old project that briefly used the example plugin solution shown below for generating `srcset` markup.

This was an updated version of [Reusing KirbyTags | Kirby CMS](https://getkirby.com/docs/cookbook/extensions/extending-kirbytags) found here [Accessing new srcset via Kirbytext - #9 by colinjohnston](https://forum.getkirby.com/t/accessing-new-srcset-via-kirbytext/14994/9)

```auto
<?php

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

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

                $file = $tag->file($tag->value());

                // gets srcset array from config
                $presets = option('thumbs.srcsets.default');

                // sets srcset as kirbytag array with fallback to config array
                $srcset = $tag->srcset ? explode(',', $tag->srcset): $presets;
                
                // casts kirbytext array strings to ints
                $srcset = array_map(function($item) {
                    return (int) $item;
                }, $srcset);

                $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),
            ]);

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

            return $result;
            }
        ]
    ]
]);

```

(I had replaced this ultimately with Bruno Meilick’s **kirby3-srcset** plugin, but that no longer works for me with later versions of PHP and Kirby, so I’m looking for a simple replacement that just does the `srcset` output.)

I was hoping to use the above solution in the updated installation of the old project, now on Kirby 3.8.4.1 on PHP 8.1.

**Issue**

I’m not getting any `srcset` output at all.

The output works fine otherwise—it’s exactly the same as it was prior to setting up the plugin (`img` output here in context of surrounding HTML):

```auto
<figure>
   <a class="hb-single" href="http://colinjohnston.local/media/pages/projects/rollbar-account-dashboard/86f1c79bab-1616036170/rollbar-items-view-old.png">
      <img alt="Original Rollbar Items View" src="http://colinjohnston.local/media/pages/projects/rollbar-account-dashboard/86f1c79bab-1616036170/rollbar-items-view-old.png">
   </a>
   <figcaption>
      <strong>Before – repetitive overload:</strong> The Item View is rich in project data. But having to wade through many individual screens to find an issue is difficult.
   </figcaption>
</figure>

```

To test that the plugin itself is working, I added a test tag to the new image tag output, and it comes through.

If I try and add `srcset: 300, 600, 900, 1200` to my KirbyTag entry, it comes out as (`img` output here in context of surrounding HTML):

```auto
<figure>
   <a class="hb-single" href="http://colinjohnston.local/media/pages/projects/rollbar-account-dashboard/86f1c79bab-1616036170/rollbar-items-view-old.png">
      <img alt="Original Rollbar Items View" src="http://colinjohnston.local/media/pages/projects/rollbar-account-dashboard/86f1c79bab-1616036170/rollbar-items-view-old.png" srcset="300, 600, 900, 1200">
   </a>
   <figcaption>
      <strong>Before – repetitive overload:</strong> The Item View is rich in project data. But having to wade through many individual screens to find an issue is difficult.
   </figcaption>
</figure>

```

I’m probably missing something _terribly_ obvious; it’s been a long time since I’ve worked with Kirby and `srcset`.

Any ideas how to test, fix, or improve?

---

<div class="post-metadata">

**Author:** ![texnixe](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/texnixe/32/5754_2.png) [@texnixe](https://forum.getkirby.com/u/texnixe)\
**Post date:** [October 3, 2023, 8:49am UTC](https://forum.getkirby.com/t/no-srcset-output-using-custom-kirbytag/29645/2 "2023-10-03T08:49:20Z")

</div>

Hm, I copied your code into a plugin and added an image kirbytags to a page in the Starterkit

```auto
(image: table.jpg srcset: 200,300,400)

```

with the following result:

```auto
<figure><img alt="A very clean white room with a small table and a chair in front of it. It's very minimalistic." src="http://396.test/media/pages/about/ba75a04510-1690801499/table.jpg" srcset="http://396.test/media/pages/about/ba75a04510-1690801499/table-200x.jpg 200w, http://396.test/media/pages/about/ba75a04510-1690801499/table-300x.jpg 300w, http://396.test/media/pages/about/ba75a04510-1690801499/table-400x.jpg 400w"></figure>

```

But with a preset in config, I also get a srcset, but the result is wrong, because of the array\_map part, which should only apply to the exploded `$tag->srcset` part:

```auto
$srcset = $tag->srcset ? array_map(fn($item) => (int) $item, explode(',', $tag->srcset)) : $presets;

```

---

<div class="post-metadata">

**Author:** ![colinjohnston](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/colinjohnston/32/4176_2.png) [@colinjohnston](https://forum.getkirby.com/u/colinjohnston)\
**Post date:** [October 11, 2023, 12:10am UTC](https://forum.getkirby.com/t/no-srcset-output-using-custom-kirbytag/29645/3 "2023-10-11T00:10:49Z")

</div>

Thanks for your reply, Sonja.

I updated that array code to match what you shared above, but it didn’t have any impact on issue.

I thought I’d try with fresh installs of starterkit to isolate versions 3.8.4 (my project’s current version) and 3.9.7.

I added a markdown block to the bottom of the About page on each, and inserted kirbytext to insert the Team image `(image: team.jpg)` in a half column layout section. I don’t see any srcset output on either starterkit.

Does the fact that no images at any other sizes are being generated have any connection to the issue? If so, are there specific Apache or PHP settings I need for the images to generate?

I’m mystified why this wouldn’t work, so I’m thinking something is off about my current environment perhaps. Maybe I’d benefit from early update to the 4.0 beta 🙂

---

<div class="post-metadata">

**Author:** ![texnixe](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/texnixe/32/5754_2.png) [@texnixe](https://forum.getkirby.com/u/texnixe)\
**Post date:** [October 11, 2023, 11:55am UTC](https://forum.getkirby.com/t/no-srcset-output-using-custom-kirbytag/29645/4 "2023-10-11T11:55:15Z")

</div>

For thumbs to be generated, you need either the gd library (default) or ImageMagick installed on the server.

However, the srcset **attribute** as such should nevertheless be present in the resulting html (emtpy or not).

As I wrote, I tested the code successfully.

In your test with just `(image: team.jpg)`, did you make sure to add srcset presets in your config?

---

<div class="post-metadata">

**Author:** ![colinjohnston](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/colinjohnston/32/4176_2.png) [@colinjohnston](https://forum.getkirby.com/u/colinjohnston)\
**Post date:** [October 11, 2023, 4:06pm UTC](https://forum.getkirby.com/t/no-srcset-output-using-custom-kirbytag/29645/5 "2023-10-11T16:06:23Z")

</div>

Thanks for your continued help, Sonja.

I am aware the code works for you—I’m just not able to get it to work, so I’m essentially trying to determine what might be different on my side that is causing it not to function like it does on yours. 🙂

For both tests in PHP 8.1.13 and 8.2 I have GD and IM enabled.

I have the following in my config.php:

```auto
...
'thumbs' => [
        'srcsets' => [
            'default' => [640, 768, 1024, 1280, 1920],
            'projects' => [640, 768, 1024, 1280, 1920],
            'cover' => [640, 768, 1024, 1280, 1920],
        ],
    ],
...

```

My use of srcset in templates successfully pulls in these options.

To recap my tests (Fresh starterkit v3.9.7; PHP 8.2; GD and IM enabled):

When I use just `(image: team.jpg)` the output is:

```auto
<figure><img alt="" src="http://kirby3-starter-397.local/media/pages/test/e3ac1ae2a4-1696983547/team.jpg"></figure>

```

(I didn’t add alt text to this test, so it’s intentionally empty here.)

When I use `(image: team.jpg srcset: 640, 768, 1024, 1280, 1920)` the output is:

```auto
<figure><img alt="" src="http://kirby3-starter-397.local/media/pages/test/e3ac1ae2a4-1696983547/team.jpg" srcset="640, 768, 1024, 1280, 1920"></figure>

```

No image appears in the latter example due to markup.

---

<div class="post-metadata">

**Author:** ![texnixe](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/texnixe/32/5754_2.png) [@texnixe](https://forum.getkirby.com/u/texnixe)\
**Post date:** [October 11, 2023, 4:08pm UTC](https://forum.getkirby.com/t/no-srcset-output-using-custom-kirbytag/29645/6 "2023-10-11T16:08:07Z")

</div>

Hm, can you put the project on GitHub for testing, please?

---

<div class="post-metadata">

**Author:** ![colinjohnston](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/colinjohnston/32/4176_2.png) [@colinjohnston](https://forum.getkirby.com/u/colinjohnston)\
**Post date:** [October 11, 2023, 4:23pm UTC](https://forum.getkirby.com/t/no-srcset-output-using-custom-kirbytag/29645/7 "2023-10-11T16:23:44Z")

</div>

> **[GitHub - colin-johnston/kirby3-starter-397: Kirby 3.9.7 Tests](https://github.com/colin-johnston/kirby3-starter-397)**
>
> Kirby 3.9.7 Tests. Contribute to colin-johnston/kirby3-starter-397 development by creating an account on GitHub.

---

<div class="post-metadata">

**Author:** ![texnixe](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/texnixe/32/5754_2.png) [@texnixe](https://forum.getkirby.com/u/texnixe)\
**Post date:** [October 11, 2023, 4:37pm UTC](https://forum.getkirby.com/t/no-srcset-output-using-custom-kirbytag/29645/8 "2023-10-11T16:37:55Z")

</div>

You changed the code again, now the error is in this line:

```auto
'srcset' => $tag->srcset($srcset),

```

This must read

```auto
'srcset' => $file->srcset($srcset),

```

---

<div class="post-metadata">

**Author:** ![colinjohnston](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/colinjohnston/32/4176_2.png) [@colinjohnston](https://forum.getkirby.com/u/colinjohnston)\
**Post date:** [October 11, 2023, 5:00pm UTC](https://forum.getkirby.com/t/no-srcset-output-using-custom-kirbytag/29645/9 "2023-10-11T17:00:47Z")

</div>

Well, there it is. Original code at the top of post is what _I thought I had started with_, but current code I shared clearly has `$tag` instead of `$file`, as you see. I have no idea what happened there, an obvious—and embarrassing—error. Thanks for the time helping me sort this out, it’s greatly appreciated.