figure.html

{{/* Create a caption and a longer description for an image, video, etc.

A caption appears immediately below the element, which can be expanded to reveal
a longer text description.

Input:
caption - A short description for the image. Should not duplicate the Alt text.
description (optional) - A longer description of the image with additional
                         detail.

Usage Example:
{{% figure
    caption="Apples are harvested in the fall."
    description="A photo of a boy climbing a ladder to pick ripe, red apples on
                 a tree. A older man is holding the ladder at the bottom. Both
                 of them are smiling. On the ground there is a large basket of
                 apples which have already been picked. There are 4 other apple
                 trees nearby. The sky is blue." %}}
    ![A photo of apples being picked at an apple orchard.](/images/apple.png)
{{% /figure %}}
*/}}
{{ $caption := .Get "caption" }}
{{ $description := .Get "description" }}
<figure role="group" aria-describedby="caption-{{ $caption | md5 }}">
    {{ .Inner }}
    <figcaption id="caption-{{ $caption | md5 }}">
        {{ if $description }}
        <details>
            <summary class="caption">
                {{ $caption | markdownify }}
            </summary>
            <p>
                {{ $description | markdownify }}
            </p>
        </details>
        {{ else }}
        <span class="caption">
            {{ $caption | markdownify }}
        </span>
        {{ end }}
    </figcaption>
</figure>