Thumbnails for images called via panel: How to get started?

Kirby 2 Solved ✅
1

I would like to use thumbnails for the images that are loaded via the panel, to help with performance at different screensizes.

However, since they are loaded via the panel into a text field, I never directly call these images in the template; I just call the content of the text field: <?php echo kirbytext($page->text()) ?>

I would like to use the “srcset” method, as described in this article; so for example call the image like this to allow the browser to choose:

<img sizes="(max-width: 30em) 100vw,
			(max-width: 50em) 50vw,
			calc(33vw - 100px)"
	srcset="swing-200.jpg 200w,
			swing-400.jpg 400w,
			swing-800.jpg 800w,
			swing-1600.jpg 1600w"
	src="swing-400.jpg" alt="tire swing">

Every image I use in the text field will have the same width as each other (width will change with screensize), so I am hoping to use the srcset method referenced above dynamically (e.g. with PHP; I would not be able to call each image individually by name, like "swing-200.jpg example; I’d have to call the generic image name dynamically and append the “-200” as a string I am thinking).

However, I do not know where to put this, since images are being called only through the panel. I thought maybe the tags.php file, where the Image builder is…but I still could not figure out where or how.

Is anyone else using responsive images/thumbs for images that are exclusively called via the panel? Any ideas for how to accomplish this? Many thanks in advance!!!

2

You can overwrite the current image tag as a custom image tag that outputs what you want. Let me check if there is already a plugin for that.

This plugin could at least be a starting point: https://github.com/jancbeck/kirby-responsive-images, can’t find anything else at the mo although I was pretty sure there was something like this.

3

Thanks, @texnixe! This looks like what I was looking to do!