Having only relatively recently started to blog using Jekyll, I’ve only just come across the problem of trying to add captions to images - sans plugin.

Fortunately Jekyll is very easily extensible with some straight-forward HTML/CSS. Of course, following the framework’s separation of concerns, we need to do three things: Add markup to our _includes folder, update our stylesheet, and finally include a reference to our markup in the blog post file.

In the _includes folder, I created a new file called image.html, which includes,

with a CSS class center with properties adjusted to taste.

Turning to the blog post, I want to add,

{% include image.html url="/path/image.png" description="Caption" %}


making use of Jekyll’s include tag. Everything should be self-explanatory, although it should be said that I’ve used a relative path to the image file as prefxing url with site.BASE_PATH led to a Liquid Exception. Et voilà,

and of course we can add any sort of customisation from here.

All the best,

Tom