Merge pull request #454 from zihanKuang/improve-lightbox-image-and-size

Improve Lightbox: Escape key support & Image size optimization

Author: ritzorama

layouts/_default/_markup/render-image.html

@@ -8,5 +8,6 @@
 <!-- attribution appreciated. github: zjeaton web: https://froglegs.co -->
 
 <div class="md__image">
-  <img id="{{ first 6 (shuffle (seq 1 500)) }}" src="{{ .Destination | safeURL }}" onclick="openModal(this.id)" alt="{{ .Text }}" {{ with .Title}} class="{{ . }}" {{ end }} />
+  <img id="{{ first 6 (shuffle (seq 1 500)) }}" src="{{ .Destination | safeURL }}" onclick="openModal(this.id)" alt="{{ .Text }}" {{ with .Title}} class="{{ . }}" {{ end }} 
+  style="max-width: 70%; max-height: 80vh; height: auto; display: block; margin: 0 auto; object-fit: contain;" />
 </div>

layouts/partials/image-modal.html

@@ -34,6 +34,13 @@
   document.getElementById("myModal").style.display = "none";
 }
 
+// Listen for the Escape key to close the modal
+document.addEventListener("keydown", function (event) {
+    if (event.key === "Escape") {
+        closeModal();
+    }
+});
+
 </script>
 
 <!-- To attach onclick attribute to all <img> -->