Puppy dog images courtesy of Unsplash
The Eleventy Plugin Image Caption plugin adds a couple of shortcodes to an 11ty that makes it easier to add numbered captions to images plus reference those captions elsewhere on a page. This page uses the plugin, so you can see what it looks like in operation.
Here's a cute image of a dog sitting with a flower in her mouth.
Image 1: Dog with Flower
Photo by Richard Brutyo on Unsplash
Notice the caption on the image above, the bold portion is generated based on the image number and the caption label configured when the site loads the plugin. The regular text to the right is passes as a parameter to the shortcode. You can configure the plugin to disable the bold label if you want.
Note: When you run this 11ty site in serve mode, the caption will show image #; when you run an 11ty site in development mode, every refresh of the app increments the image numbers. For that reason, the plugin returns generic text in that scenario.
Lets look at another capability of the plugin, referencing images by caption index later in the post. Here's a picture of a cute puppy laying on the ground.
Image 2: A puppy lying down on the ground
I personally think Image 1 is cuter than Image 2, don't you?
Finally, here's another image of a puppy. I don't have another plugin use case to show you, I just like looking at pictures of puppys.
Image 3: A puppy sitting on some grass
Photo by PartTime Portraits on Unsplash