mxmehl/hugo-snap-gallery
1
0
Fork 0
Code Issues 2 Pull Requests Releases 2 Wiki Activity

allow to define aspect ratio

Browse Source
This commit is contained in:
Max Mehl
2024-02-05 15:33:43 +01:00
parent 8217f0a6d8
commit e322408202
5 changed files with 7 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
README.md
View File

@@ -47,6 +47,7 @@ All parameters:
- `src`: Must contain either a comma-separated list of paths to images, or a directory path containing images. - `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`. - `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`. - `mode`: Can be either `gallery` or `slideshow`. Default: `gallery`.
- For gallery mode: - For gallery mode:
- `columns`: Amount of columns the images are displayed in. Default: `4`. - `columns`: Amount of columns the images are displayed in. Default: `4`.

2
assets/scss/snap-gallery.scss
View File

@@ -17,7 +17,7 @@ $gap: var(--gap);
min-width: var(--min-width); min-width: var(--min-width);
img { img {
aspect-ratio: 16/10; aspect-ratio: var(--aspectratio);
width: 100%; width: 100%;
object-fit: cover; object-fit: cover;
} }

2
layouts/partials/gallery.html
View File

@@ -1,6 +1,6 @@
{{- $imgs := .imgs -}} {{- $imgs := .imgs -}}
{{- $galno := .galno -}} {{- $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 -}} {{- range $i, $img := $imgs -}}
<div class="snap-image"> <div class="snap-image">
<img src="{{ $img }}" onclick="openLightbox({{ $galno }});openLightboxItem({{ $galno }}, {{ add $i 1 }});"> <img src="{{ $img }}" onclick="openLightbox({{ $galno }});openLightboxItem({{ $galno }}, {{ add $i 1 }});">

2
layouts/partials/slideshow.html
View File

@@ -1,6 +1,6 @@
{{- $imgs := .imgs -}} {{- $imgs := .imgs -}}
{{- $galno := .galno -}} {{- $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 }} {{- range $i, $img := $imgs }}
<div class="snap-image"> <div class="snap-image">
<div class="numbertext">{{ add $i 1 }} / {{ len $imgs }}</div> <div class="numbertext">{{ add $i 1 }} / {{ len $imgs }}</div>

6
layouts/shortcodes/snap-gallery.html
View File

@@ -52,12 +52,12 @@
{{- $mode := default "gallery" .Params.mode -}} {{- $mode := default "gallery" .Params.mode -}}
{{/* Gallery mode */}} {{/* Gallery mode */}}
{{- if eq $mode "gallery" -}} {{- 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 */}} {{/* Slideshow mode */}}
{{- else if eq $mode "slideshow" -}} {{- 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) */}} {{/* 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> <script>const autoSlideshow = setInterval(moveSlideshowItem, {{ default 5000 .Params.slideshowrotate_timer }}, {{ $galno }}, 1, "auto");</script>
{{- end -}} {{- end -}}
{{- end -}} {{- end -}}