Use new Image optimization transform

content/blog/fourthpost/fourthpost.md

@@ -8,7 +8,7 @@ Leverage agile frameworks to provide a robust synopsis for high level overviews.
 
 Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution. User generated content in real-time will have multiple touchpoints for offshoring.
 
-{% image "./possum.png", "A possum parent and two possum kids hanging from the iconic red balloon" %}
+<img src="./possum.png" alt="A possum parent and two possum kids hanging from the iconic red balloon">
 
 ## Section Header
 

eleventy.config.images.js

@@ -1,51 +1,28 @@
-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;
-	}
-}
+import { eleventyImageTransformPlugin } from "@11ty/eleventy-img";
 
 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);
-		}
+	eleventyConfig.addPlugin(eleventyImageTransformPlugin, {
+		// which file extensions to process
+		extensions: "html",
 
-		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.
-		});
+		formats: ["avif", "webp", "auto"],
 
-		// TODO loading=eager and fetchpriority=high
-		let imageAttributes = {
-			alt,
-			sizes,
+		// widths: ["auto"],
+
+		// urlPath: "/img/",
+
+		// If a urlPath is not specified:
+
+		// 1. Relative image sources (<img src="./possum.png">) will be co-located in your output directory
+		// 		with the template they are used in. Warning: if the same source image is used in multiple templates,
+		//		it will be written to two different locations!
+		// 2. Absolute image sources (<img src="/possum.png">) will be normalized to your input/content directory
+		// 		and written to ${OUTPUT_DIR}/img/
+
+		// <img loading decoding> assigned on the HTML tag will override these values.
+		defaultAttributes: {
 			loading: "lazy",
-			decoding: "async",
-		};
-
-		return eleventyImage.generateHTML(metadata, imageAttributes);
+			decoding: "async"
+		}
 	});
 };

eleventy.config.js

@@ -1,7 +1,7 @@
 import { DateTime } from "luxon";
 import markdownItAnchor from "markdown-it-anchor";
 
-import { PathToUrlTransformPlugin, HtmlBasePlugin } from "@11ty/eleventy";
+import { InputPathToUrlTransformPlugin, HtmlBasePlugin } from "@11ty/eleventy";
 import pluginRss from "@11ty/eleventy-plugin-rss";
 import pluginSyntaxHighlight from "@11ty/eleventy-plugin-syntaxhighlight";
 import pluginBundle from "@11ty/eleventy-plugin-bundle";
@@ -35,10 +35,9 @@ export default async function(eleventyConfig) {
 		preAttributes: { tabindex: 0 }
 	});
 	eleventyConfig.addPlugin(pluginNavigation);
-
 	eleventyConfig.addPlugin(pluginBundle);
 	eleventyConfig.addPlugin(HtmlBasePlugin);
-	eleventyConfig.addPlugin(PathToUrlTransformPlugin);
+	eleventyConfig.addPlugin(InputPathToUrlTransformPlugin);
 
 	// Filters
 	eleventyConfig.addFilter("readableDate", (dateObj, format, zone) => {

package.json

@@ -22,7 +22,7 @@
 	},
 	"license": "MIT",
 	"engines": {
-		"node": ">=14"
+		"node": ">=18"
 	},
 	"funding": {
 		"type": "opencollective",
@@ -33,8 +33,8 @@
 	},
 	"homepage": "https://github.com/11ty/eleventy-base-blog#readme",
 	"devDependencies": {
-		"@11ty/eleventy": "file:../eleventy",
-		"@11ty/eleventy-img": "^3.1.8",
+		"@11ty/eleventy": "3.0.0-alpha.5",
+		"@11ty/eleventy-img": "^4.0.2",
 		"@11ty/eleventy-navigation": "^0.3.5",
 		"@11ty/eleventy-plugin-bundle": "^1.0.5",
 		"@11ty/eleventy-plugin-rss": "^1.2.0",