Feature request: Ability to wrap output in a `<figure>` tags.
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 467
- Forks
- 65
- PR merge metrics
- No merged PRs in 30d
Description
It would be fantastic if there was the option to wrap the standard <picture> element from the eleventyImageTransformPlugin in a <figure> tags and allow developers to post image captions using <figcaption>.
Proposed code:
Input

Output
<figure>
<picture>
<source type="image/avif" srcset="/.11ty/image/?src=...">
<source type="image/webp" srcset="/.11ty/image/?src=...">
<img loading="lazy" decoding="async" src="/.11ty/image/?src=..." alt="alt text here" width="123" height="321">
</picture>
<figcaption>This is the <strong>caption</strong></figcaption>
</figure>
Looping in @nhoizey as I adapted his gist example here that he uses with his eleventy-plugin-images-responsiver plugin here.
Update: Also, I should have noted that the <figure> element would only be present if a caption was given in the markdown snippet.
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start at the eleventyImageTransformPlugin entry point and trace how its standard picture output is generated; the linked gist shows a related figure and caption approach. Done means captioned Markdown produces figure and figcaption elements, while input without a caption continues to produce only the picture element.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- web-dev
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 42/100