eleventy.config.images.js

import path from "path";
import eleventyImage from "@11ty/eleventy-img";

function relativeToInputPath(inputPath, relativeFilePath) {
	let split = inputPath.split("/");
	split.pop();

	return path.resolve(split.join(path.sep), relativeFilePath);
}

function isFullUrl(url) {
	try {
		new URL(url);
		return true;
	} catch (e) {
		return false;
	}
}

export default function (eleventyConfig) {
	// Eleventy Image shortcode
	// https://www.11ty.dev/docs/plugins/image/
	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);
		}
	);

	eleventyConfig.addAsyncShortcode(
		"shareimg",
		async function shareImageShortcode(src) {
			let input;
			if (isFullUrl(src)) {
				input = src;
			} else {
				input = relativeToInputPath(this.page.inputPath, src);
			}

			let metadata = await eleventyImage(input, {
				widths: [1280],
				formats: ["jpeg", "png"],
				outputDir: path.join(eleventyConfig.dir.output, "img"),
			});

			let data;
			let ext = input.slice(-3);
			if (ext === "jpg") {
				data = metadata.jpeg[metadata.jpeg.length - 1];
			} else {
				data = metadata.png[metadata.png.length - 1];
			}

			return data.url;
		}
	);

	eleventyConfig.addFilter("fullPostImgUrl", (src) => {
		if (isFullUrl(src)) {
			return true;
		} else {
			return false;
		}
	});
};