Improve srcset documentation

[Darren Wood]

Hi,

Can you please expand a bit on the srcset documentation?

Thanks!
Darren

[Fred Carlsen]

Hi @darren131,

Currently don't have much time, so it will probably be some time before I get to it.

Anything particular you would like to see?

Feel free to send a pull request.

[skramstad]

Hi @darren131

Hope this code helps you!

First set som transforms, this example is only scaling the width of the image. You can read more about the API here. We also format, compress (auto), convert the Color Space (cs) to srgb and then sharpen the image (sharp).

{% set transforms = [
    {
        w: 800,
        auto: 'format,compress',
        cs: 'srgb',
        sharp: 10
    },
    {
        w: 600,
        auto: 'format,compress',
        cs: 'srgb',
        sharp: 10
    },
    {
        w: 400,
        auto: 'format,compress',
        cs: 'srgb',
        sharp: 10
    },
    {
        w: 291,
        auto: 'format,compress',
        cs: 'srgb',
        sharp: 10
    }
] %}

{% set transformedImage = craft.imgix.transformImage( image, transforms) %}
{{ transformedImage.srcset({ 'class': 'any-CSS-class', 'alt': image.title, 'itemprop': 'image' }) }}

If you want to crop the image

    { 
        w: 800,
        h: 600,
        auto: 'format,compress',
        crop: 'center,center',
        fit: 'crop',
        cs: 'srgb',
        sharp: 10
    }

[skramstad]

How do I use defaultSettings? Lets say I use the example above but instead I want to use (instead of repeating myself):

{% set imageOptions = 
    {
        cs: 'srgb',
        auto: 'format,compress',
        crop: 'top,right',
        fit: 'crop',
        cs: 'srgb',
        sharp: 80
    }
%}

I thought this would work... but no luck

{% set transformedImage = craft.imgix.transformImage( image, imageSizes, imageOptions ) %}

[Fred Carlsen]

@skramstad I think that was a bug. Could you try again?

[skramstad]

@sjelfull I believe this issue was because it was not implemented yet. But it's working now!

[Fred Carlsen]

@skramstad Kool. Yeah, that is the "bug" I had in mind 😁