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

Compare commits

base: mxmehl:0a50d0214d5625f67ebf1e71677edc76d074e919
Branches Tags
mxmehl:master
mxmehl:v2.0 mxmehl:v1.1 mxmehl:v1.0 mxmehl:v0.1
..
compare: mxmehl:master
Branches Tags
mxmehl:master
mxmehl:v2.0 mxmehl:v1.1 mxmehl:v1.0 mxmehl:v0.1

3 Commits
0a50d0214d ... master

Author SHA1 Message Date
Max Mehl
d0fe8315cb fix REUSE compliance 2024-02-07 22:21:41 +01:00
Max Mehl
621d5e5ab2 cleanup old gallery files 2024-02-07 22:21:35 +01:00
Max Mehl
437b0202ba Complete rewrite (#1) 
A complete rewrite of the gallery plugin:

* Using flexbox
* Using lightweight JS for lightbox to avoid anchor links, and allow full rotation
* Add slideshow as an additional field
* Make many more things configurable
* Better support for dirs, allow mixed paths
* Translatable captions for many files using metadata files
* SCSS instead of CSS

Reviewed-on: #1
Co-authored-by: Max Mehl <mail@mehl.mx>
Co-committed-by: Max Mehl <mail@mehl.mx>
 2024-02-07 22:17:49 +01:00
8 changed files with 26 additions and 350 deletions
Expand all files Collapse all files

282
assets/scss/old.css
View File

@@ -1,282 +0,0 @@
/*
SPDX-FileCopyrightText: 2020 Max Mehl <mail@mehl.mx>
SPDX-License-Identifier: MIT
*/
/** GENERAL FIGURE LAYOUT **/
figure {
max-width: 90%;
margin: 10px auto;
display: block;
text-align: center;
}
/* make box with box-shadow only as large as image */
.snap-wrapper {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
display: inline-block;
}
figure a:hover {
text-decoration: none;
}
figure img {
max-width: 100%;
max-height: 100%;
}
figure.sm {
max-width: 30%;
}
figure.md {
max-width: 50%;
}
figure.lg {
max-width: 70%;
}
figure.pull-right {
padding: 10px 0 10px 10px;
}
figure.pull-left {
padding: 10px 10px 10px 0;
}
figure figcaption {
background-color: rgba(0, 0, 0, 0.5);
display: block;
font-size: .8em;
padding: 1px;
position: static;
text-align: center;
bottom: 0;
left: 0;
right: 0;
color: #FFF;
}
/* Extra classes for figures */
figure.no-border .snap-wrapper {
box-shadow: none;
}
/** GALLERY MARKUP **/
.snap-gallery {
margin: 10px;
display: flex;
justify-content: center;
flex-wrap: wrap;
}
/* avoid sick effects of inline-block on gallery elements */
.snap-gallery .snap-wrapper {
display: block;
}
.snap-gallery figure {
position: relative;
width: 30%;
padding-bottom: 30%;
margin: 1%;
text-align: left;
box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2),0 2px 4px 0 rgba(0,0,0,0.19);
}
.snap-gallery figcaption {
position: absolute;
}
.snap-gallery img.snap-thumb {
position: absolute;
object-fit: cover;
object-position: center;
height: 100%;
width: 100%;
}
.snap-gallery figure img.snap-thumb:hover {
transform: scale(1.02);
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
@media screen and (max-width: 767px) {
.snap-gallery figure {
width: 45%;
padding-bottom: 45%;
margin: 2%
}
}
@media screen and (max-width: 479px) {
.snap-gallery figure {
width: 90%;
padding-bottom: 90%;
margin: 3%;
}
}
/** LIGHTBOX MARKUP **/
.snap-lightbox {
/** Default lightbox to hidden */
display: none;
/** Position and style */
position: fixed;
z-index: 999;
width: 100%;
height: 100%;
text-align: center;
white-space: nowrap;
top: 0;
left: 0;
background: rgba(0,0,0,0.8);
}
/* effects when "activating" the figure */
.snap-lightbox:target {
/** Remove default browser outline */
outline: none;
/** Unhide lightbox **/
display: block;
}
/* Click on the complete background closes the lightbox */
/* Exception: arrow in gallery, they have higher z-index */
a.snap-lightbox-close {
position: fixed;
z-index: 800;
width: 100%;
height: 100%;
text-align: center;
white-space: nowrap;
top: 0;
left: 0;
}
/* keep lightbox in middle. TODO: hacky, and not realibly in middle */
.snap-lightbox::before {
content: "";
display: inline-block;
vertical-align: middle;
width: 0;
/* adjust for white space between pseudo element and next sibling */
margin-right: -.25em;
/* stretch line height */
height: 100%;
}
/* Container for image */
.snap-lightbox-inner {
display: inline-block;
vertical-align: middle;
white-space: normal;
max-width: 90%;
max-height: 80%;
height: 100%;
}
.snap-lightbox-inner p {
color: #fff;
z-index: 810;
position: relative;
}
/* prev/next arrows & close button */
.snap-lightbox-close-button {
position: fixed;
z-index: 950;
width: 5%;
height: calc(5vw); /* ~5% width */
right: 0;
top: 0;
}
.snap-lightbox-x::after {
content: "\00d7"; /* This will render the 'X' */
font-size: 3em;
font-style: normal;
font-weight: 700;
color: #000;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
.snap-lightbox-close-button:hover .snap-lightbox-x::after {
color: #fff;
transition: all 0.25s ease;
}
.snap-lightbox-prev, .snap-lightbox-next {
position: fixed;
z-index: 800;
width: 5%;
height: 100%;
text-align: center;
top: 0;
}
.snap-lightbox-prev {
left: 0;
}
.snap-lightbox-next {
right: 0;
}
.snap-lightbox-arrow {
display: inline-block;
position: fixed;
top: 50%;
z-index: 900;
border: solid #000;
border-width: 0 7px 7px 0;
display: inline-block;
padding: 1%;
}
span .snap-lightbox-arrow {
border-color: #5e5e5e;
}
.snap-lightbox-prev .snap-lightbox-arrow {
left: 2%;
transform: rotate(135deg);
-webkit-transform: rotate(135deg);
}
.snap-lightbox-next .snap-lightbox-arrow {
right: 2%;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
a.snap-lightbox-prev:hover > .snap-lightbox-arrow,
a.snap-lightbox-next:hover > .snap-lightbox-arrow {
border-color: #fff;
transition: all 0.25s ease;
}
@media screen and (max-width: 767px) {
.snap-lightbox-inner {
max-width: 80%;
}
.snap-lightbox-prev, .snap-lightbox-next {
width: 10%;
}
.snap-lightbox-close-button {
width: 10%;
height: calc(10vw); /* ~10% width */
}
}

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

@@ -1,3 +1,8 @@
/*
SPDX-FileCopyrightText: 2024 Max Mehl <https://mehl.mx>
SPDX-License-Identifier: MIT
*/
$gap: var(--gap);
.snap-gallery,

4
layouts/partials/gallery.html
View File

@@ -1,3 +1,7 @@
<!--
SPDX-FileCopyrightText: 2024 Max Mehl <https://mehl.mx>
SPDX-License-Identifier: MIT
-->
{{- $imgs := .imgs -}}
{{- $galno := .galno -}}
<div class="snap-gallery" style="--columns:{{ default 4 .columns }};--min-width:{{ default "200px" .minwidth }};--gap:10px;--cursor:{{ .cursor }};--aspectratio:{{ safeCSS (default "16/10" .aspectratio) }};">

4
layouts/partials/lightbox.html
View File

@@ -1,3 +1,7 @@
<!--
SPDX-FileCopyrightText: 2024 Max Mehl <https://mehl.mx>
SPDX-License-Identifier: MIT
-->
{{- $imgs := .imgs -}}
{{- $galno := .galno -}}
<div class="snap-lightbox" id="snap-lightbox-{{ $galno }}">

4
layouts/partials/slideshow.html
View File

@@ -1,3 +1,7 @@
<!--
SPDX-FileCopyrightText: 2024 Max Mehl <https://mehl.mx>
SPDX-License-Identifier: MIT
-->
{{- $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 }};--aspectratio:{{ safeCSS (default "16/10" .aspectratio) }};">

68
layouts/shortcodes/figure.html
View File

@@ -1,68 +0,0 @@
<!-- Images used to open the lightbox -->
<div class="row">
<div class="column">
<img src="img1.jpg" onclick="openModal();currentSlide(1)" class="hover-shadow">
</div>
<div class="column">
<img src="img2.jpg" onclick="openModal();currentSlide(2)" class="hover-shadow">
</div>
<div class="column">
<img src="img3.jpg" onclick="openModal();currentSlide(3)" class="hover-shadow">
</div>
<div class="column">
<img src="img4.jpg" onclick="openModal();currentSlide(4)" class="hover-shadow">
</div>
</div>
<!-- The Modal/Lightbox -->
<div id="myModal" class="modal">
<span class="close cursor" onclick="closeModal()">&times;</span>
<div class="modal-content">
<div class="mySlides">
<div class="numbertext">1 / 4</div>
<img src="img1.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">2 / 4</div>
<img src="img2.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">3 / 4</div>
<img src="img3.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">4 / 4</div>
<img src="img4.jpg" style="width:100%">
</div>
<!-- Next/previous controls -->
<a class="prev" onclick="plusSlides(-1)">&#10094;</a>
<a class="next" onclick="plusSlides(1)">&#10095;</a>
<!-- Caption text -->
<div class="caption-container">
<p id="caption"></p>
</div>
<!-- Thumbnail image controls -->
<div class="column">
<img class="demo" src="img1.jpg" onclick="currentSlide(1)" alt="Nature">
</div>
<div class="column">
<img class="demo" src="img2.jpg" onclick="currentSlide(2)" alt="Snow">
</div>
<div class="column">
<img class="demo" src="img3.jpg" onclick="currentSlide(3)" alt="Mountains">
</div>
<div class="column">
<img class="demo" src="img4.jpg" onclick="currentSlide(4)" alt="Lights">
</div>
</div>
</div>

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

@@ -1,3 +1,7 @@
<!--
SPDX-FileCopyrightText: 2024 Max Mehl <https://mehl.mx>
SPDX-License-Identifier: MIT
-->
{{/* Count number of gallery on page */}}
{{- $.Page.Scratch.Add "gallerycount" 1 -}}
{{- $galno := $.Page.Scratch.Get "gallerycount" -}}

5
static/js/snap-gallery.js
View File

@@ -1,3 +1,8 @@
/*
SPDX-FileCopyrightText: 2023 Max Mehl <https://mehl.mx>
SPDX-License-Identifier: MIT
*/
// Variables
var lightbox_baseid = "snap-lightbox-";
var slideshow_baseid = "snap-slideshow-";