Better figure captions in Jekyll using HTML5

Jekyll static webpage generation allows seamless mixing of HTML5, Markdown and Liquid syntax. Here are a couple ways to have beautifully auto-scaling images in Jekyll webpages

HTML5 Jekyll figure

<figure>
<img alt="three birds on a branch" src="/assets/images/3birds.jpg" style="width:50%">
<figcaption>Three birds on a branch near Newington, CT. By John Doe.</figcaption>
</figure>

This HTML5 in your Jekyll Github Flavored Markdown files will produce a beautifully scaled and captioned image, with the img alt tag for SEO and screen readers.

Subfigures in Jekyll with HTML5

HTML5 subfigures are created via nested figures.

HTML5 Subfigure Example

Liquid Jekyll figure

With Minimal Mistakes Jekyll template, Liquid can be used to insert figures. As of the time of this writing, no width parameter is known to exist.

{%
include figure 
image_path="/assets/images/3birds.jpg" 
alt="three birds on a branch eating berries" 
caption="Three birds on a branch eating berries near Newington, CT. Photo by John Doe."
%}

Tags:

Categories:

Updated:

Leave a Comment