11ty / 11ty-website

Documentation site for the Eleventy static site generator.
https://www.11ty.dev/
MIT License
479 stars 681 forks source link

Image plugin docs don't mention that 'sizes' is required with multiple widths #1744

Open w0whitaker opened 4 days ago

w0whitaker commented 4 days ago

When using the 'eleventyImageTransformPlugin' with multiple widths set, 11ty complains if 'sizes' is not also set in 'defaultAttributes', but this requirement is not mentioned in the docs.

For example:

eleventyConfig.addPlugin(eleventyImageTransformPlugin, {
        extensions: "html",
        formats: ["webp", "jpg"],
        widths: [200, 800],
        defaultAttributes: {
            loading: "lazy",
            decoding: "async",
        },
    });

generates this error: Error: Missing `sizes` attribute on eleventy-img shortcode from:...

If only one width is set, everything is fine. Adding sizes: "auto" to the defaultAttributes block fixes the error.

Happy to write something up if there isn't something I'm missing.

Snapstromegon commented 3 days ago

You're absolutely right, I can't find anything around this in the docs either. We actually have a comment in the code for it: https://github.com/11ty/eleventy-img/blob/792df26a5f26e56aa8823b37f1410fbfa859e628/src/generate-html.js#L85-L88

If you can write something that links either to the spec or MDN too and describes when someone needs to add the sizes attribute, it would be great!