Relative Path Images

README.md

@@ -78,6 +78,9 @@ Overrides eleventy-img specific options.
 Adds attributes to the image output.
 * `renderImage` (function).
 Lets you render custom markup and do almost everything you like with your markdown images (see [Custom image rendering](#custom-image-rendering)).
+* `eleventyResolveToProjectRoot` (boolean)
+
+If set to false, will check for image in directory relative to the file where the image is referenced. Defaults to true.
 
 Here's an exemple of using the options object (without `renderImage`):
 

index.js

@@ -5,12 +5,21 @@ const generateAttrsObject = require("./utilities/generate-attrs-object");
 const { typeObjectError, typeFunctionError } = require("./utilities/errors");
 const { propertiesFrom } = require("./utilities/lower-case-trim-object");
 
-
+/**
+ * 
+ * @param {MarkdownIt} md The markdown-it object
+ * @param {*} imgOptions Overrides eleventy-img specific options.
+ * @param {*} globalAttributes Adds attributes to the image output.
+ * @param {Function} renderImage Lets you render custom markup and do almost everything you like with your markdown images.
+ * @param {Function} resolvePath Function that will be used to resolve paths for images in markdown. Receives image path string and env as parameters. Default resolves to CWD.
+ */
 module.exports = function markdownItEleventyImg(md, {
   imgOptions = {},
   globalAttributes = {},
-  renderImage
+  renderImage,
+  resolvePath
 } = {}) {
+
   typeObjectError(imgOptions, "imgOptions");
   typeObjectError(globalAttributes, "globalAttributes");
   typeFunctionError(renderImage, "renderImage");
@@ -25,7 +34,7 @@ module.exports = function markdownItEleventyImg(md, {
 
     const normalizedTokenAttributes = generateAttrsObject(token).addContentTo("alt").attrs;
 
-    const src = normalizedTokenAttributes.src;
+    const src = (resolvePath) ? resolvePath(normalizedTokenAttributes.src, env) : normalizedTokenAttributes.src;
 
     const normalizedTokenAttributesWithoutSrc = remove("src").from(normalizedTokenAttributes);
 

test-eleventy/index.md → test-eleventy/default/index.md

@@ -1 +1,2 @@
-![Alt diplomees2021](./assets/images/diplomees2021.jpg "Title diplomees2021")
+![Alt diplomees2021](./assets/images/diplomees2021.jpg "Title diplomees2021")
+

test-eleventy/relative-image/index.md

@@ -0,0 +1,2 @@
+![Alt diplomees2021](./diplomees2021.jpg "Title diplomees2021")
+

test.js

@@ -10,7 +10,8 @@ const { propertiesFrom } = require("./utilities/lower-case-trim-object");
 const fs = require("fs");
 const path = require("path");
 const Eleventy = require("@11ty/eleventy");
-const eleventyInput = "test-eleventy";
+const eleventyInput = "test-eleventy/default";
+const eleventyInputRelative = "test-eleventy/relative-image";
 const eleventyOutput = "_site";
 const imageDiplomees2021 = '![Alt diplomees2021](./assets/images/diplomees2021.jpg "Title diplomees2021")';
 const imagemarkdownItAttrs = '![Alt diplomees2021](./assets/images/diplomees2021.jpg "Title diplomees2021"){loading=lazy}';
@@ -363,6 +364,31 @@ test.serial("markdownItEleventyImg with Eleventy (default no-config)", async t =
   t.is(json[0].content, '<p><picture><source type="image/webp" srcset="/img/pRWAdktn3m-2048.webp 2048w"><img alt="Alt diplomees2021" title="Title diplomees2021" src="/img/pRWAdktn3m-2048.jpeg" width="2048" height="1463"></picture></p>\n');
 });
 
+test.serial("markdownItEleventyImg with Eleventy using custom image path resolution for relative images.", async t => {
+  const relativeImageResolve = (filepath, env) => {
+    let resolvedPath = filepath;
+
+    // if path is remote, just return path
+    const isRemoteRegExp = /^https?:\/\//i;
+    if(typeof filepath === "string" && !isRemoteRegExp.test(filepath)) {
+      resolvedPath = path.join(path.dirname(env.page.inputPath), filepath);
+    }
+
+    return resolvedPath;
+  };
+
+  let elev = new Eleventy(eleventyInputRelative, eleventyOutput, {
+    config(config) {
+      config.setLibrary("md", md.use(markdownItEleventyImg, {
+        resolvePath: relativeImageResolve
+      }));
+    }
+  });
+  let json = await elev.toJSON();
+
+  t.is(json[0].content, '<p><picture><source type="image/webp" srcset="/img/pRWAdktn3m-2048.webp 2048w"><img alt="Alt diplomees2021" title="Title diplomees2021" src="/img/pRWAdktn3m-2048.jpeg" width="2048" height="1463"></picture></p>\n');
+});
+
 test.serial("markdownItEleventyImg with Eleventy with imgOptions and globalAttributes (dryrun)", async t => {
   let elev = new Eleventy(eleventyInput, eleventyOutput, {
     config(config) {