Fixes #197

11ty · Jan 15, 2024 · 8a5676a · 8a5676a
1 parent 46fe087
commit 8a5676a
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 1 deletion.
diff --git a/generate-html.js b/generate-html.js
@@ -148,7 +148,9 @@ function generateHTML(metadata, attributes = {}, options = {}) {
     if(!Array.isArray(obj[tag])) {
       markup.push(mapObjectToHTML(tag, obj[tag]));
     } else {
-      markup.push(`<${tag}>`);
+      // <picture>
+      markup.push(mapObjectToHTML(tag, options.pictureAttributes || {}));
+
       for(let child of obj[tag]) {
         let childTagName = Object.keys(child)[0];
         markup.push((!isInline ? "  " : "") + mapObjectToHTML(childTagName, child[childTagName]));

diff --git a/test/test-markup.js b/test/test-markup.js
@@ -256,3 +256,23 @@ test("Image markup (escaped `alt`)", async t => {
     alt: "This is a \"test"
   }), `<img alt="This is a &quot;test" src="/img/KkPMmHd3hP-1280.jpeg" width="1280" height="853">`);
 });
+
+test.only("Image markup (<picture> with attributes issue #197)", async t => {
+  let results = await eleventyImage("./test/bio-2017.jpg", {
+    dryRun: true,
+    widths: [200,400]
+  });
+
+  t.is(generateHTML(results, {
+    alt: "",
+    sizes: "100vw",
+  }, {
+    pictureAttributes: {
+      class: "pic"
+    }
+  }), [`<picture class="pic">`,
+    `<source type="image/webp" srcset="/img/KkPMmHd3hP-200.webp 200w, /img/KkPMmHd3hP-400.webp 400w" sizes="100vw">`,
+    `<source type="image/jpeg" srcset="/img/KkPMmHd3hP-200.jpeg 200w, /img/KkPMmHd3hP-400.jpeg 400w" sizes="100vw">`,
+    `<img alt="" src="/img/KkPMmHd3hP-200.jpeg" width="400" height="266">`,
+    `</picture>`].join(""));
+});