From e3224082023cb1d7ae3429c0b6ae5f243afbb458 Mon Sep 17 00:00:00 2001
From: Max Mehl <mail@mehl.mx>
Date: Mon, 5 Feb 2024 15:33:43 +0100
Subject: [PATCH] allow to define aspect ratio

---
 README.md                            | 1 +
 assets/scss/snap-gallery.scss        | 2 +-
 layouts/partials/gallery.html        | 2 +-
 layouts/partials/slideshow.html      | 2 +-
 layouts/shortcodes/snap-gallery.html | 6 +++---
 5 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/README.md b/README.md
index 21538e5..9d347d3 100644
--- a/README.md
+++ b/README.md
@@ -47,6 +47,7 @@ All parameters:
 
 - `src`: Must contain either a comma-separated list of paths to images, or a directory path containing images.
 - `lightbox`: Whether a click on an image shall open a lightbox modal. Default: `true`.
+- `aspectratio`: Define the aspect ratio of the images in the slideshow/gallery. Default: `16/10`.
 - `mode`: Can be either `gallery` or `slideshow`. Default: `gallery`.
 - For gallery mode:
   - `columns`: Amount of columns the images are displayed in. Default: `4`.
diff --git a/assets/scss/snap-gallery.scss b/assets/scss/snap-gallery.scss
index 53e0d39..da5a148 100644
--- a/assets/scss/snap-gallery.scss
+++ b/assets/scss/snap-gallery.scss
@@ -17,7 +17,7 @@ $gap: var(--gap);
     min-width: var(--min-width);
 
     img {
-      aspect-ratio: 16/10;
+      aspect-ratio: var(--aspectratio);
       width: 100%;
       object-fit: cover;
     }
diff --git a/layouts/partials/gallery.html b/layouts/partials/gallery.html
index 1ea1e76..85b03c9 100644
--- a/layouts/partials/gallery.html
+++ b/layouts/partials/gallery.html
@@ -1,6 +1,6 @@
 {{- $imgs := .imgs -}}
 {{- $galno := .galno -}}
-<div class="snap-gallery" style="--columns:{{ default 4 .columns }};--min-width:{{ default "200px" .minwidth }};--gap:10px;--cursor:{{ .cursor }};">
+<div class="snap-gallery" style="--columns:{{ default 4 .columns }};--min-width:{{ default "200px" .minwidth }};--gap:10px;--cursor:{{ .cursor }};--aspectratio:{{ safeCSS (default "16/10" .aspectratio) }};">
   {{- range $i, $img := $imgs -}}
   <div class="snap-image">
     <img src="{{ $img }}" onclick="openLightbox({{ $galno }});openLightboxItem({{ $galno }}, {{ add $i 1 }});">
diff --git a/layouts/partials/slideshow.html b/layouts/partials/slideshow.html
index 648e42d..ce3798f 100644
--- a/layouts/partials/slideshow.html
+++ b/layouts/partials/slideshow.html
@@ -1,6 +1,6 @@
 {{- $imgs := .imgs -}}
 {{- $galno := .galno -}}
-<div class="snap-slideshow" id="snap-slideshow-{{ $galno }}" style="--columns:1;--min-width:0px;--gap:0px;--slideshow-width:{{ default "100%" .width }};--cursor:{{ .cursor }};">
+<div class="snap-slideshow" id="snap-slideshow-{{ $galno }}" style="--columns:1;--min-width:0px;--gap:0px;--slideshow-width:{{ default "100%" .width }};--cursor:{{ .cursor }};--aspectratio:{{ safeCSS (default "16/10" .aspectratio) }};">
   {{- range $i, $img := $imgs }}
   <div class="snap-image">
     <div class="numbertext">{{ add $i 1 }} / {{ len $imgs }}</div>
diff --git a/layouts/shortcodes/snap-gallery.html b/layouts/shortcodes/snap-gallery.html
index eed4342..871bd98 100644
--- a/layouts/shortcodes/snap-gallery.html
+++ b/layouts/shortcodes/snap-gallery.html
@@ -52,12 +52,12 @@
 {{- $mode := default "gallery" .Params.mode -}}
 {{/*  Gallery mode  */}}
 {{- if eq $mode "gallery" -}}
-{{- partial "gallery" (dict "columns" .Params.columns "minwidth" .Params.minwidth "imgs" $imgs "galno" $galno "cursor" $cursor) -}}
+{{- partial "gallery" (dict "columns" .Params.columns "minwidth" .Params.minwidth "imgs" $imgs "galno" $galno "cursor" $cursor "aspectratio" .Params.aspectratio) -}}
 {{/*  Slideshow mode  */}}
 {{- else if eq $mode "slideshow" -}}
-{{- partial "slideshow" (dict "imgs" $imgs "galno" $galno "width" .Params.slideshowwidth "cursor" $cursor) -}}
+{{- partial "slideshow" (dict "imgs" $imgs "galno" $galno "width" .Params.slideshowwidth "cursor" $cursor "aspectratio" .Params.aspectratio) -}}
 {{/*  Set autorotate timer for slideshow, if configured (default: yes)  */}}
-{{- if .Params.slideshowrotate -}}
+{{- if (default true .Params.slideshowrotate) -}}
 <script>const autoSlideshow = setInterval(moveSlideshowItem, {{ default 5000 .Params.slideshowrotate_timer }}, {{ $galno }}, 1, "auto");</script>
 {{- end -}}
 {{- end -}}