use js for better randomization of calligrams

assets/js/design-system/pageCalligram.js

@@ -0,0 +1,29 @@
+class PageCalligram {
+    constructor () {
+        this.calligram = document.querySelector('.calligram');
+        if (!this.calligram) {
+            return;
+        }
+        this.images = [
+            { url: "/assets/images/calligrammes/calligramme-1.svg", orientation: "landscape" },
+            { url: "/assets/images/calligrammes/calligramme-2.svg", orientation: "portrait" },
+            { url: "/assets/images/calligrammes/calligramme-3.svg", orientation: "landscape" },
+            { url: "/assets/images/calligrammes/calligramme-4.svg", orientation: "landscape" }
+        ];
+
+        this.listen();
+    }
+
+    listen () {
+        this.randomImage = Math.floor(Math.random() * this.images.length);
+        this.image = this.images[this.randomImage];
+
+        this.setCalligram();
+    }
+    setCalligram () {
+        this.calligram.src = this.image.url;
+        this.calligram.className += this.image.orientation;
+    }
+}
+
+export default new PageCalligram();

assets/js/main.js

@@ -1,4 +1,5 @@
 import './vendors/lightbox';
 import './theme/';
 
-import './design-system/homeHero';
+import './design-system/homeHero';
+import './design-system/pageCalligram';

config/_default/config.yaml

@@ -3,16 +3,6 @@ paginate: 18
 enableRobotsTXT: true
 removePathAccents: true
 params:
-  footer:
-    images:
-      - url: "/assets/images/calligrammes/calligramme-1.svg"
-        orientation: "landscape"
-      - url: "/assets/images/calligrammes/calligramme-2.svg"
-        orientation: "portrait"
-      - url: "/assets/images/calligrammes/calligramme-3.svg"
-        orientation: "landscape"
-      - url: "/assets/images/calligrammes/calligramme-4.svg"
-        orientation: "landscape"
   summary:
     position: content
   search:

layouts/partials/footer/footer-simple.html

@@ -20,11 +20,8 @@
         "class"       "nav-social"
     )}}
   {{ end }}
-
-  {{ $images := site.Params.footer.images }}
-  {{ $shuffledImages := shuffle $images }}
-  {{ $calligram := index $shuffledImages 0 }}
-  <img class="calligram {{ $calligram.orientation }}" src="{{ $calligram.url }}" alt="" />
+
+  <img class="calligram " alt="">
 
   {{ with (or site.Params.social site.Data.website.social) }}
     {{ $site_social_links := . }}