move gallerystyling out of shortcode, use lightgallery

container/site/assets/css/_custom.scss

@@ -0,0 +1,41 @@
+.gallery-new {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 4px;
+  margin: 1.25rem 0;
+}
+
+.gallery-new figure {
+  aspect-ratio: 1 / 1;
+  background: #f2f2f2;
+  margin: 0;
+  overflow: hidden;
+  position: relative;
+}
+
+.gallery-new .lightgallery {
+  aspect-ratio: 1 / 1;
+  display: block;
+  height: 100%;
+  overflow: hidden;
+  width: 100%;
+}
+
+.gallery-new .lightgallery img {
+  display: block;
+  height: 100% !important;
+  max-width: none;
+  object-fit: cover !important;
+  transition: filter 160ms ease, transform 160ms ease;
+  width: 100% !important;
+}
+
+.gallery-new .lightgallery:focus-visible img,
+.gallery-new .lightgallery:hover img {
+  filter: brightness(0.9);
+  transform: scale(1.03);
+}
+
+.gallery-new figcaption {
+  display: none;
+}

container/site/layouts/shortcodes/gallerynew.html

@@ -3,15 +3,22 @@
 {{ $file := printf "%s.yaml" $galleryName }}
 {{ $galleryData := .Page.Resources.GetMatch $file | transform.Unmarshal }}
 
-<div class="gallery grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
+<div class="gallery gallery-new">
   {{ range $galleryData.images }}
+  {{ $imageURL := printf "%s/%s/%s" site.Params.filesBase $slug .src }}
 
 <figure class="{{ .class | default "" }}">
+    <a
+      class="lightgallery"
+      href="{{ $imageURL }}"
+      data-thumbnail="{{ $imageURL }}"
+      {{ with .caption }}data-sub-html="{{ . }}"{{ end }}>
       <img 
-        src="{{ site.Params.filesBase }}/{{ $slug }}/{{ .src }}" 
+        src="{{ $imageURL }}" 
         alt="{{ .alt | default "" }}" 
         loading="lazy" 
         decoding="async" />
+    </a>
       {{ with .caption }}
         <figcaption>{{ . }}</figcaption>
       {{ end }}

container/site/layouts/shortcodes/image.html

@@ -1,16 +1,24 @@
 {{ $src := .Get "src" }}
 {{ $alt := .Get "alt" }}
 {{ $slug := .Page.Slug }}
+{{ $imageURL := printf "%s/%s/%s" site.Params.filesBase $slug $src }}
+{{ $caption := .Get "caption" }}
 
 <figure>
-<img 
-    src="{{ site.Params.filesBase }}/{{ $slug }}/{{ $src }}" 
-    alt="{{ $alt }}"
-    loading="lazy" 
-    decoding="async"
-    width="{{ .Get "width" | default "800" }}" />
+  <a
+    class="lightgallery"
+    href="{{ $imageURL }}"
+    data-thumbnail="{{ $imageURL }}"
+    {{ with $caption }}data-sub-html="{{ . }}"{{ end }}>
+    <img 
+      src="{{ $imageURL }}" 
+      alt="{{ $alt }}"
+      loading="lazy" 
+      decoding="async"
+      width="{{ .Get "width" | default "800" }}" />
+  </a>
 
-  {{ with .Get "caption" }}
+  {{ with $caption }}
     <figcaption>{{ . }}</figcaption>
   {{ end }}
-</figure>
+</figure>