Plugin to resize image and create srcset

Support Plugins
6

I get some weird behavior.

No matter if I set derivatives to [600, 1200, 1600] or 600, 1800, 600, I get the same result:

<img 
  src="/image.jpg" 
  srcset="
    /image600w.jpg 600w, 
    /image.jpg 1150w" 
    sizes="(min-width: 768px) 100vw, 50vw
  "
>

Also, before setting derivatives and sizes I have this:

    {% set image = page.header.image ? page.media[page.header.image] : page.media.images|first %}
    {% set image = image.cropZoom(1600, 1000).flip(0, page.header.image_flip) %}

So /image.jpg is cropped and flipped to the dimensions defined with cropZoom, but /image600w.jpg isn’t - it’s the original resized to fit 600px width.

So:

  • Where does 1150w come from?
  • Why does this 1150w have 1600x1000 image instead of 1150px width?
  • Where is 1200w image?
  • How do I make cropped and/or flipped image responsive?