In the first post in this series I promised I'd write in a future post about automating social media images for blog posts, and that day has now arrived 🎉 . What started off as a seemingly simple additional feature ultimately turned into an npm package for a CLI app - but let's not get ahead of ourselves, I'll come to that in a moment.

The problem

I gave some background on what I wanted to do with images in my first post about Eleventy. I wanted to reduce file size and improve loading times, and prioritise the real content of posts: the text. But I also recognise that an embedded link on social media is much more likely to attract attention and interest if it has a relevant image.

Blogging tools like WordPress and Ghost generally take the 'feature image' or, failing that, the first image in a post if there is one, and inject that into Open Graph and Twitter meta tags in the <head> of the page. We explored this process with other types of metadata like the title and subject/s of a post, in Going Static Part 1. Both Open Graph and Twitter Cards have a meta tags for an image as well as a separate one for a description of the image (as opposed to the description of the article). The description is turned into alt text when a link is embedded in Twittter, Facebook, Mastodon or something else that uses Open Graph, enabling people browsing with screen readers to 'see' the embedded image. Taking this full circle a bit, when I made my last theme for Ghost and my WordPress theme for the newCardigan website I tried to pull the existing alt text from post feature images into the Open Graph and Twitter Card image description tags automatically, but I couldn't work out how to do it.

With Eleventy, I have a lot more control over how everything is put together. What I wanted to do was, conceptually, fairly straightforward:

1. Use an API to programatically retrieve a URL for a freely-licensed image for each post, based on relevant keywords
2. Inject that image url into the Open Graph and Twitter meta tags
3. If possible, inject a description of the image into the Open Graph and Twitter image description tags.

Using the Unsplash API

Initially, being a librarian, I looked at Trove and British Library, but I concluded that I wasn't really going to get what I wanted, and my experience with APIs like these is that the images can be a bit hit and miss in terms of their suitability for blog post feature images. Indeed, the British Library image API is talked about all over the web, but none of the links seem to work anymore, and the British Library Labs project seems to have been reduced to three people so under-resourced that they have to document their existence in a Google Doc. As I explored my options, I realised that I'd already been using the service I wanted, because Ghost integrates with Unsplash. I'm not really sure about their business model, so it's likely I'll have to find something else in a few years when the vulture capital runs out, but in the meantime Unsplash offers high quality photos, freely licensed (attribution appreciated but not required), and accessible via a well-documented, free API. It was exactly what I wanted.

I wrote a simple nodejs script using inquirer to build frontmatter for a post (asking for title, subtitle, tags, and summary text), then call the Unsplash API using a randomly selected word from the title as the query, and insert the URL as the 'image'. The Unsplash has an incredibly convenient call for this purpose: you can call photos/random?query=puppies for a random photo of puppies, or photos/random by itself to just grab a completely random photo. This allows us to use the second option (without a query keyword) as a fallback if the first call comes back with nothing - which is entirely possible when using a random word as the query! The other cool thing about the Unsplash API is that it automatically returns a description of the photo, as well as three different image URLs depending on what size you want. Putting all of this together, I was able to make a script that will always return a photo - it just isn't guaranteed to always be relevant