How to modify kirbytext image tag to wrap it inside a picture tag, add srcset, media, etc.?

Kirby 3
1

Hi,

I’d like to be able to use tags in a content text file so that I could add images the way that is needed nowadays, meaning it would be possible to offer different images for different screen sizes, etc.

I found this thread and tried to use the offered solution, but for some reason I can’t get it to work:

I just added that code into a single index.php file inside a folder in the plugins folder. Would that need something else besides that? (Now a simple test image tag I added to a text file won’t produce anything.)

Or are there any plugins that have already solved this thing? I haven’t found anything so far.

Ideally I’d like the tag to allow me to produce the kinds of things presented for example in this article:

2

The general procedure of overwriting a default Kirbytag is described here: KirbyTags | Kirby CMS

Yes, the tags needs to be created in /site/plugins/plugin-folder-name/index.php.

3

Thanks for your phenomenally quick reply!

I just wonder why the code presented in the thread I quoted won’t work. Clearly it is recognized, because if on the first lines I change

Kirby::plugin('your/plugin', [
    'tags' => [
        'image' => [

the ‘image’ to anything else (I mean, like ‘pizza’ or whatever), it is neglected and my test image from my test text file appears again, thanks to the regular kirbytext tag. But, like I said, if I use this code, there will be no image at all (though the rest of the page appears normally).

4

The img tag in the example you posted above doesn’t have a src or srcset attribute, but only a data-srcset attribute. For this to work, you would therefore need a lazy-loading library.

Another issue is that the srcset() function either needs some arguments, or a default srcset set in your config: