Questions regarding eleventy-img config

[stebrech]

I used your elventy.conifg.image.js in my project. I only had to change the object for the relative path, because the images are all in one assets folder. Thank you so much sharing this config. That helped me a lot.

Not sure if this is the right place for asking those questions. However, I’ll try it anyway:

• I was wondering if there is an explanation that the img tag used the width and height attributes from the original image size, which is 600px? It loads the smaller version, which is 300px.
• Maybe I understand the concept not good enough, but why does the img not uses the srcset and sizes attributes?

And a bonus question ;-) Would it make sense to use an example how to use all parameter possible within the shortcode in this starter? I found only one example without srcset and sizes.

[kdmcguire]

I'd also like to know how to use sizes. I don't want my images to default to loading at the full-size, that's hardly good for performance! Yet it's surprisingly unclear how to use the out-of-the-box image shortcode to control this.

[turuto]

+1 to the full example.
I'm struggling to add the widths. With the give shortcode
{% image "./myImage.png", "the alt text", "(min-width: 640px) 50vw 100vw", "50" %}
I get the following error:
[11ty] EleventyShortcodeError: Error with Nunjucks shortcode image (via Template render error) [11ty] 3. widths.map is not a function (via Template render error) [11ty] [11ty] Original error stack trace: TypeError: widths.map is not a function [11ty] at Image.getValidWidths (C:\00_TRABAJOS\albertoariza-11ty\node_modules\@11ty\eleventy-img\img.js:183:24) [11ty] at Image.getFullStats (C:\00_TRABAJOS\albertoariza-11ty\node_modules\@11ty\eleventy-img\img.js:442:28) [11ty] at Image.resize (C:\00_TRABAJOS\albertoariza-11ty\node_modules\@11ty\eleventy-img\img.js:467:26)

[RowanAldean]

+1 to the full example. I'm struggling to add the widths. With the give shortcode {% image "./myImage.png", "the alt text", "(min-width: 640px) 50vw 100vw", "50" %} I get the following error: [11ty] EleventyShortcodeError: Error with Nunjucks shortcode image (via Template render error) [11ty] 3. widths.map is not a function (via Template render error) [11ty] [11ty] Original error stack trace: TypeError: widths.map is not a function [11ty] at Image.getValidWidths (C:\00_TRABAJOS\albertoariza-11ty\node_modules\@11ty\eleventy-img\img.js:183:24) [11ty] at Image.getFullStats (C:\00_TRABAJOS\albertoariza-11ty\node_modules\@11ty\eleventy-img\img.js:442:28) [11ty] at Image.resize (C:\00_TRABAJOS\albertoariza-11ty\node_modules\@11ty\eleventy-img\img.js:467:26)

Had the same issue. Honestly very disappointing how poorly thought out this whole image processing side of things seem. Built my blog in 1 day and decided to ignore images.

Here is my workaround.

We know the eleventyImage needs some ReadOnlyArray<number> so we simply need widths in the boiler plate to actually be an array. Ideally we could do this in the shortcode but for some reason that I don't care enough to investigate you must pass string in liquid templates 🥲

So quick fix is just modify the shortcode function to split the string on the , and then use that array in the eleventyImage. Here's a snippet:

eleventyConfig.addAsyncShortcode("image", async function imageShortcode(src, alt, widths, sizes) {
		// Full list of formats here: https://www.11ty.dev/docs/plugins/image/#output-formats
		// Warning: Avif can be resource-intensive so take care!
		let formats = ["avif", "webp", "auto"];
		let file = relativeToInputPath(this.page.inputPath, src);
		// console.log(`Here is the widths: ${widths.split(',')}`)
		let widthsArray = widths.split(',')
		let metadata = await eleventyImage(file, {
			widths: widthsArray || ["auto"],
			formats,
			outputDir: path.join(eleventyConfig.dir.output, "img"), // Advanced usage note: `eleventyConfig.dir` works here because we’re using addPlugin.
		});

		// TODO loading=eager and fetchpriority=high
		let imageAttributes = {
			alt,
			sizes,
			loading: "lazy",
			decoding: "async",
		};
		return eleventyImage.generateHTML(metadata, imageAttributes);
	});

now simply pass in your width & height as pixels via string like so:
{% image "./myImage.png", "the alt text", "100,100" %}

edit: I kept playing around with this and have now just adopted to pass any widths to the metadata and then properly style on the img tag using CSS. The widths will really just control the resolution of the image(s) 😊