feat: ✨ add responsiveness to article header images

eleventy.config.js

@@ -2,6 +2,7 @@ import fs from 'node:fs';
 import { env } from 'node:process';
 import { eleventyImageTransformPlugin } from '@11ty/eleventy-img';
 import { feedPlugin } from '@11ty/eleventy-plugin-rss';
+import Image from '@11ty/eleventy-img';
 import eleventyPluginCiu from '@alexcarpenter/eleventy-plugin-caniuse';
 import eleventyPluginEmbedEverything from 'eleventy-plugin-embed-everything';
 import eleventyPluginIcons from 'eleventy-plugin-icons';
@@ -67,7 +68,9 @@ export default async function (eleventyConfig) {
   eleventyConfig.addPlugin(eleventyImageTransformPlugin, {
     extensions: 'html',
     formats: ['avif', 'webp', 'auto'],
-    sizes: ['1280', '720', '480', 'auto'],
+    widths: [640, 800, 1280, 1920, 2560, 3840, 'auto'],
+    urlPath: '/img/',
+    outputDir: './public/img/',
     defaultAttributes: {
       loading: 'lazy',
       decoding: 'async'
@@ -104,6 +107,18 @@ export default async function (eleventyConfig) {
   );
 
   eleventyConfig.addShortcode('year', () => `${new Date().getFullYear()}`);
+  eleventyConfig.addShortcode('bgimgset', async (src) => {
+    const imgset = await Image(src, {
+      widths: [1920, 2560, 3840],
+      formats: ['avif', 'webp', 'auto'],
+      urlPath: '/img/',
+      outputDir: './public/img/'
+    });
+
+    const getSets = ({ url, sourceType }, i) => `url(${url}) type('${sourceType}') ${i + 1}x`;
+
+    return Object.values(imgset).flat().map(getSets);
+  });
 
   eleventyConfig.addFilter('toDateObj', (dateString) => new Date(dateString));
   eleventyConfig.addFilter('isoDate', (dateObj) => dateObj.toISOString());

src/layouts/blogpost.njk

@@ -3,7 +3,12 @@ layout: base.njk
 ---
 
 <article>
-  <header style="background-image: url({{ image.src }})" class="relative mb-8 grid h-96 grid-flow-row grid-rows-article-header place-items-center space-y-6 bg-cover bg-center pb-8 pt-20 px-safe-offset-4 *:z-10 before:absolute before:inset-0 before:bg-slate-300 before:bg-opacity-65 sm:h-128 sm:pt-28 md:pt-32 md:px-safe-offset-6 lg:mb-12 lg:h-160 lg:pb-12 2xl:h-192 before:dark:bg-slate-900 before:dark:bg-opacity-65">
+  <header
+    {% if image and image.src != '' %}
+      style="background-image: image-set({% bgimgset image.src %})"
+    {% endif %}
+    class="relative mb-8 grid h-96 grid-flow-row grid-rows-article-header place-items-center space-y-6 bg-cover bg-center pb-8 pt-20 px-safe-offset-4 *:z-10 before:absolute before:inset-0 before:bg-slate-300 before:bg-opacity-65 sm:h-128 sm:pt-28 md:pt-32 md:px-safe-offset-6 lg:mb-12 lg:h-160 lg:pb-12 2xl:h-192 before:dark:bg-slate-900 before:dark:bg-opacity-65"
+  >
     <div class="prose prose-slate mx-auto md:prose-lg lg:prose-xl xl:prose-2xl dark:prose-invert prose-headings:font-normal">
       <h1 class="text-balance text-center">{{ title }}</h1>
     </div>

src/posts.njk

@@ -20,7 +20,7 @@ pagination:
     </div>
 
     {% if post.data.image and post.data.image.src != '' %}
-      <img src="{{ post.data.image.src }}" alt="{{ post.data.image.alt }}">
+      <img src="{{ post.data.image.src }}" alt="{{ post.data.image.alt }}" sizes="(min-width: 1280px) 960px, (min-width: 1024px) 768px, (min-width: 640px) 640px, 480px">
     {% endif %}
 
     <p>{{ post.data.description }}</p>