jekyll-figure

A liquid tag for Jekyll that generates <figure> elements.

Installation

gems:
  - jekyll-figure

This plugin provides a liquid tag that enables you to generate a <figure> element. It takes optional caption and class parameters.

{% figure [caption:"Caption (markdown)"] [class:"class1 class2"] %}
Figure content (markdown)
{% endfigure %}

In simplest usage:

{% figure %}
Content
{% endfigure %}

<figure>
  <p>Content</p>
</figure>

If a figure contains an image (or multiple images), the surrounding <p> will be stripped:

{% figure %}
![Image](/path/to/image.jpg)
{% endfigure %}

<figure>
  <img src="/path/to/image.jpg" alt="Image" />
</figure>

You can provide a caption. Any markdown will be rendered:

{% figure caption:"*Markdown* caption" %}
Content
{% endfigure %}

<figure>
  <p>Content</p>
  <figcaption><em>Markdown</em> caption</figcaption>
</figure>

You can also provide a class name(es) for CSS styling:

{% figure caption:"A caption" | class:"classname" %}
Content
{% endfigure %}

<figure class="classname">
  <p>Content</p>
  <figcaption>A caption</figcaption>
</figure>

Finally, the caption parameter will accept liquid ouput markup:

{% figure caption:"{{ page.title }}" %}
Content
{% endfigure %}

<figure>
  <p>Content</p>
  <figcaption>The title of my post</figcaption>
</figure>