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

make column amount and min-width configurable

Browse Source
This commit is contained in:
Max Mehl
2024-02-01 12:58:00 +01:00
parent 768d77aa8c
commit 200a00602f
2 changed files with 13 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,15 +1,15 @@
.snap-wrapper { .snap-wrapper {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: space-around; justify-content: center;
gap: 10px; gap: 10px;
}
/* Create equal columns in flexbox */ /* Create equal columns in flexbox */
.snap-image { .snap-image {
// TODO: Make this configurable with variables
width: calc(100% / 4 - 10px); /* Column amount and width are configurable by style variables */
min-width: 200px; width: calc(100% / var(--columns) - 10px);
min-width: var(--min-width);
img { img {
aspect-ratio: 16/10; aspect-ratio: 16/10;
@@ -17,6 +17,7 @@
object-fit: cover; object-fit: cover;
} }
} }
}
.snap-lightbox { .snap-lightbox {
/** Default lightbox to hidden */ /** Default lightbox to hidden */

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

@@ -20,7 +20,7 @@
{{ end }} {{ end }}
{{/* Visible images */}} {{/* 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 }} {{ range $i, $img := $imgs }}
<div class="snap-image"> <div class="snap-image">
<img src="{{ $img }}" onclick="openModal({{ $galno }});currentSlide({{ $galno }}, {{ add $i 1 }});" class="hover-shadow"> <img src="{{ $img }}" onclick="openModal({{ $galno }});currentSlide({{ $galno }}, {{ add $i 1 }});" class="hover-shadow">