Migrate linked figures in blog posts

[beechnut]

Many of the images in the blog are <figure>s surrounded by <a> tags with links to the image being displayed. (example)

#3855 will change <img> tags, but it's not in scope for that ticket to handle the links.

Acceptance criteria (choose 1)

Beta Give feedback

1. Minimum scope: change all the href="{{site.baseurl}}"s to 11ty link format {{ "quoted path" | url }}.
2. Better scope: create a shortcode like {{ linkedImage "path to src", "alt text" }} and replace all the linked images in the blog posts with this shortcode

[bpdesigns]

@beechnut is this something you would like to take on or have someone else work on?

[beechnut]

@bpdesigns I'm unassigning myself so someone else can take this during this next increment. I'll still be up for helping / reviewing PRs.

[beechnut]

I tried working on this, and it was very difficult to set up as a shortcode. Here's what I've discovered, leaving this for posterity.

When I tried to make a shortcode, my plan was to do something like this:

// config/shortcodes/linkedFigure.js
const imageWithClass = require('./imageWithClass')

module.exports = async (src, alt) => {
  return `<figure>
            <a href="{{ ${ src } | url }}">            // use the URL filter to get the asset URL
              ${ await imageWithClass(src, '', alt) }  // reuse this shortcode for the image part 
            </a>
          </figure>`
}

Things quickly went awry:

• Liquid doesn't process the output of your shortcode — so the href in the link got included literally, like the URL would end up /path/to/blog/post/{{ assets/images/image-for-this-post.jpg | url}}
• I had to refactor out the part of imageWithClass where it's getting the URL to the asset, so I could use it instead.
• Even though I was now reusing code, there's a part setting pathPrefix, which is duplicative of config we have in 11ty. However, I have no idea how to access that config from 11ty, because the build system largely appears closed to reads.
• The processed images are all going to _site/img, when it should be going to a subfolder of _site/assets/. When I tried to change this, it generated the images in the right location, but then couldn't load them. I'm not sure if there's another setting somewhere about this.
• Animated gifs broke entirely. Some posts, such as one on the DOJ Civil Rights reporting portal, have animated gifs showing walkthroughs. Processing these images with 11ty/image caused the images to become static, single-frame gifs.
• I found an option set in the 11ty docs called sharpOptions, which appears to be a way to pass options to the underlying library. Passing animated: true causes the overall build time to triple, from 30s to 120–140s, though it does then generate animated gifs.
• I set up the shortcode so animated: true would only get included in the options if the image being processed was a gif. This had no effect on build times — even one single animated gif triples the build time.