No srcset output using custom KirbyTag

Kirby 3 Solved ✅
1

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 Quicktip: Reusing KirbyTags in custom tags | Kirby CMS found here Accessing new srcset via Kirbytext - #9 by colinjohnston

<?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):

<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):

<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?

2

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

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

with the following result:

<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:

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

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 :slight_smile:

4

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?

5

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. :slight_smile:

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:

...
'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:

<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:

<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.

6

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

1 Like
7
8

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

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

This must read

'srcset' => $file->srcset($srcset),
9

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.