Fixes #234

Author: zachleat

src/image-attrs-to-posthtml-node.js

@@ -55,6 +55,11 @@ function convertToPosthtmlNode(obj) {
   return node;
 }
 
+function isValidSimpleWidthAttribute(width) {
+  // `width` must be a single integer (not comma separated). Don’t use invalid HTML in width attribute. Use eleventy:widths if you want more complex support
+  return (""+width) == (""+parseInt(width, 10));
+}
+
 async function imageAttributesToPosthtmlNode(attributes, instanceOptions, globalPluginOptions) {
   if(!attributes.src) {
     throw new Error("Missing `src` attribute for `@11ty/eleventy-img`");
@@ -69,18 +74,15 @@ async function imageAttributesToPosthtmlNode(attributes, instanceOptions, global
   }
 
   // overrides global widths
-  if(attributes[ATTR.WIDTHS]) {
-    if(typeof attributes[ATTR.WIDTHS] === "string") {
-      instanceOptions.widths = attributes[ATTR.WIDTHS].split(",").map(entry => parseInt(entry, 10));
-      delete attributes[ATTR.WIDTHS];
-    }
+  if(attributes.width && isValidSimpleWidthAttribute(attributes.width)) {
+    // Support `width` but only single value
+    instanceOptions.widths = [ parseInt(attributes.width, 10) ];
+  } else if(attributes[ATTR.WIDTHS] && typeof attributes[ATTR.WIDTHS] === "string") {
+    instanceOptions.widths = attributes[ATTR.WIDTHS].split(",").map(entry => parseInt(entry, 10));
   }
 
-  if(attributes[ATTR.FORMATS]) {
-    if(typeof attributes[ATTR.FORMATS] === "string") {
-      instanceOptions.formats = attributes[ATTR.FORMATS].split(",");
-      delete attributes[ATTR.FORMATS];
-    }
+  if(attributes[ATTR.FORMATS] && typeof attributes[ATTR.FORMATS] === "string") {
+    instanceOptions.formats = attributes[ATTR.FORMATS].split(",");
   }
 
   let options = Object.assign({}, globalPluginOptions, instanceOptions);

test/transform-test.mjs

@@ -422,4 +422,55 @@ test("Using the transform plugin, <img> to <picture>, keeps slot attribute #241"
   let results = await elev.toJSON();
   // TODO how to add independent class to <picture>
   t.is(results[0].content, `<picture><source type="image/webp" srcset="/virtual/KkPMmHd3hP-1280.webp 1280w"><img src="/virtual/KkPMmHd3hP-1280.jpeg" alt="My ugly mug" slot="image-1" width="1280" height="853"></picture>`);
+});
+
+test("#234 Use existing `width` attribute for `widths` config", async t => {
+  let elev = new Eleventy( "test", "test/_site", {
+    config: eleventyConfig => {
+      eleventyConfig.addTemplate("virtual.html", `<img src="./bio-2017.jpg" alt="My ugly mug" width="200">`);
+
+      eleventyConfig.addPlugin(eleventyImageTransformPlugin, {
+        dryRun: true, // don’t write image files!
+      });
+    }
+  });
+  elev.disableLogger();
+
+  let results = await elev.toJSON();
+  // TODO how to add independent class to <picture>
+  t.is(results[0].content, `<picture><source type="image/webp" srcset="/virtual/KkPMmHd3hP-200.webp 200w"><img src="/virtual/KkPMmHd3hP-200.jpeg" alt="My ugly mug" width="200" height="133"></picture>`);
+});
+
+test("#234 Use existing `width` attribute for `widths` config (huge width uses max intrinsic)", async t => {
+  let elev = new Eleventy( "test", "test/_site", {
+    config: eleventyConfig => {
+      eleventyConfig.addTemplate("virtual.html", `<img src="./bio-2017.jpg" alt="My ugly mug" width="2000">`);
+
+      eleventyConfig.addPlugin(eleventyImageTransformPlugin, {
+        dryRun: true, // don’t write image files!
+      });
+    }
+  });
+  elev.disableLogger();
+
+  let results = await elev.toJSON();
+  // TODO how to add independent class to <picture>
+  t.is(results[0].content, `<picture><source type="image/webp" srcset="/virtual/KkPMmHd3hP-1280.webp 1280w"><img src="/virtual/KkPMmHd3hP-1280.jpeg" alt="My ugly mug" width="1280" height="853"></picture>`);
+});
+
+test("#234 Use existing `width` attribute for `widths` config (comma separated widths are ignored as invalid. Discourage invalid `width` HTML attribute, use eleventy:widths instead)", async t => {
+  let elev = new Eleventy( "test", "test/_site", {
+    config: eleventyConfig => {
+      eleventyConfig.addTemplate("virtual.html", `<img src="./bio-2017.jpg" alt="My ugly mug" width="100,200">`);
+
+      eleventyConfig.addPlugin(eleventyImageTransformPlugin, {
+        dryRun: true, // don’t write image files!
+      });
+    }
+  });
+  elev.disableLogger();
+
+  let results = await elev.toJSON();
+  // TODO how to add independent class to <picture>
+  t.is(results[0].content, `<picture><source type="image/webp" srcset="/virtual/KkPMmHd3hP-1280.webp 1280w"><img src="/virtual/KkPMmHd3hP-1280.jpeg" alt="My ugly mug" width="1280" height="853"></picture>`);
 });