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

<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 50% width scaled and captioned image, with the img alt tag for SEO and screen readers.

HTML5 Subfigures

Jekyll HTML5 subfigures are created via nested figures.

HTML5 Subfigure Example

Liquid

With Minimal Mistakes Jekyll template, Liquid can be used to insert figures. This Liquid method is specific to the Minimal Mistakes Jekyll template, however other template authors may have included similar convenience functions. 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