handle responsive images with image paths from CMS

.eleventy.js

@@ -39,7 +39,15 @@ module.exports = async function(eleventyConfig) {
   // generate responsive images from Markdown
   mdLib.renderer.rules.image = (tokens, idx, options, env, self) => {
     const token = tokens[idx]
-    const imgSrc = env.eleventy.directories.input.slice(0, -1) + token.attrGet('src')
+    const imgPath = token.attrGet('src')
+    const isGlobal = imgPath.slice(0, env.meta.public_folder.length) === env.meta.public_folder
+
+    const imgSrc = isGlobal 
+      ? "./" + env.meta.media_folder + imgPath.slice(env.meta.public_folder.length)
+      : imgPath.slice(0,1) === "/" 
+        ? env.eleventy.directories.input.slice(0, -1) + imgPath
+        : env.page.inputPath.substring(0, env.page.inputPath.lastIndexOf('/')) + "/" + imgPath
+
     const imgAlt = token.content
     const imgTitle = token.attrGet('title') ?? ''
     const className = token.attrGet('class')
@@ -146,6 +154,7 @@ module.exports = async function(eleventyConfig) {
   return {
     dir: {
       input: "src/pages",
+      media: "src/static/img",
       layouts: '../_layouts',
       includes: '../_layouts/includes',
       data: '../_data',

package.json

@@ -16,11 +16,11 @@
     "11ty",
     "tailwind"
   ],
-  "author": "Cam MacFarland",
-  "license": "Unlicense",
-  "homepage": "https://github.com/distantcam/windty#readme",
+  "author": "Alix Guillard",
+  "license": "Art Libre",
+  "homepage": "https://github.com/distantcam/huwindty#readme",
   "bugs": {
-    "url": "https://github.com/distantcam/windty/issues"
+    "url": "https://github.com/distantcam/huwindty/issues"
   },
   "devDependencies": {
     "@11ty/eleventy": "^3.0.0",

src/_assets/public/admin/config.yml

@@ -15,8 +15,10 @@ backend:
 
 publish_mode: editorial_workflow # simple, editorial_workflow
 
+# both values bellow must be copied in _data/meta.json
+# to allow responsive formating of images from the right source
 media_folder: "src/static/img"
-public_folder: "/img"
+public_folder: "/img" 
 
 collections:
   - name: "documentation" # Used in routes, e.g., /admin/collections/blog

src/_data/meta.json

@@ -5,5 +5,7 @@
   "language": "en",
   "author": {
     "name": "Alix Guillard"
-  }
+  },
+"media_folder": "src/static/img",
+"public_folder": "/img"
 }