I have followed these instructions to extend image:
but I cant figure out how to call it via Kirbytext. is it (image: image.jpg tag: Srcset)?
Guess you mean the second example. The example tag is called imageset, so you would add something like
(imageset: someimage.jpg srcset: 300, 600, 900, 1200)
in your text file.
When reusing parts of the tag, the name of the tag cannot be the same as the one you are reusing.
If you want to override the original tag, you have to modify the code a bit and define the old tag outside of the plugin wrapper:
<?php
$oldTag = Kirby\Text\KirbyTag::$types['image'];
Kirby::plugin('your/plugin', [
'tags' => [
'image' => [
'attr' => array_merge(
$oldTag['attr'],
[
'srcset'
]),
'html' => function($tag) use ($oldTag) {
$file = $tag->file($tag->value());
$srcset = $tag->srcset ? explode(',', $tag->srcset): null;
$result = $oldTag['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;
}
]
]
]);
With those changes, you can then use the standard image tag:
(image: someimage.jpg srcset: 300, 600, 900, 1200)
This is perfect Thanks!!!
One more question, is there a way to set a default to the sizes? I did that with thumbs via config.
Yes, you can adapt the tag accordingly, for example, define your defaults in the config, then in your plugin check if the attribute is empty or not and if no, apply the default settings. You can use your thumb config options and don’t have to define new ones:
$defaultSrcset = option('thumbs.presets.default');
(don’t know if the syntax is correct, but something like that)
I really appreciate it!
I’m trying to get the above solution to work on my site.
I’m having an issue with this where the html output is referencing a filename that does not match any files generated by Kirby from uploaded file.
The plugin code I’m using is identical to the revised version above that overrides the built in image kirbytag (except I added my own name and plugin name).
The entry in panel is (image: ald-items-view.jpg srcset: 400, 800, 1200)
The source file is 2560x2300
The resulting html output is
<img alt="Items View, the primary UI for viewing comprehensive project activity"
src="//localhost:3000/media/pages/projects/rollbar-account-dashboard
/2481837795-1582834403/ald-items-view.jpg"
srcset="//localhost:3000/media/pages/projects/rollbar-account-dashboard/2481837795-1582834403/ald-items-view.jpg 400,
//localhost:3000/media/pages/projects/rollbar-account-dashboard/2481837795-1582834403/ald-items-view-1x.jpg 800,
//localhost:3000/media/pages/projects/rollbar-account-dashboard/2481837795-1582834403/ald-items-view-2x.jpg 1200">
The files that have been generated in media folder are:
- ald-items-view-76x76.jpg
- ald-items-view-1408x.jpg
- ald-items-view.jpg
I don’t have anything added to my config for images or srcset.
My question is: How do I get things running so the generated files are appropriate for the srcset values, and the filenames are used by the html output?
Hm, yes, I can see the srcset images in the jobs folder but are not created. 
Have to leave that til tomorrow, better get a bit of sleep now.
1 Like
Thank you so much for stepping through all the various corrections to this to make it work!
Now I can either enter (image: filename.jpg srcset: 800, 1200, 1600) or fallback to my config settings with just (image: filename.jpg) and both are generating the correct files that map to correct html attrs.
Here is the revised custom plugin based on your inputs for anyone who might find it useful:
<?php
$originalTag = Kirby\Text\KirbyTag::$types['image'];
Kirby::plugin('your/plugin', [
'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;
}
]
]
]);
The presets in config/config.php look like this:
'thumbs' => [
'srcsets' => [
'default' => [ {your presets here} ],
],
],
I’m so pleased to have this solution, and be able to get started importing responsive images into my project. Thanks again.
1 Like