If you’ve made the switch from WordPress to Jekyll (It’s the right choice for some), then you may have noticed a few things missing that you would have otherwise enjoyed in a standard WP installation.

Jekyll, being a “blog-aware” static site generator, supports a host of blogging features standard - like tags and categories. What you may not know is that Jekyll, by its nature, is extensible. This is good news for those of us who want featured images.

Just as you can create and declare your own tags and schema in XML, you can create your own variables in Jekyll to be used however you want. This brings us to a really simple way to add featured images to our Jekyll blog.

In every Jekyll blog there is a Front Matter section at the very top declared in YAML. YAML is simply a data serialization language (much like JSON) that allows you to transmit data between files. The Jekyll compiler takes whatever YAML variables you set up and then parses them in code.

This is super handy for our purposes because it allows us to extend Jekyll without ruby gems or plugins. Just some good, ol’ fashioned “hacking” away.

Within your YAML Front Matter of your Jekyll blog, declare a new variable. It can be anything you want. You could go with “featured-image”, “feature”, “hero”, or even “dxlr”. I went with “banner” for mine.

How to add a featured image to Jekyll

u c wat i did thar?

So step number one is to declare a variable to hold the name of your featured image in the YAML front matter of a post. You don’t have to worry about declaring this variable anywhere else. Jekyll will simply ignore a variable if it can’t find anything to do with it, and it won’t miss it if another post doesn’t have it (I’ll touch on default features at the end of the post).

Your front matter should look something like this:

layout: blog (or whatever)
title: "Blog Post Title"
dxlr: some-image-name.jpg

Now, you get your featured image into your template by simply calling { page.whatever-you-named-your-shit } within your image tag. Or wherever.

Example Code!

<img src="{ SITE.URL }/PATH/TO/{ page.(YOUR THINGY'S NAME GOES HERE) }">
All of my images are stored at base_dir > /images/, for example

If you want to get creative, you can add your featured image as a background using a style attribute (as I did). And since you’re dealing with direct HTML, you can add classes and fancy that shit up with some CSS (just make sure you embed your code responsibly).

This couldn’t be easier. Follow the (two) steps above to get featured images, then just add your image variable to your _config.yml file:

Default Featured Images for Jekyll

Jekyll will now fall back on that value for your featured image variable if it can’t find one in the post. Easy as pie.