Fixes #236

Author: zachleat

package.json

@@ -12,6 +12,7 @@
   "scripts": {
     "pretest": "eslint img.js src/**.js test/**.js",
     "test": "ava --no-worker-threads",
+    "watch": "ava --no-worker-threads --watch",
     "sample": "cd sample && node sample.js"
   },
   "repository": {

src/transform-plugin.js

@@ -31,14 +31,65 @@ function assignAttributes(rootTargetNode, newNode) {
   }
 }
 
+function getOutputLocations(originalSource, outputDirectoryFromAttribute, pageContext, options) {
+  let projectOutputDirectory = options.directories.output;
+
+  if(outputDirectoryFromAttribute) {
+    if(path.isAbsolute(outputDirectoryFromAttribute)) {
+      return {
+        outputDir: path.join(projectOutputDirectory, outputDirectoryFromAttribute),
+        urlPath: outputDirectoryFromAttribute,
+      };
+    }
+    return {
+      outputDir: path.join(projectOutputDirectory, pageContext.url, outputDirectoryFromAttribute),
+      urlPath: path.join(pageContext.url, outputDirectoryFromAttribute),
+    };
+  }
+
+  if(options.urlPath) {
+    // do nothing, user has specified directories in the plugin options.
+    return {};
+  }
+
+  if(path.isAbsolute(originalSource)) {
+    // if the path is an absolute one (relative to the content directory) write to a global output directory to avoid duplicate writes for identical source images.
+    return {
+      outputDir: path.join(projectOutputDirectory, "/img/"),
+      urlPath: "/img/",
+    };
+  }
+
+  // If original source is a relative one, this colocates images to the template output.
+  let dir = path.dirname(pageContext.outputPath);
+
+  // filename is included in url: ./dir/post.html => /dir/post.html
+  if(pageContext.outputPath.endsWith(pageContext.url)) {
+    // remove file name
+    let split = pageContext.url.split("/");
+    split[split.length - 1] = "";
+
+    return {
+      outputDir: dir,
+      urlPath: split.join("/"),
+    };
+  }
+
+  // filename is not included in url: ./dir/post/index.html => /dir/post/
+  return {
+    outputDir: dir,
+    urlPath: pageContext.url,
+  };
+}
+
 function transformTag(context, sourceNode, rootTargetNode, opts) {
   let originalSource = getSourcePath(sourceNode, rootTargetNode);
 
   if(!originalSource) {
     return sourceNode;
   }
 
-  let { inputPath, outputPath, url } = context.page;
+  let { inputPath } = context.page;
 
   sourceNode.attrs.src = Util.normalizeImageSource({
     input: opts.directories.input,
@@ -51,36 +102,8 @@ function transformTag(context, sourceNode, rootTargetNode, opts) {
     sourceNode.attrs[ATTRS.ORIGINAL_SOURCE] = originalSource;
   }
 
-  let instanceOptions = {};
-
-  let outputDirectory = getOutputDirectory(sourceNode);
-  if(outputDirectory) {
-    if(path.isAbsolute(outputDirectory)) {
-      instanceOptions = {
-        outputDir: path.join(opts.directories.output, outputDirectory),
-        urlPath: outputDirectory,
-      };
-    } else {
-      instanceOptions = {
-        outputDir: path.join(opts.directories.output, url, outputDirectory),
-        urlPath: path.join(url, outputDirectory),
-      };
-    }
-  } else if(opts.urlPath) {
-    // do nothing, user has specified directories in the plugin options.
-  } else if(path.isAbsolute(originalSource)) {
-    // if the path is an absolute one (relative to the content directory) write to a global output directory to avoid duplicate writes for identical source images.
-    instanceOptions = {
-      outputDir: path.join(opts.directories.output, "/img/"),
-      urlPath: "/img/",
-    };
-  } else {
-    // If original source is a relative one, this colocates images to the template output.
-    instanceOptions = {
-      outputDir: path.dirname(outputPath),
-      urlPath: url,
-    };
-  }
+  let outputDirectoryFromAttribute = getOutputDirectory(sourceNode);
+  let instanceOptions = getOutputLocations(originalSource, outputDirectoryFromAttribute, context.page, opts);
 
   // returns promise
   return imageAttributesToPosthtmlNode(sourceNode.attrs, instanceOptions, opts).then(newNode => {

test/transform-test.mjs

@@ -420,7 +420,6 @@ test("Using the transform plugin, <img> to <picture>, keeps slot attribute #241"
   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" slot="image-1" width="1280" height="853"></picture>`);
 });
 
@@ -437,7 +436,6 @@ test("#234 Use existing `width` attribute for `widths` config", async t => {
   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>`);
 });
 
@@ -454,7 +452,6 @@ test("#234 Use existing `width` attribute for `widths` config (huge width uses m
   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>`);
 });
 
@@ -471,6 +468,25 @@ test("#234 Use existing `width` attribute for `widths` config (comma separated w
   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("#236 Use with permalink with file name", async t => {
+  let elev = new Eleventy( "test", "test/_site", {
+    config: eleventyConfig => {
+      eleventyConfig.addTemplate("virtual.md", `![alt text](./bio-2017.jpg)`, {
+        permalink: "blog/posts/blog-post.html"
+      });
+
+      eleventyConfig.addPlugin(eleventyImageTransformPlugin, {
+        formats: ["auto"],
+        dryRun: true, // don’t write image files!
+      });
+    }
+  });
+  elev.disableLogger();
+
+  let results = await elev.toJSON();
+
+  t.is(results[0].content.trim(), `<p><img src="/blog/posts/KkPMmHd3hP-1280.jpeg" alt="alt text" width="1280" height="853"></p>`);
 });