Sean Hammond, Aug 2019

Figures

The theme has support for the <figure> element. For example you can put an image inside a figure like this:

<figure>
  <img src="/jekyll-theme-oatcake/assets/images/grass.jpg" alt="A photo of some grass">
</figure>

To include a caption with your figure use the <figcaption> tag:

<figure>
  <img src="/jekyll-theme-oatcake/assets/images/grass.jpg" alt="A photo of some grass">
  <figcaption>A photo of some grass</figcaption>
</figure>

That’ll produce this output:

A photo of some grass

Code Figures

Figures aren’t just for images. You can put anything in a figure. For example here’s a code figure:

# Public: Fetch the logger instance for this Jekyll process.
#
# Returns the LogAdapter instance.
def logger
  @logger ||= LogAdapter.new(Stevenson.new, (ENV["JEKYLL_LOG_LEVEL"] || :info).to_sym)
end

A method from the Jekyll source code

Multi-Line Figure Captions

Here’s what a multi-line figure caption looks like:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

When to Use Figures

According to the HTML spec on <figure> a figure is supposed to be “self-contained” content (such as an image, code snippet, table, video, or something) that is:

referred to from the main content of the document, but that could, without affecting the flow of the document, be moved away from that primary content, e.g. to the side of the page, to dedicated pages, or to an appendix.

If the particular location of an image or other content within the document is important to the flow of the document then you should just use a standard <img>, <pre><code>, or other content instead of a figure.