eleventy-img
eleventy-img copied to clipboard
How can I hyperlink to a full size image?
Hello I am using the 11ty base template which defines the image
short code as follows:
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 input;
if(isFullUrl(src)) {
input = src;
} else {
input = relativeToInputPath(this.page.inputPath, src);
}
let metadata = await eleventyImage(input, {
widths: widths || ["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);
});
I am using the shortcode like so:
{% image "./my-image.jpg", "Alt text" %}
What is the shortest way to get this image to display at a smaller size but hyperlink to the full size? Modifying the default value of ["auto"]
for the width
field in the default site's image shortcode implementation I am seeing the 600px image used in the generated blog post. However, I still have the full size image I'd like to link to. Is there a way to do this out of the box?