add alignment option to images in blog posts (#53)

* update image shortcode to named args

* add alignment class to img, if any

source/_config/shortcodes/image.js

@@ -6,19 +6,19 @@ const Image = require( "@11ty/eleventy-img" );
 // https://www.11ty.dev/docs/plugins/image/
 // https://gfscott.com/blog/eleventy-img-without-central-image-directory/
 
-module.exports = async function( src, alt, flickr=false, sizes="100vw" ) {
-  if(alt === undefined) {
-    throw new Error(`Missing \`alt\` on: ${src}`);
+module.exports = async function( image ) {
+  if(image.alt === undefined) {
+    throw new Error(`Missing \`alt\` on: ${image.src}`);
   }
 
   // Define the image source. This will depend on where the image is from:
   // a local file within the blog post, or an external flickr image.
   let imageSrc;
 
-  // The default for flickr (set in parameters) is false. This is only set if
-  // the source of the image comes from flickr.
-  if(flickr) {
-    imageSrc = src;
+  // The default for flickr (set in parameters) is false. This is only set to
+  // true when the source of the image comes from flickr.
+  if( image.src.includes('staticflickr') ) {
+    imageSrc = image.src;
   }
 
   // The default for the image source is a local file within the blog post.
@@ -30,7 +30,7 @@ module.exports = async function( src, alt, flickr=false, sizes="100vw" ) {
 
     // Create the source path of the image by joining the updated input
     // directory with the filename of the image itself.
-    imageSrc = `${inputDirectory}/${src}`;
+    imageSrc = `${inputDirectory}/${image.src}`;
   }
 
   // Images have an output directory based on which blog post they are
@@ -57,15 +57,18 @@ module.exports = async function( src, alt, flickr=false, sizes="100vw" ) {
   const lowsrc = metadata.jpeg[0];
   const highsrc = metadata.jpeg[metadata.jpeg.length - 1];
 
+  const image_alignment = image.align ? `align-${image.align}` : "";
+
   const picture = `\n\n<picture>
   ${Object.values(metadata).map(imageFormat => {
-    return `<source type="${imageFormat[0].sourceType}" srcset="${imageFormat.map(entry => entry.srcset).join(', ')}" sizes="${sizes}">`;
+    return `<source type="${imageFormat[0].sourceType}" srcset="${imageFormat.map(entry => entry.srcset).join(', ')}" sizes="100vw">`;
   }).join('\n')}
     <img
       src="${lowsrc.url}"
+      class="image ${image_alignment}"
       width="${highsrc.width}"
       height="${highsrc.height}"
-      alt="${alt}"
+      alt="${image.alt}"
       loading="lazy"
       decoding="async">
   </picture>\n\n`;

source/_includes/layouts/post.njk

@@ -19,11 +19,7 @@
     <section class="container container-wide feature-image" aria-label="feature image">
       <div class="container feature-image-inner">
         <figure>
-          {%- if feature.flickr -%}
-            {%- image feature.file, feature.alt, feature.flickr -%}
-          {%- else -%}
-            {%- image feature.file, feature.alt -%}
-          {%- endif -%}
+          {%- image src=feature.file, alt=feature.alt -%}
           {%- if feature.credit -%}
             <figcaption class="bg-foreground">Photo credit: <a href="{{- feature.credit.link -}}">{{- feature.credit.name -}}</a></figcaption>
           {%- endif -%}

source/_sass/utility/_images.scss

@@ -0,0 +1,21 @@
+@use 'include-media' as *;
+
+.image {
+  width: var(--image-width, min(400px, 100%));
+
+  @include media('>=tablet') {
+    &[class*=align] {
+      --image-width: min(40%,400px);
+
+      // Assume that `left` align is the default.
+      float: var(--image-align, left);
+      margin-inline: var(--image-align-space, 0 2rem);
+      margin-block-end: 2rem;
+    }
+
+    &.align-right {
+      --image-align: right;
+      --image-align-space: 2rem 0;
+    }
+  }
+}

source/_sass/utility/_index.scss

@@ -3,6 +3,7 @@
 @use 'display';
 @use 'flex-items';
 @use 'grid';
+@use 'images';
 @use 'lists';
 @use 'sidebar';
 @use 'stacked';

source/blog/post/2022-09-05/01.md

@@ -7,7 +7,6 @@ teaser: I've been planning this trip for over three years, and now it's nearly h
 feature:
   file: https://live.staticflickr.com/3712/9104193151_f9e22e4d4d_o.jpg
   alt: A Lincoln Highway road marker at the western terminus, at the Legion of Honor in San Francisco.
-  flickr: true
   credit:
     name: Seth Morabito
     link: https://www.flickr.com/photos/twylo/9104193151/

source/blog/post/2022-09-18/01.md

@@ -30,7 +30,7 @@ I've been keeping in mind that there will very most likely be long sections of t
 
 But... this is only the food from the cooler! I've also got a huge bag full of veggie straws, cheeze pretzels, orange chips, toasted corn, rice cakes, garlic pretzels, Majool dates, and dried apricots.
 
-{%- image "https://live.staticflickr.com/65535/52367542259_18dd82faab_o.jpg", "Laird's Aloha Oatmac and Kenko smoothies", true -%}
+{%- image src="https://live.staticflickr.com/65535/52367542259_18dd82faab_o.jpg", alt="Laird's Aloha Oatmac and Kenko smoothies" -%}
 
 Earlier this year, I wasn't feeling well one day, and as I lay on the couch I scrolled through Instagram. As usual, there were 87 million ads, but the one for kencko stuck out to me, and before I knew it I was hitting "pay now". kencko makes powdered smoothie packs, with each individual flavor jammed with fruits and vegetables. Mix with water or milk, and there's a beverage! I figured they'd work for road trip quick breakfast and that trying them out wouldn't hurt. Whelp, now I've got a subscription and the boxes keep coming every month.