add image support: eleventy-img plugin, hero images, responsive picture elements

.eleventy.js

@@ -1,5 +1,60 @@
+const Image = require("@11ty/eleventy-img");
+const path = require("path");
+
+function imageShortcode(src, alt, sizes = "100vw") {
+  const inputPath = path.join("img", src);
+  const options = {
+    widths: [480, 800, 1200],
+    formats: ["avif", "webp", "jpeg"],
+    outputDir: "_site/img",
+    urlPath: "/img/",
+    filenameFormat: function (id, src, width, format) {
+      const name = path.basename(src, path.extname(src));
+      return `${name}-${width}.${format}`;
+    },
+  };
+
+  Image(inputPath, options);
+  const metadata = Image.statsSync(inputPath, options);
+
+  return Image.generateHTML(metadata, {
+    alt,
+    sizes,
+    loading: "lazy",
+    decoding: "async",
+  });
+}
+
+function heroImageShortcode(src, alt) {
+  const inputPath = path.join("img", src);
+  const options = {
+    widths: [800, 1200, 1600],
+    formats: ["avif", "webp", "jpeg"],
+    outputDir: "_site/img",
+    urlPath: "/img/",
+    filenameFormat: function (id, src, width, format) {
+      const name = path.basename(src, path.extname(src));
+      return `${name}-${width}.${format}`;
+    },
+  };
+
+  Image(inputPath, options);
+  const metadata = Image.statsSync(inputPath, options);
+
+  return Image.generateHTML(metadata, {
+    alt,
+    sizes: "(max-width: 960px) 100vw, 960px",
+    loading: "eager",
+    decoding: "async",
+  });
+}
+
 module.exports = function (eleventyConfig) {
   eleventyConfig.addPassthroughCopy("css");
+  eleventyConfig.addPassthroughCopy("img");
+
+  eleventyConfig.addShortcode("image", imageShortcode);
+  eleventyConfig.addShortcode("heroImage", heroImageShortcode);
 
   eleventyConfig.addCollection("columns", function (collectionApi) {
     return collectionApi

_includes/column.njk

@@ -14,6 +14,11 @@
   <div class="site-layout">
     <main class="content">
       <article class="column-entry">
+        {% if hero %}
+        <figure class="column-hero">
+          {% heroImage hero, heroAlt or title %}
+        </figure>
+        {% endif %}
         <header class="column-header">
           <h1>{{ title }}</h1>
           <time datetime="{{ date | isoDate }}">{{ date | readableDate }}</time>

columns/2026-03-28-hello-world.md

@@ -6,4 +6,4 @@ tags: column
 permalink: /columns/2026/hello-world/
 ---
 
-This is the first entry.
+This is the first entry. With an edit.

css/style.css

@@ -80,6 +80,27 @@ a:hover {
   color: var(--color-muted);
 }
 
+/* images */
+
+.column-hero {
+  margin-bottom: 1.5rem;
+}
+
+.column-hero picture,
+.column-hero img {
+  display: block;
+  width: 100%;
+  height: auto;
+}
+
+.column-body picture,
+.column-body img {
+  display: block;
+  max-width: 100%;
+  height: auto;
+  margin: 1.5rem 0;
+}
+
 .column-body {
   margin-top: 1.5rem;
 }

index.njk

@@ -5,6 +5,11 @@ layout: base.njk
 {%- set latest = collections.columns | first -%}
 {%- if latest %}
 <article class="column-entry">
+  {% if latest.data.hero %}
+  <figure class="column-hero">
+    {% heroImage latest.data.hero, latest.data.heroAlt or latest.data.title %}
+  </figure>
+  {% endif %}
   <header class="column-header">
     <h1><a href="{{ latest.url }}">{{ latest.data.title }}</a></h1>
     <time datetime="{{ latest.date | isoDate }}">{{ latest.date | readableDate }}</time>

package.json

@@ -7,6 +7,7 @@
     "dev": "eleventy --serve --watch"
   },
   "dependencies": {
-    "@11ty/eleventy": "^3.0.0"
+    "@11ty/eleventy": "^3.0.0",
+    "@11ty/eleventy-img": "^5.0.0"
   }
 }