11ty image shortcode best practice
Just deployed a site using the 11ty image plugin and it is working well. I did have some issues with set up - wanted the hi-res images in a separate folder outside of src and public folders and acheived that by setting an external source - would be nice if this were in the base set up:
let imageSrc = `hi-res-images/${src}`;
let metadata = await Image(imageSrc, {
widths: [180, 343, 647, 1200],
And then the shortcode in the functions:
eleventyConfig.addAsyncShortcode("image", imageShortcode);
But then I was having issues where the image shown on full screen was the low res version - not good! Took me an age to work out the issue till I noticed some errant code in the source.
In Markdown please leave a space before and after the image shortcode - else it gets mixed up and bits of the picture element get wrapped in a p tag and become not a picture element!
This doesn't work:
Lorum ipsum dolar bla bla
% image "image.jpg", "alt text" %
Lorum ipsum dolar bla bla
But this does:
Lorum ipsum dolar bla bla
% image "image.jpg", "alt text" %
Lorum ipsum dolar bla bla
Leave some space!
Next short: Solving a date display issue in 11ty templates
Previous short: Netlify prerender cache
