Featured images

Internet

UPDATE: I’ve since reverted back to not using featured images. Too many drawbacks, trivial visual benefit. Not that I’m fickle.

Yes, that's what my site looked like in 2006. I'll admit, I do miss dark themes terribly. But I suppose the public have spoken.

Back on topic. The Apple Dictionary.app defines “observant” as:

a railway carriage with large windows designed to provide a good view of passing scenery.

Wait, that was the definition of observation car. Never mind, point is I could change the letter spacing of my font here by 0.5 pixels, and @JamieJakov would notice.

Since about 2008, I've been including 500px wide images as the heading on each post. I'd long wanted them to be the heading for posts, but I never had the time nor inclination to figure out how to achieve this in WordPress. Given the software had only just been given tag support, let alone featured images, it seemed more trouble than it was worth.

Jekyll and Liquid markup make this trivial. Using a terrible Perl script, I extracted each of the 500px image URLs, added them as a separate "featured" front-matter field, then defined the markup in Liquid to render the background headers with the aforementioned image.

There are still some lingering bugs:

  • RSS doesn't show images anymore. Given this is also entirely defined with Liquid, it should be simple enough to include the post.featured field inline above post.content, as it would have been displayed on the site.

  • The mobile layout doesn't scale properly anymore. This I'm not sure how to fix; it'll probably involve even more inglorious CSS hacks. Yes HTML for layout was terrible, but CSS truly is an awful language.

I'm not sure the execution of featured images is great here, but just fun to experiment a little :).

Author bio and support

Me!

Ruben Schade is a technical writer and infrastructure architect in Sydney, Australia who refers to himself in the third person. Hi!

The site is powered by Hugo, FreeBSD, and OpenZFS on OrionVM, everyone’s favourite bespoke cloud infrastructure provider.

If you found this post helpful or entertaining, you can shout me a coffee or send a comment. Thanks ☺️.