From 1d73a812ff563bd757f394080e517a2829068293 Mon Sep 17 00:00:00 2001
From: Reed Piernock <18013388+reedcodes@users.noreply.github.com>
Date: Wed, 21 Sep 2022 20:22:23 -0400
Subject: [PATCH] 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 | 23 +++++++++++++----------
source/_includes/layouts/post.njk | 6 +-----
source/_sass/utility/_images.scss | 21 +++++++++++++++++++++
source/_sass/utility/_index.scss | 1 +
source/blog/post/2022-09-05/01.md | 1 -
source/blog/post/2022-09-18/01.md | 2 +-
6 files changed, 37 insertions(+), 17 deletions(-)
create mode 100644 source/_sass/utility/_images.scss
diff --git a/source/_config/shortcodes/image.js b/source/_config/shortcodes/image.js
index b6b0922b..086eb71e 100644
--- a/source/_config/shortcodes/image.js
+++ b/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\n\n`;
diff --git a/source/_includes/layouts/post.njk b/source/_includes/layouts/post.njk
index 529fed37..8b8e2696 100644
--- a/source/_includes/layouts/post.njk
+++ b/source/_includes/layouts/post.njk
@@ -19,11 +19,7 @@