eleventy-img icon indicating copy to clipboard operation
eleventy-img copied to clipboard

Feature request: Ability to wrap output in a `<figure>` tags.

Open Nooshu opened this issue 4 months ago • 0 comments

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 ![This is the alt text](path/to/the/image.jpg "This is the **caption**")

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.

Nooshu avatar Oct 08 '24 19:10 Nooshu