Update to using picture tag from image shortcode

.eleventy.js

@@ -1,12 +1,13 @@
 const markdownIt = require("markdown-it");
 const pluginRss = require("@11ty/eleventy-plugin-rss");
 const Image = require("@11ty/eleventy-img");
+const outdent = require('outdent');
+
 
 module.exports = function (eleventyConfig) {
 
     // output everything from the static folder at root of output
     eleventyConfig.addPassthroughCopy({ static: "/" });
-    //eleventyConfig.addPassthroughCopy({ "content/posts/img/": "/" });
 
     // can use the shortcode 'md' in a page to render markdown copy as HTML in place
     eleventyConfig.addFilter("md", function (content = "") {
@@ -32,21 +33,74 @@ module.exports = function (eleventyConfig) {
     });
 
     // set up the image shortcode for use in nunjucks templates
-    eleventyConfig.addShortcode("image", async function(src, alt, sizes) {
-      let metadata = await Image(src, {
-        widths: [300, 600],
-        formats: ["jpeg"],
-        outputDir: "_site/img/"
-      });
-
-      let imageAttributes = {
-        alt,
+    eleventyConfig.addShortcode("image", imageShortcode);
+  };
+
+/**
+ * Implement the image shortcode. Technique borrowed from https://www.aleksandrhovhannisyan.com/blog/eleventy-image-plugin/
+ */
+const imageShortcode = async (
+  src,
+  alt,
+  className = undefined,
+  widths = [400, 800],
+  formats = ['webp', 'jpeg'],
+  sizes = '100vw'
+) => {
+  const imageMetadata = await Image(src, {
+    widths: [...widths],
+    formats: [...formats],
+    outputDir: "_site/img/"
+  });
+
+  const sourceHtmlString = Object.values(imageMetadata)
+    .map((images) => {
+      const { sourceType } = images[0];
+      const sourceAttributes = stringifyAttributes({
+        type: sourceType,
+        srcset: images.map((image) => image.srcset).join(', '),
         sizes,
-        loading: "lazy",
-        decoding: "async",
-      };
-
-      // throws an error on missing alt (alt="" works okay) or missing sizes
-      return Image.generateHTML(metadata, imageAttributes);
-    });
-  };
+      });
+      // Return one <source> per format
+      return `<source ${sourceAttributes}>`;
+    })
+    .join('\n');
+
+  const getLargestImage = (format) => {
+    const images = imageMetadata[format];
+    return images[images.length - 1];
+  }
+
+  const largestUnoptimizedImg = getLargestImage(formats[0]);
+  const imgAttributes = stringifyAttributes({
+    src: largestUnoptimizedImg.url,
+    width: largestUnoptimizedImg.width,
+    height: largestUnoptimizedImg.height,
+    alt,
+    loading: 'lazy',
+    decoding: 'async',
+  });
+  const imgHtmlString = `<img ${imgAttributes}>`;
+
+  const pictureAttributes = stringifyAttributes({
+    class: className,
+  });
+  const picture = `<picture ${pictureAttributes}>
+    ${sourceHtmlString}
+    ${imgHtmlString}
+  </picture>`;
+
+  return outdent`${picture}`;
+};
+
+/** 
+ * Maps a config of attribute-value pairs to an HTML string representing those same attribute-value pairs.
+ */
+const stringifyAttributes = (attributeMap) => {
+  return Object.entries(attributeMap)
+    .map(([attribute, value]) => {
+      if (typeof value === 'undefined') return '';
+      return `${attribute}="${value}"`;
+    })
+    .join(' ');
+};

content/posts/Generosity-Customer-Experience-Superpower.md

@@ -64,7 +64,7 @@ We were! Much to our delight, the charming young man was named Finn, and he was
 Next we met Arabella, one of the winemakers, and their family dog met ours, and before we could pinch ourselves to make sure we weren't dreaming, we met Simon, the chief winemaker, and we were following him through the vines taking in a masterclass in viticulture. We spent a good half an hour soaking up decades of experience and wisdom, and Simon was very gracious in putting up with our simple questions without ever making us feel silly.
 
 <figure>
