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 ${Object.values(metadata).map(imageFormat => { - return ``; + return ``; }).join('\n')} ${alt} \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 @@
- {%- 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 -%}
Photo credit: {{- feature.credit.name -}}
{%- endif -%} diff --git a/source/_sass/utility/_images.scss b/source/_sass/utility/_images.scss new file mode 100644 index 00000000..7a3c7ada --- /dev/null +++ b/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; + } + } +} diff --git a/source/_sass/utility/_index.scss b/source/_sass/utility/_index.scss index 671c161e..2a1e34fd 100644 --- a/source/_sass/utility/_index.scss +++ b/source/_sass/utility/_index.scss @@ -3,6 +3,7 @@ @use 'display'; @use 'flex-items'; @use 'grid'; +@use 'images'; @use 'lists'; @use 'sidebar'; @use 'stacked'; diff --git a/source/blog/post/2022-09-05/01.md b/source/blog/post/2022-09-05/01.md index c19a25b7..4f4bf890 100644 --- a/source/blog/post/2022-09-05/01.md +++ b/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/ diff --git a/source/blog/post/2022-09-18/01.md b/source/blog/post/2022-09-18/01.md index f1779b82..b46d22f1 100644 --- a/source/blog/post/2022-09-18/01.md +++ b/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.