Nicer cloundinary URL formatting

Author: Phil Hawksworth

.eleventy.js

@@ -161,13 +161,23 @@ module.exports = function(eleventyConfig) {
   });
 
 
-  eleventyConfig.addFilter("replace", (str, from, to) => {
-    if (str) {
-      return str.replace(new RegExp(from, "g"), to);
+  // Format a path to avoid any Cloudinary URL API miss-steps.
+  eleventyConfig.addFilter("cloudinaryifyPath", (str) => {
+
+    if(str) { 
+      // we need to double escape some characters which might appear in text
+      // but are meaningful in cloudinary URLs
+      str = str.replace(/,/g, '%252C');
+      str = str.replace(/\//g, '%252F');
+
+      // add generic url encoding 
+      str = encodeURI(str);
     }
+    return str;
   });
 
 
+
   // favicons files
   eleventyConfig.addPassthroughCopy("src/site/browserconfig.xml");
   eleventyConfig.addPassthroughCopy("src/site/site.webmanifest");

src/site/glossary-pages.njk

@@ -10,7 +10,7 @@ layout: layouts/base.njk
 eleventyComputed:
   title: "{{ item.term }}"
   description: "What is {{ item.term }}? {{ item.summary}}"
-  ogimage: "/img/og/glossary/{{ item.term | replace(',','%252C') | replace('/', '%252F')  }}/{{ item.summary | replace(',','%252C') | replace('/', '%252F') }}"
+  ogimage: "/img/og/glossary/{{ item.term | cloudinaryifyPath  }}/{{ item.summary | cloudinaryifyPath }}"
 
 ---