-{% image "img/IMG_1513.JPG", "Wandering The Farm vineyard being taught about chardonnay by a master winemaker", "(min-width: 30em) 50vw, 100vw" %}
+{% image "img/IMG_1513.JPG", "Wandering The Farm vineyard being taught about chardonnay by a master winemaker" %}
 <figcaption>Wandering The Farm vineyard being taught about chardonnay by a master winemaker</figcaption>
 </figure>
 

content/posts/Wine-Cork-Notice-Board-How-To.md

@@ -27,34 +27,33 @@ Like any good online tutorial, we begin with the ingredients. You will need:
  - 380 wine corks, more or less - that's about 10 corks per cm<sup>2</sup> of frame
 
 <figure>
-{% image "img/IMG_7118.JPG", "Components of the new wine cork notice board pre-assembly", "(min-width: 30em) 50vw, 100vw" %}
+{% image "img/IMG_7118.JPG", "Components of the new wine cork notice board pre-assembly", "" %}
 <figcaption>Components of the new wine cork notice board pre-assembly</figcaption>
 </figure>
 
 ## Method
 
  - Sit your small person down with the Stanley knife and the corks
  - Instruct small person to cut the corks length ways, preserving the most interesting details
-   - Cutting corks is easier if you cut multiple times
-     - cut the whole length each time but 
-     - only cut a little deeper each time
-     - three or four shallow full length cuts is easier that one full length, full depth cut
+ - Cutting corks is easier if you cut multiple times...
+   - cut the whole length each time 
+   - only cut a a third of the depth each time
+   - three shallow cuts is much easier that one full depth cut
    - Set to one side any offcuts
- - Place your frame in front of you
-   - If the frame had glass, take that out so you just have the backing board and the frame
- - Experiment with feature pieces, for example champagne corks in the corners, set those you like aside
-   - Check you have more than enough corks to cover the left over space in the frame
+ - If the frame has glass, take that out so you just have the backing board and the frame
+ - Test any features you plan to have, like champagne corks in the corners
+ - Glue in the feature pieces in the desired locations
+ - Spray an area on the backing board about as big as your hand, then fill it with the feature
+   - Be generous with your glue!
+ - Check you have enough corks to fill the left over space in the frame
    - You are aiming to fill horizontally edge to edge in the gaps between the feature pieces
    - Remember to fill all the gaps, using offcuts cut to shape
- - Glue in the feature pieces in the desired locations. 
-   - For example, mine were the champagne corks in the corners
-   - Spray an area about as big as your hand, then fill it. Be generous with your glue
  - Starting top left, glue in the remaining corks length ways with interesting text facing outwards
    - Aiming to fill the frame top to bottom left to right with straight corks when possible
  - Glue offcuts in the small gaps that inevitable appear until there are no gaps left
 
 <figure>
-{% image "img/IMG_7120.jpg", "The finished wine cork notice board", "(min-width: 30em) 50vw, 100vw" %}
+{% image "img/IMG_7120.jpg", "The finished wine cork notice board", "" %}
 <figcaption>The finished wine cork notice board</figcaption>
 </figure>
 
@@ -66,7 +65,7 @@ Use a stud finder to find a suitably strong part of the wall, then measure caref
 Hang it, and enjoy the tranquility of being able to pin random bits of paper on the wall!
 
 <figure>
-{% image "img/IMG_7121.JPG", "Installed wine cork notice board above a bench, where random bits of paper tend to collect", "(min-width: 30em) 50vw, 100vw" %}
+{% image "img/IMG_7121.JPG", "Installed wine cork notice board above a bench, where random bits of paper tend to collect", "" %}
 <figcaption>Installed wine cork notice board above a bench, where random bits of paper tend to collect</figcaption>
 </figure>