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