Eleventy Auto-numbering Image Captions

Posted: Friday, July 24, 2026 at 06:59 AM | Categories: Eleventy

One of the things I like about Microsoft Word is the ability to caption images with an auto-numbered label. Once you do that, its easy to insert a reference to the image file elsewhere in the document.

While working in a new Eleventy (11ty) site, I realized that I missed that capability and set about implementing it. The result of this work is the Eleventy Image Caption plugin that I published today. I built a sample site that demonstrates the plugin's capabilities and included it in the plugin repository and available here (on Netlify).

The plugin allows you to do two things:

• Add a auto-numbering label and caption to an image.
• Add a reference to one of the captioned images elsewhere in a page.

The plugin is configurable, so you can easily:

• Set the label text used in the caption
• Bold (strong) or not bold the label
• Set the CSS class assigned to the caption paragraph.

Let me show you some examples...

Below is a picture from a recent vacation, to caption it with a label and image number, all I have to do is add a liquid tag immediately following the picture:

{% imageCaption "/images/2026/vacation-feet.jpg" "Vacationing Feet" %}

The plugin adds a paragraph tag with a label, number, and provided caption.

Image 1: Vacationing Feet

Say for example that I want to refer to an image later in the document. To do that, add a different shortcode:

{% imageReference "/images/2026/vacation-feet.jpg" %}

This shortcode returns the label and image number for the specified image file. Here's an example:

Yes, the feet you see in Image 1 are mine.

The plugin has a couple of small limitations, but it works really well within those limitations. For me, this plugin is most useful for tutorials, especially long ones, where you may want to refer to an image later on a page and not need to describe it to the reader, just use an image caption and reference and you're all set.

Next and/or Previous Posts

<< Free Password Generator for Windows Ridiculous Delivery Status Notification >>

Header image: Eleventy Project Home Page.