feat: implemented functionnalities on Markdown images: 1. featherlight for full size view in popup 2. Height/Width customizables 3. Possibility to add css classes

static/js/hugo-learn.js

@@ -0,0 +1,56 @@
+// Get Parameters from some url
+var getUrlParameter = function getUrlParameter(sPageURL) {
+    var url = sPageURL.split('?');
+    var obj = {};
+    if (url.length == 2) {
+      var sURLVariables = url[1].split('&'),
+          sParameterName,
+          i;
+      for (i = 0; i < sURLVariables.length; i++) {
+          sParameterName = sURLVariables[i].split('=');
+          obj[sParameterName[0]] = sParameterName[1];
+      }
+      return obj;
+    } else {
+      return undefined;
+    }
+};
+
+// Execute actions on images generated from Markdown pages
+var images = $("div#body-inner img");
+// Wrap image inside a featherlight (to get a full size view in a popup)
+images.wrap(function(){
+  var image =$(this);
+  return "<a href='" + image[0].src + "' data-featherlight='image'></a>";
+});
+
+// Change styles, depending on parameters set to the image
+images.each(function(index){
+  var image = $(this)
+  var o = getUrlParameter(image[0].src);
+  if (typeof o !== "undefined") {
+    var h = o["height"];
+    var w = o["width"];
+    var c = o["classes"];
+    image.css("width", function() {
+      if (typeof w !== "undefined") {
+        return w;
+      } else {
+        return "auto";
+      }
+    });
+    image.css("height", function() {
+      if (typeof h !== "undefined") {
+        return h;
+      } else {
+        return "auto";
+      }
+    });
+    if (typeof c !== "undefined") {
+      var classes = c.split(',');
+      for (i = 0; i < classes.length; i++) {
+        image.addClass(classes[i]);
+      }
+    }
+  }
+});