Different widths

[Tristen Grant]

Is there a way to set different widths? I'm able to set default widths but it would be nice to be able to change the image's widths depending on its use.

[Brian Tremblay]

Not sure how you've implemented the image utility. If you use an async function as demonstrated at https://www.11ty.dev/docs/plugins/image/#use-this-in-your-templates, then you can pass a widths array to the function. The example has this code:

async function imageShortcode(src, alt, sizes) {
    let metadata = await Image(src, {
        widths: [300, 600],
        formats: ["avif", "jpeg"]
    });

    // ...
}

Change it to this:

async function imageShortcode(src, alt, sizes, widths) {

    if (!widths) {
        widths = [300, 600];
    }
    let metadata = await Image(src, {
        widths: widths,
        formats: ["avif", "jpeg"]
    });

    // ...
}

Now you have a default set of widths, 300 and 600 pixels. But you can override it as needed:

{% picture "foo.jpeg", "", "100vw", [300, 600, 800] %}