diff --git a/content/blog/fourthpost/fourthpost.md b/content/blog/fourthpost/fourthpost.md
index 8149f7c..c80eb98 100644
--- a/content/blog/fourthpost/fourthpost.md
+++ b/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" %}
+
## Section Header
diff --git a/eleventy.config.images.js b/eleventy.config.images.js
index 67103fe..c9825fa 100644
--- a/eleventy.config.images.js
+++ b/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 () 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 () will be normalized to your input/content directory
+ // and written to ${OUTPUT_DIR}/img/
+
+ // assigned on the HTML tag will override these values.
+ defaultAttributes: {
loading: "lazy",
- decoding: "async",
- };
-
- return eleventyImage.generateHTML(metadata, imageAttributes);
+ decoding: "async"
+ }
});
};
diff --git a/eleventy.config.js b/eleventy.config.js
index 7a30433..7be6c48 100644
--- a/eleventy.config.js
+++ b/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) => {
diff --git a/package.json b/package.json
index 2475c67..7f3883a 100644
--- a/package.json
+++ b/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",