Footnotes in Image Caption via Liquid Expression?

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.

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.

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

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>?