Thumbnail: jekyll

Using thumbnails

on
1 minute read

Carte Noire is designed to start each article with an all-white image as a thumbnail. These are created by adding a thumbnail parameter to the article’s YAML frontmatter. This thumbnail parameter is processed in one of two ways, images specified in _data/thumbnails.yml or using Font Awesome.

Images

To use your own custom images as a thumbnail you must upload them to a web available location (I use Imgur) and then you need to add the url to _data/thumbnail.yml with an associated keyword.

jekyll: "http://i.imgur.com/aRQcGSi.png"

You then add a thumbnail option to the article’s frontmatter and provide the keyword for that thumbnail.

thumbnail: jekyll

This allows you to re-use thumbnails across multiple articles without having to specify the url each time.

Font Awesome

If jekyll can’t find a corresponding image in your thumbnail.yml file then it will assume you want to use a Font Awesome icon instead. You can find the full list of Font Awesome icons here.

So for example if your article is about android and you want to use the android icon from font awesome you can just specify the following in your frontmatter.

thumbnail: android

Then in the future if you decide you want to use your own android icon you can just add it to _data/thumbnails.yml which will override it for all articles using the android thumbnail.

thumbnails, carte noire
comments powered by Disqus