Eleventy Plugin Image Caption Simple

Posted: Saturday, August 1, 2026 at 06:36 PM | Categories: Eleventy

When I coded the Eleventy Plugin Image Caption plugin, I did it for my specific requirements:

1. Auto numbered image captions (Figure 1: A boy with a dog)
2. Automated reference to images on the page (see Figure 1)

I did it because I like those capabilities in Microsoft Word and I wanted them available to me in an Eleventy site. By the way, I wrote about that plugin in Eleventy Auto-numbering Image Captions.

Immediately after I published it, I started thinking about how other site owners would use it and I realized that the plugin wasn't...simple enough for use cases where the site didn't need to reference image captions by reference.

I set about updating the plugin, adding an imageCaptionSimple shortcode to it that simply added a caption, but didn't store a reference so the imageReference shortcode could refer to it later. I quickly realized though that that approach was just complicating things more since the captions wouldn't work if you intermingled them (used both imageCaption and imageCaptionSimple on the same page).

So, I abandoned those changes and created a new plugin called Eleventy Plugin Image Caption Simple (npm).

This plugin takes a much simpler approach, it creates a single shortcode called imageCaptionSimple that just takes a single parameter, the caption to add to the page:

{% imageCaptionSimple "<caption-text>" %}

For example, something like this:

{% imageCaptionSimple "A boy with a dog" %}

It creates a paragraph with the following text:

Image 1: A boy with a dog

I hope this plugin is a little more useful to a wider audience.

Header image: Eleventy Project Home Page.