Open stebrech opened 1 year ago
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.
+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)
+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) 😊
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:
img
tag used thewidth
andheight
attributes from the original image size, which is 600px? It loads the smaller version, which is 300px.img
not uses thesrcset
andsizes
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
andsizes
.