Add image pipeline

blog/fourthpost.md

@@ -8,6 +8,8 @@ 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.
 
+{% imageOptimized "./fourthpost/possum.png", "A possum parent and two possum kids hanging from the iconic red balloon" %}
+
 ## Section Header
 
 Capitalize on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing solely on the bottom line.

eleventy.config.js

@@ -1,3 +1,4 @@
+const path = require("path");
 const { DateTime } = require("luxon");
 const markdownItAnchor = require("markdown-it-anchor");
 
@@ -5,6 +6,13 @@ const pluginRss = require("@11ty/eleventy-plugin-rss");
 const pluginSyntaxHighlight = require("@11ty/eleventy-plugin-syntaxhighlight");
 const pluginNavigation = require("@11ty/eleventy-navigation");
 const { EleventyHtmlBasePlugin } = require("@11ty/eleventy");
+const eleventyImage = require("@11ty/eleventy-img");
+
+function relativeToInputPath(inputPath, relativeFilePath) {
+	let split = inputPath.split(path.sep);
+	split.pop();
+	return path.resolve(split.join(path.sep), relativeFilePath);
+}
 
 module.exports = function(eleventyConfig) {
 	eleventyConfig.ignores.add("README.md");
@@ -20,12 +28,30 @@ module.exports = function(eleventyConfig) {
 	// to emulate the file copy on the dev server. Learn more: https://www.11ty.dev/docs/copy/#emulate-passthrough-copy-during-serve
 	// eleventyConfig.setServerPassthroughCopyBehavior("passthrough");
 
-	// Add plugins
+	// Plugins
 	eleventyConfig.addPlugin(pluginRss);
 	eleventyConfig.addPlugin(pluginSyntaxHighlight);
 	eleventyConfig.addPlugin(pluginNavigation);
 	eleventyConfig.addPlugin(EleventyHtmlBasePlugin);
 
+	// Shortcodes
+	eleventyConfig.addAsyncShortcode("imageOptimized", async function imageShortcode(src, alt, sizes) {
+		let file = relativeToInputPath(this.page.inputPath, src);
+		let metadata = await eleventyImage(file, {
+			widths: ["auto"],
+			formats: ["webp", "png"], // Can add "avif" or "jpeg" here
+			outputDir: "_site/img/"
+		});
+		let imageAttributes = {
+			alt,
+			sizes,
+			loading: "lazy",
+			decoding: "async",
+		};
+		return eleventyImage.generateHTML(metadata, imageAttributes);
+	});
+
+	// Filters
 	eleventyConfig.addFilter("readableDate", (dateObj, format = "dd LLLL yyyy") => {
 		return DateTime.fromJSDate(dateObj, {zone: 'utc'}).toFormat(format);
 	});

package.json

@@ -28,6 +28,7 @@
 	"homepage": "https://github.com/11ty/eleventy-base-blog#readme",
 	"dependencies": {
 		"@11ty/eleventy": "2.0.0-beta.1",
+		"@11ty/eleventy-img": "^2.0.1",
 		"@11ty/eleventy-navigation": "^0.3.5",
 		"@11ty/eleventy-plugin-rss": "^1.2.0",
 		"@11ty/eleventy-plugin-syntaxhighlight": "^4.2.0",