Responsive images help (with Selector Plugin)?

Kirby 2 Solved ✅
,
1

I’m trying to evaluate which of the many responsive image plugins I could integrate with the Selector plugin. It seems not too hard to put the pieces together but I’m new to Kirby, php, and srcset/<picture> and trying to wrap my head around it all at once, thought I might as well ask if someone had already done this.

I just want the user to be able to select an image for a given field, and in the template render responsive image using srcset and/or <picture>. And if there are any considerations to get picturefill.js to work with this besides just including it on the page that would be nice to know too.

These are some of the things I’ve found in the plugins repo:



//https://gist.github.com/ivomynttinen/ff53b3b8f007efd0c4285942930075ef

Going to ping the creator of Selector here, @DieserJonas :slight_smile:. Maybe this doesn’t really concern Selector because Selector’s just for putting something into a $fieldVariable? The key thing is that most of the responsive images plugins seem to only have examples where you access them with markdown, but I don’t want my client to have to do that.

Thanks!

2

Hello Josh!
The field you use to select your images in the front-end doesn’t really matter here. Most fields will simply return a comma separated list of images.

If you want to use one of those responsive image tags, you can simply do so in your template, there’s a very neat kirby helper for that:
https://getkirby.com/docs/cheatsheet/helpers/kirbytag

echo kirbytag(array(
  'link'  => 'blog/my-article',
  'text'  => 'Go to my blog article'
));

// will manually do the same as
// (link: blog/my-article text: Go to my blog article)
// in Kirbytext

You need to create a foreach loop to go through all of the selected images one by one and use this to call the kirbytag for each. If you need help for the foreach don’t hesitate to ask :wink:

3

Thanks @Thiousi ! kirbytag looks really useful.

1 Like