How to handle responsive iamges

Support
1

Hi,

most of my images have width of 1600px or 1280px. In the end I need them in 950px and 400px width.

As far as I understand what is written here https://learn.getgrav.org/16/content/media#responsive-images
I should rename my images to: image@2x.jpg and link them like

![My 1600px Image](image.jpg?derivatives=[400,950])

Now a 400px and 950px should be created?! When I do will be no “srcset=” tag in the code and it seems that no derivate is created.
What am I doing wrong here?

2

Hey,

You can output a cropped image size like this:
<img src="{{page.media[header.custom.MyImage].cropZoom(768, 450).url()}}" alt="">

You can then integrate srcset such as:
<img src="{{page.media[header.custom.MyImage].cropZoom(768, 450).url()}}" srcset="{{page.media[header.custom.MyImage].cropZoom(768, 450).url()}} 768w, {{page.media[header.custom.MyImage].cropZoom(320, 450).url()}} 320w" alt="">

Hope this helps.

3

Thanks for the hint.

I found out that the plugin https://github.com/olevik/grav-plugin-imgcaptions is not compatible with the derivates. If I deactive the plugin it works.

I am trying another caption plugin now:

UPDATE:
Derivates work with this image capture plugin: