eleventy-img icon indicating copy to clipboard operation
eleventy-img copied to clipboard

How can I hyperlink to a full size image?

Open matt-y opened this issue 9 months ago • 0 comments

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?

matt-y avatar May 03 '24 17:05 matt-y