From 200a00602f499c277366f0fcd573bd3d660b58dd Mon Sep 17 00:00:00 2001
From: Max Mehl <mail@mehl.mx>
Date: Thu, 1 Feb 2024 12:58:00 +0100
Subject: [PATCH] make column amount and min-width configurable

---
 assets/scss/snap-gallery.scss        | 23 ++++++++++++-----------
 layouts/shortcodes/snap-gallery.html |  2 +-
 2 files changed, 13 insertions(+), 12 deletions(-)

diff --git a/assets/scss/snap-gallery.scss b/assets/scss/snap-gallery.scss
index 75e2909..f1144ae 100644
--- a/assets/scss/snap-gallery.scss
+++ b/assets/scss/snap-gallery.scss
@@ -1,20 +1,21 @@
 .snap-wrapper {
   display: flex;
   flex-wrap: wrap;
-  justify-content: space-around;
+  justify-content: center;
   gap: 10px;
-}
 
-/* Create equal columns in flexbox */
-.snap-image {
-  // TODO: Make this configurable with variables
-  width: calc(100% / 4 - 10px);
-  min-width: 200px;
+  /* Create equal columns in flexbox */
+  .snap-image {
 
-  img {
-    aspect-ratio: 16/10;
-    width: 100%;
-    object-fit: cover;
+    /* Column amount and width are configurable by style variables */
+    width: calc(100% / var(--columns) - 10px);
+    min-width: var(--min-width);
+
+    img {
+      aspect-ratio: 16/10;
+      width: 100%;
+      object-fit: cover;
+    }
   }
 }
 
diff --git a/layouts/shortcodes/snap-gallery.html b/layouts/shortcodes/snap-gallery.html
index 07c68e0..fa785ad 100644
--- a/layouts/shortcodes/snap-gallery.html
+++ b/layouts/shortcodes/snap-gallery.html
@@ -20,7 +20,7 @@
 {{ end }}
 
 {{/*  Visible images  */}}
-<div class="snap-wrapper">
+<div class="snap-wrapper" style="--columns:{{ default 4 .Params.columns }};--min-width:{{ default 200 .Params.minwidth }};">
 {{ range $i, $img := $imgs }}
   <div class="snap-image">
     <img src="{{ $img }}" onclick="openModal({{ $galno }});currentSlide({{ $galno }}, {{ add $i 1 }});" class="hover-shadow">