add image galleries with lightgallery

Author: tcmal

site/2016/05/made-in-hacklab-sentient-forest.md

@@ -30,6 +30,8 @@ cable and 14 tubes of silicone sealant.
 
 Here are some behind the scenes photos of it being built:
 
+<gallery>
+
 ![](./images/2016-01-19-14.55.12-450x337.jpg)
 ![](./images/2016-03-25-14.21.39-450x338.jpg)
 ![](./images/2016-03-27-19.09.56-338x450.jpg)
@@ -44,6 +46,8 @@ Here are some behind the scenes photos of it being built:
 ![](./images/IMG_1016-1-450x338.jpg)
 ![](./images/2016-04-15-12.28.55-450x338.jpg)
 
+</gallery>
+
 And here's the final piece, doing it's thing:
 
 ![Sentient

site/css/gic.css

@@ -152,6 +152,36 @@ img {
     max-width: 100%;
 }
 
+/* Basic fallback styling for galleries, for when JS is disabled / not working */
+gallery:not(.active) > p {
+    width: 100%;
+    position: relative;
+
+    img {
+        height: 10lh;
+        display: inline-block;
+        overflow: hidden;
+        margin: 0;
+        padding: 0;
+    }
+
+    /* Avoid flashing all of the images before the JS loads, but still display it after a short time */
+    animation: fadeInAfterTime 3s linear;
+
+}
+@keyframes fadeInAfterTime {
+    0% { opacity: 0; }
+    99% { opacity: 0; }
+    100% { opacity: 1; }
+}
+
+gallery.active {
+    display: block;
+    width: 100%;
+    height: 0;
+    padding-bottom: 30lh;
+}
+
 /* Selected parts from: */
 /* GIC.css Version 1.2.0
  * (c) Copyright Ariadne (me@aria.rip) 2026.
@@ -623,7 +653,7 @@ hr.visible { border-bottom: 1px solid var(--colour-border) }
 /* |___ |  | |__/ |\/| [__   */
 /* |    |__| |  \ |  | ___]  */
 /*                           */
-button {
+button:not(.lg-icon) {
     --button-bg: var(--green-shade-25);
     --button-bg-darker: var(--green-shade-50);
     --text: var(--colour-button-text);

site/favicon.svg

@@ -36,4 +36,25 @@ function nextOpenNight() {
     var nextOpenNightElement = document.getElementById('next-open-night');
     if (nextOpenNightElement)
         nextOpenNightElement.innerText = `Our next open night is on the ${nextString}.`;
-})()
+})();
+
+// Convert <gallery> tags into inline galleries
+(function() {
+    for (var el of document.querySelectorAll('gallery')) {
+        // Collect all the child image tags, then clear the element and make an
+        // inline gallery.
+        // This is needed because lightgallery will append to the end of the element by default.
+        // It also deals with the fact that in markdown, there will usually be some extra <p> tags lying around
+        let imgs = Array.from(el.querySelectorAll('img'));
+        el.innerHTML = '';
+        var gallery = lightGallery(el, {
+            container: el,
+            closable: false,
+            showMaximizeIcon: true,
+            dynamic: true,
+            dynamicEl: imgs,
+        })
+        el.classList.add('active');
+        gallery.openGallery();
+    }
+})();