Mark Llobrera

Eleventy: Images Responsiver Markup

A quick follow-up on my previous post on Nicolas Hoizey’s Images Responsiver plugin: I noticed that the markup it generated was wrapping a <p> tag around <figure> elements. For example:

<figure class="cinemascope">
<img src="/img/DSCF1431.jpg?nf_resize=fit&amp;w=640" alt="Trees bathed in fog" title="Testing *Markdown* **captions**" class="" srcset="/img/DSCF1431.jpg?nf_resize=fit&amp;w=320 320w, /img/DSCF1431.jpg?nf_resize=fit&amp;w=560 560w, /img/DSCF1431.jpg?nf_resize=fit&amp;w=800 800w, /img/DSCF1431.jpg?nf_resize=fit&amp;w=1040 1040w, /img/DSCF1431.jpg?nf_resize=fit&amp;w=1280 1280w" sizes="(min-width: 650px) 850px, (min-width: 1000px) 1200px, 400px" data-pristine="/img/DSCF1431.jpg" loading="lazy">
Testing <em>Markdown</em> <strong>captions</strong>

Now, <img> is an inline element, so I’d expect that it would be wrapped in a paragraph tag. But <figure> is a block-level element, so I wanted a way to clean up that markup.

Within my images-responsiver-config.js file I noticed that the runAfterHook() method is where we check whether there’s a caption. If there’s a caption, the markup is generating using a <figure> element with a <figcaption> nested within, otherwise it defaults to a regular <img> tag. This is the section that actually swaps in the <figure> markup:

if (caption || zoom) {
const figure = document.createElement("figure");
// TODO: decide weither classes should be removed from the image or not
let figCaption = document.createElement("figcaption");
figCaption.innerHTML =
(caption ? caption : "") +
? `<p class="zoom">&#128269; See <a href="${imageUrl}">full size</a></p>`
: "");


I changed the last line to check whether the image element was wrapped in a paragraph tag:

if (image.parentNode.nodeName === "p") {

Now the <figure> elements sit properly on the same level as other block-level elements. A small thing, but now I don’t have to do additional CSS interventions to deal with extra wrapping element.