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 scaling images in Jekyll webpages

HTML5 Jekyll figure

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

This HTML5 put right into 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

You can do this with nested figures–see example Jekyll subfigure code–right click, view source

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.

<figure class="">   <img src=

  "https://www.scivision.co/assets/images/3birds.jpg"

alt="three birds on a branch eating berries">
  
<figcaption>Three birds on a branch eating berries near Newington, CT. Photo by John Doe.

</figcaption>

</figure>

Tags:

Categories:

Updated: