Fix gallery

assets/css/gallery.css

@@ -0,0 +1,54 @@
+ .gallery {
+     display: grid;
+     grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+     gap: 10px;
+     padding: 20px;
+ }
+
+ .gallery-item {
+     overflow: hidden;
+ }
+
+ .gallery-item img {
+     width: 100%;
+     height: auto;
+     display: block;
+ }
+
+ .modal {
+     display: none;
+     position: fixed;
+     z-index: 1;
+     padding-top: 100px;
+     left: 0;
+     top: 0;
+     width: 100%;
+     height: 100%;
+     overflow: auto;
+     background-color: rgba(0, 0, 0, 0.9);
+ }
+
+ .modal-content {
+     margin: auto;
+     display: block;
+     width: auto;
+     height: auto;
+ }
+
+ .close {
+     position: absolute;
+     top: 15px;
+     right: 35px;
+     color: #f1f1f1;
+     font-size: 40px;
+     font-weight: bold;
+     transition: 0.3s;
+ }
+
+ .close:hover,
+ .close:focus {
+     color: #bbb;
+     text-decoration: none;
+     cursor: pointer;
+ }
+

assets/js/gallery.js

@@ -0,0 +1,11 @@
+function openModal(imageSrc) {
+    let modal = document.getElementById("myModal");
+    let modalImg = document.getElementById("modalImage");
+    modal.style.display = "block";
+    modalImg.src = imageSrc;
+}
+
+function closeModal() {
+    let modal = document.getElementById("myModal");
+    modal.style.display = "none";
+}

layouts/partials/footer-mobile.html

@@ -9,4 +9,12 @@
 
 	{{ $script := resources.Get "js/main.js" | minify | fingerprint -}}
 	<script src="{{ $script.Permalink }}" {{ printf "integrity=%q" $script.Data.Integrity | safeHTMLAttr }} crossorigin="anonymous"></script>
+
+  {{ $js := resources.Get "js/gallery.js" }}
+  {{ $jsFile := $js | resources.Minify }}
+  <script type="text/javascript" src="{{ $jsFile.Permalink }}"></script>
+
+  {{ $css := resources.Get "css/gallery.css" }}
+  {{ $cssFile := $css | resources.Minify }}
+  <link href="{{ $cssFile.Permalink }}" rel="stylesheet">
 </footer>

layouts/partials/footer.html

@@ -5,4 +5,12 @@
     <p><a href="https://gohugo.io" target="_blank" rel="noopener">{{ i18n "built_with_hugo" }}</a></p>
 
   <script src="{{ "/" | relURL }}js/main.js"></script>
+
+  {{ $js := resources.Get "js/gallery.js" }}
+  {{ $jsFile := $js | resources.Minify }}
+  <script type="text/javascript" src="{{ $jsFile.Permalink }}"></script>
+
+  {{ $css := resources.Get "css/gallery.css" }}
+  {{ $cssFile := $css | resources.Minify }}
+  <link href="{{ $cssFile.Permalink }}" rel="stylesheet">
 </footer>

layouts/shortcodes/image-gallery.html

@@ -1,4 +1,4 @@
-{{/* https://hugocodex.org/add-ons/image-gallery/ */}}
+{{/* https://www.geeksforgeeks.org/how-to-make-image-gallery-using-html-css-and-javascript/ */}}
 {{/*
 Add this to your config yaml to serve images from `static/albums``
 
@@ -9,16 +9,10 @@ module:
 
 
 */}}
-<style>
-    .image-gallery {overflow: auto; margin-left: -1%!important;}
-    .image-gallery li {float: left; display: block; margin: 0 0 1% 1%; width: 19%;}
-    .image-gallery li a {text-align: center; text-decoration: none!important; color: #777;}
-    .image-gallery li a span {display: block; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; padding: 3px 0;}
-    .image-gallery li a img {width: 100%; display: block;}
-</style>
 
 {{ $dir := string .Params.gallery_dir }}
-<ul class="image-gallery">
+
+<div class="gallery">
 {{ range (readDir (print "/static" $dir)) }}
   {{- $imageurl := printf "%s/%s" $dir .Name -}}
   {{- $image := resources.Get $imageurl -}}
@@ -26,12 +20,29 @@ module:
     {{- if eq $image nil -}}
     {{ return }}
     {{- else -}}
-    <li>
-      <a href="{{ ($image.Fit "1600x1600 q50").Permalink }}" title="{{ $imagetitle }}" class="lightbox-image">
-        <img src="{{ ($image.Fill "300x300 q50").Permalink }}" alt="{{ $imagetitle }}" title="{{ $imagetitle }}">
-        <span>{{ $imagetitle }}</span>
-      </a>
-    </li>
+    <div class="gallery-item">
+        <img src="{{ $image.Permalink }}"
+            onclick="openModal('{{ $image.Permalink }}')"
+            alt="{{ $imagetitle }}">
+    </div>
     {{- end -}}
 {{ end }}
-</ul>
+</div>
+
+<!-- Modal for Image Display -->
+<div id="myModal" class="modal">
+    <span class="close" onclick="closeModal()">&times;</span>
+    <img class="modal-content" id="modalImage">
+</div>
+
+<!-- JavaScript for Modal -->
+<script>    
+    function openModal(src) {
+        document.getElementById("modalImage").src = src;
+        document.getElementById("myModal").style.display = "block";
+    }
+
+    function closeModal() {
+        document.getElementById("myModal").style.display = "none";
+    }
+</script>