The theme has support for the <figure>
element. For example you can put an
image inside a figure like this:
<figure>
<img src="{{ "/assets/images/grass.jpg" | relative_url }}" alt="A photo of some grass">
</figure>
To include a caption with your figure use the <figcaption>
tag:
<figure>
<img src="{{ "/assets/images/grass.jpg" | relative_url }}" alt="A photo of some grass">
<figcaption>A photo of some grass</figcaption>
</figure>
That'll produce this output:
A photo of some grassFigures 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
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](https://example.com) cupidatat non proident, _sunt in culpa_ qui officia deserunt mollit anim id est laborum.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.