Fixes #68 and fixes #63

11ty · Feb 14, 2021 · 31975ef · 31975ef
1 parent ed25158
commit 31975ef
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 19 deletions.
diff --git a/generate-html.js b/generate-html.js
@@ -46,8 +46,8 @@ function generateHTML(metadata, attributes = {}, options = {}) {
   }
 
   attributes.src = lowsrc[0].url;
-  attributes.width = lowsrc[0].width;
-  attributes.height = lowsrc[0].height;
+  attributes.width = lowsrc[lowsrc.length - 1].width;
+  attributes.height = lowsrc[lowsrc.length - 1].height;
 
   let attributesWithoutSizes = objectToAttributes(attributes, ["sizes"]);
   let imgMarkup = `<img ${attributesWithoutSizes}>`;
@@ -65,7 +65,7 @@ function generateHTML(metadata, attributes = {}, options = {}) {
     return `<img ${attributesWithoutSizes}${srcsetAttr}${sizesAttr}>`;
   }
 
-  let isInline = options.whitespaceMode === "inline";
+  let isInline = options.whitespaceMode !== "block";
   let markup = ["<picture>"];
   values.filter(imageFormat => {
     return lowsrcFormat !== imageFormat[0].format || imageFormat.length !== 1;

diff --git a/test/test-markup.js b/test/test-markup.js
@@ -9,10 +9,7 @@ test("Image markup (defaults)", async t => {
 
   t.is(generateHTML(results, {
     alt: ""
-  }), `<picture>
-  <source type="image/webp" srcset="/img/97854483-1280.webp 1280w">
-  <img alt="" src="/img/97854483-1280.jpeg" width="1280" height="853">
-</picture>`);
+  }), `<picture><source type="image/webp" srcset="/img/97854483-1280.webp 1280w"><img alt="" src="/img/97854483-1280.jpeg" width="1280" height="853"></picture>`);
 });
 
 test("Image markup (two widths)", async t => {
@@ -23,11 +20,7 @@ test("Image markup (two widths)", async t => {
 
   t.is(generateHTML(results, {
     alt: ""
-  }), `<picture>
-  <source type="image/webp" srcset="/img/97854483-200.webp 200w, /img/97854483-400.webp 400w">
-  <source type="image/jpeg" srcset="/img/97854483-200.jpeg 200w, /img/97854483-400.jpeg 400w">
-  <img alt="" src="/img/97854483-200.jpeg" width="200" height="133">
-</picture>`);
+  }), `<picture><source type="image/webp" srcset="/img/97854483-200.webp 200w, /img/97854483-400.webp 400w"><source type="image/jpeg" srcset="/img/97854483-200.jpeg 200w, /img/97854483-400.jpeg 400w"><img alt="" src="/img/97854483-200.jpeg" width="400" height="266"></picture>`);
 });
 
 test("Image markup (two formats)", async t => {
@@ -38,10 +31,7 @@ test("Image markup (two formats)", async t => {
 
   t.is(generateHTML(results, {
     alt: ""
-  }), `<picture>
-  <source type="image/avif" srcset="/img/97854483-1280.avif 1280w">
-  <img alt="" src="/img/97854483-1280.webp" width="1280" height="853">
-</picture>`);
+  }), `<picture><source type="image/avif" srcset="/img/97854483-1280.avif 1280w"><img alt="" src="/img/97854483-1280.webp" width="1280" height="853"></picture>`);
 });
 
 test("Image markup (one format)", async t => {
@@ -66,7 +56,7 @@ test("Image markup (one format, two widths)", async t => {
   t.is(generateHTML(results, {
     alt: "",
     sizes: "100vw"
-  }), `<img alt="" src="/img/97854483-100.jpeg" width="100" height="66" srcset="/img/97854483-100.jpeg 100w, /img/97854483-200.jpeg 200w" sizes="100vw">`);
+  }), `<img alt="" src="/img/97854483-100.jpeg" width="200" height="133" srcset="/img/97854483-100.jpeg 100w, /img/97854483-200.jpeg 200w" sizes="100vw">`);
 });
 
 test("Image markup (throws on invalid object)", async t => {
@@ -84,6 +74,9 @@ test("Image markup (defaults, inlined)", async t => {
   t.is(generateHTML(results, {
     alt: ""
   }, {
-    whitespaceMode: "inline"
-  }), `<picture><source type="image/webp" srcset="/img/97854483-1280.webp 1280w"><img alt="" src="/img/97854483-1280.jpeg" width="1280" height="853"></picture>`);
+    whitespaceMode: "block"
+  }), `<picture>
+  <source type="image/webp" srcset="/img/97854483-1280.webp 1280w">
+  <img alt="" src="/img/97854483-1280.jpeg" width="1280" height="853">
+</picture>`);
 });