outsource gallery part to separate partial

assets/scss/snap-gallery.scss

@@ -1,4 +1,4 @@
-.snap-wrapper {
+.snap-gallery-wrapper {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;

layouts/partials/gallery.html

@@ -0,0 +1,9 @@
+{{ $imgs := .imgs }}
+{{ $galno := .galno }}
+<div class="snap-gallery-wrapper" style="--columns:{{ default 4 .columns }};--min-width:{{ default 200 .minwidth }};">
+  {{ range $i, $img := $imgs }}
+  <div class="snap-image">
+    <img src="{{ $img }}" onclick="openModal({{ $galno }});currentSlide({{ $galno }}, {{ add $i 1 }});">
+  </div>
+  {{ end }}
+</div>

layouts/partials/lightbox.html

@@ -1,4 +1,3 @@
-{{/*  The Modal/Lightbox  */}}
 {{ $imgs := .imgs }}
 {{ $galno := .galno }}
 <div class="snap-lightbox" id="snap-lightbox-{{ $galno }}">

layouts/shortcodes/snap-gallery.html

@@ -19,15 +19,10 @@
   {{ end }}
 {{ end }}
 
-{{/*  Visible images  */}}
+{{/*  Visible images in gallery mode  */}}
-<div class="snap-wrapper" style="--columns:{{ default 4 .Params.columns }};--min-width:{{ default 200 .Params.minwidth }};">
+{{ partial "gallery" (dict "columns" .Params.columns "minwidth" .Params.minwidth "imgs" $imgs "galno" $galno) }}
-{{ range $i, $img := $imgs }}
-  <div class="snap-image">
-    <img src="{{ $img }}" onclick="openModal({{ $galno }});currentSlide({{ $galno }}, {{ add $i 1 }});">
-  </div>
-{{ end }}
-</div>
 
+{{/*  The Modal/Lightbox  */}}
 {{ partial "lightbox" (dict "galno" $galno "imgs" $imgs) }}
 
 {{/*  Load CSS/JS and make sure it is only loaded once  */}}