Footnotes in Image Caption via Liquid Expression?

Help
1

I am trying to use footnotes in image captions. My hack for captions is with an _includes/img.html file which serves up the file path and caption via liquid tags.

# _layouts/img.html
<figure>
    <img src="{{site.url}}/{{page.img_path}}/{{ include.file }}" alt="{{ include.caption}}">  
    <figcaption>{{ include.caption }}</figcaption>
</figure>

(I am defining img_path in the YAML front matter)

In the markdown I have

{% include img.html file="core_gap_effect.gif" caption="An air gap can be introduce to extend the linear region of the B-H curve at the expense of reduced permeability[^footnote1]" %}

but of course the [^footnote1] is only rendered as raw text.

Is there a workaround to get the footnotes to render inside this liquid expression?

I’m also open to changing my caption workflow if there are other recommendations, plugins, etc. Currently I am using a pretty basic theme (leonids) that doesn’t seem to support it out of the box.

2

This works, but no longer uses <figure> <figcaption>

In the markdown (note the extra line after the image reference)

![alt text][path/to/img]

{:.newimgclass}
Image caption text with footnote[^footnote1]

and then apply the styling that you want e.g.

# in main.scss
.newimgclass {
    text-align: center;
    font-style: italic;
}

This renders with the image in its own figure tag and the caption afterwards but looks fine to me, and most importantly the footnote renders.

3

You could also try adding the markdownify filter your caption. This in theory should process that text as Markdown and convert the footnote into appropriate HTML.

<figcaption>{{ include.caption | markdownify }}</figcaption>
1 Like
4

I tried using {{ include.caption | markdownify }} filter to parse the caption. However, the footnote is still rendered as raw text. :confused:

Somehow Jekyll just skips the footnote in <figcaption>.

Is there any way to add footnote within <figcaption> without reverting to using separate <img> and <p>?

1 Like
5

@kei

I found a solution from this stackoverflow post.

<figure>
    <img src="path" />
    <figcaption>
        <span markdown='1'>
            Some caption[^2]
        </span>
    </figcaption>
</figure>

At least for me, adding the <span markdown='1'> worked.