eleventy-img
eleventy-img copied to clipboard
Feature request: Ability to wrap output in a `<figure>` tags.
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.