Merge pull request #191 from adamwolf/multiple-size-lowsrc

Use srcset and sizes on img element in picture
11ty · Jan 15, 2024 · 6812731 · 6812731
2 parents ea73d0d + 0a6d0f9
commit 6812731
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 5 deletions.
diff --git a/generate-html.js b/generate-html.js
@@ -10,10 +10,11 @@ const LOWSRC_FORMAT_PREFERENCE = ["jpeg", "png", "gif", "svg", "webp", "avif"];
 /*
   Returns:
   e.g. { img: { alt: "", src: "" }
+  e.g. { img: { alt: "", src: "", srcset: "", sizes: "" } }
   e.g. { picture: [
     { source: { srcset: "", sizes: "" } },
     { source: { srcset: "", sizes: "" } },
-    { img: { alt: "", src: "" } },
+    { img: { alt: "", src: "", srcset: "", sizes: "" } },
   ]}
  */
 function generateObject(metadata, attributes = {}) {
@@ -96,7 +97,7 @@ function generateObject(metadata, attributes = {}) {
 
   let children = [];
   values.filter(imageFormat => {
-    return imageFormat.length > 0 && (lowsrcFormat !== imageFormat[0].format || imageFormat.length !== 1);
+    return imageFormat.length > 0 && (lowsrcFormat !== imageFormat[0].format);
   }).forEach(imageFormat => {
     if(imageFormat.length > 1 && !attributes.sizes) {
       // Per the HTML specification sizes is required srcset is using the `w` unit
@@ -119,8 +120,31 @@ function generateObject(metadata, attributes = {}) {
     });
   });
 
+  /*
+  Add lowsrc as an img, for browsers that don’t support picture or the formats provided in source
+
+  If we have more than one size, we can use srcset and sizes.
+  If the browser doesn't support those attributes, it should ignore them.
+   */
+  let imgAttributes = Object.assign({}, attributesWithoutSizes);
+  if (Object.values(lowsrc).length > 1) {
+    if (!attributes.sizes) {
+      // Per the HTML specification sizes is required srcset is using the `w` unit
+      // https://html.spec.whatwg.org/dev/semantics.html#the-link-element:attr-link-imagesrcset-4
+      // Using the default "100vw" is okay
+      throw new Error(missingSizesErrorMessage);
+    }
+
+    let srcsetAttrValue = Object.values(lowsrc).map(entry => entry.srcset).join(", ");
+    if (srcsetAttrValue) {
+      imgAttributes.srcset = srcsetAttrValue;
+
+      imgAttributes.sizes = attributes.sizes;
+    }
+  }
+
   children.push({
-    "img": attributesWithoutSizes
+    "img": imgAttributes
   });
 
   return {

diff --git a/test/test-markup.js b/test/test-markup.js
@@ -72,8 +72,7 @@ test("Image markup (two widths)", async t => {
     sizes: "100vw",
   }), [`<picture>`,
     `<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">`,
+    `<img alt="" src="/img/KkPMmHd3hP-200.jpeg" width="400" height="266" srcset="/img/KkPMmHd3hP-200.jpeg 200w, /img/KkPMmHd3hP-400.jpeg 400w" sizes="100vw">`,
     `</picture>`].join(""));
 });