Responsive images for the win

.eleventy.js

@@ -37,15 +37,16 @@ module.exports = function (eleventyConfig) {
   };
 
 /**
- * Implement the image shortcode. Technique borrowed from https://www.aleksandrhovhannisyan.com/blog/eleventy-image-plugin/
+ * Implement the image shortcode. Technique adapted from https://www.aleksandrhovhannisyan.com/blog/eleventy-image-plugin/ .
+ * Returns a figure tag containing a picture tag, which has webp and jpeg sources with an img tag fallback to jpeg, and a figcaption the same as the alt text.
  */
 const imageShortcode = async (
   src,
   alt,
   className = undefined,
   widths = [400, 800],
-  formats = ['webp', 'jpeg'],
-  sizes = '100vw'
+  formats = ['webp','jpeg'],
+  sizes = '(max-width: 768px) 400px, 800px'
 ) => {
   const imageMetadata = await Image(src, {
     widths: [...widths],
@@ -59,7 +60,7 @@ const imageShortcode = async (
       const sourceAttributes = stringifyAttributes({
         type: sourceType,
         srcset: images.map((image) => image.srcset).join(', '),
-        sizes,
+        sizes: sizes
       });
       // Return one <source> per format
       return `<source ${sourceAttributes}>`;
@@ -71,26 +72,23 @@ const imageShortcode = async (
     return images[images.length - 1];
   }
 
-  const largestUnoptimizedImg = getLargestImage(formats[0]);
+  const largestJpeg = getLargestImage('jpeg');
   const imgAttributes = stringifyAttributes({
-    src: largestUnoptimizedImg.url,
-    width: largestUnoptimizedImg.width,
-    height: largestUnoptimizedImg.height,
+    src: largestJpeg.url,
     alt,
     loading: 'lazy',
-    decoding: 'async',
+    decoding: 'async'
   });
   const imgHtmlString = `<img ${imgAttributes}>`;
-
   const pictureAttributes = stringifyAttributes({
     class: className,
   });
-  const picture = `<picture ${pictureAttributes}>
+  const figure = `<figure><picture ${pictureAttributes}>
     ${sourceHtmlString}
     ${imgHtmlString}
-  </picture>`;
+  </picture><figcaption>${alt}</figcaption></figure>`;
 
-  return outdent`${picture}`;
+  return figure;
 };
 
 /** 

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

@@ -63,10 +63,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" %}
-<figcaption>Wandering The Farm vineyard being taught about chardonnay by a master winemaker</figcaption>
-</figure>
 
 ## And then the chilly bin came out
 

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

@@ -26,10 +26,7 @@ Like any good online tutorial, we begin with the ingredients. You will need:
  - A small person - but not so small they can't be trusted with a Stanley knife
  - 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", "" %}
-<figcaption>Components of the new wine cork notice board pre-assembly</figcaption>
-</figure>
+{% image "img/IMG_7118.JPG", "Components of the new wine cork notice board pre-assembly" %}
 
 ## Method
 
@@ -52,10 +49,7 @@ Like any good online tutorial, we begin with the ingredients. You will need:
    - 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", "" %}
-<figcaption>The finished wine cork notice board</figcaption>
-</figure>
+{% image "img/IMG_7120.jpg", "The finished wine cork notice board" %}
 
 ## Installation
 
@@ -64,9 +58,4 @@ OK all that is left to do now is install it on your wall. You may also like to p
 Use a stud finder to find a suitably strong part of the wall, then measure carefully to get the notice board square and level in your space.
 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", "" %}
-<figcaption>Installed wine cork notice board above a bench, where random bits of paper tend to collect</figcaption>
-</figure>
-
-
+{% image "img/IMG_7121.JPG", "Installed wine cork notice board above a bench, where random bits of paper tend to collect" %}

static/index.css

@@ -121,6 +121,10 @@ a:active, a:hover {
   color: var(--subheading-color);
 }
 
+figure {
+  margin-left: 0px;
+}
+
 .posts,
 .post {
   margin-top: 60px;