diff --git a/layouts/shortcodes/figure.bak.html b/layouts/shortcodes/figure.bak.html new file mode 100644 index 0000000..b58b09b --- /dev/null +++ b/layouts/shortcodes/figure.bak.html @@ -0,0 +1,87 @@ + + +{{- if not ($.Page.Scratch.Get "figurecount") }}{{ end }} +{{- $.Page.Scratch.Add "figurecount" 1 -}} + +{{- $thumb := .Get "src" -}} + + +{{- $figid := "" -}} +{{- $galid := "" -}} +{{- $id := "" -}} +{{- $previd := "" -}} +{{- $nextid := "" -}} +{{- if .Parent -}} + {{- $galid = .Page.Scratch.Get "gallery" -}} + {{- if not $galid }}{{ $galid = 0 }}{{ end -}} + {{- $galid = add $galid 1 -}} + {{- $.Page.Scratch.Add "thisgalfig" 1 -}} + {{- $figid = .Page.Scratch.Get "thisgalfig" -}} +{{- else -}} + {{- $.Page.Scratch.Add "nogalfig" 1 -}} + {{- $figid = .Page.Scratch.Get "nogalfig" -}} +{{- end -}} +{{- if $galid -}} + {{- $id = print "gal" $galid "-" "fig" $figid -}} + {{- $previd = print "gal" $galid "-" "fig" (sub $figid 1) -}} + {{- $nextid = print "gal" $galid "-" "fig" (add $figid 1) -}} +{{- else -}} + {{- $id = print "fig" $figid -}} +{{- end -}} + +
+
+ {{ if (.Get "link") -}} + + {{ else -}} + {{ if not (eq (.Get "lightbox") "none") }}{{ end }} + {{- end -}} + + {{ . }} + {{- if or (.Get "caption") (.Get "attr")}} +
+ {{- .Get "caption" | markdownify -}} + {{- with .Get "attr" }} {{ . | markdownify}}{{ end -}} +
+ {{- end }} + + + {{- if not (eq (.Get "lightbox") "none") -}} +
+ +
+ +

+ {{- if or (.Get "caption") (.Get "attr") -}} + {{- .Get "caption" | markdownify -}} + {{- with .Get "attrlink" }} {{- end -}} + {{- with .Get "attr" }} {{ . | markdownify}}{{ end -}} + {{- with .Get "attrlink" }}{{- end -}} + {{- end }} +

+
+ + {{- if .Parent -}} + {{- if not (eq $figid 1) -}} + + {{- else -}} + + {{- end -}} + + + {{- end }} +
+ {{- end -}} +
+
diff --git a/layouts/shortcodes/figure.html b/layouts/shortcodes/figure.html index b58b09b..ba045ca 100644 --- a/layouts/shortcodes/figure.html +++ b/layouts/shortcodes/figure.html @@ -1,87 +1,68 @@ - - -{{- if not ($.Page.Scratch.Get "figurecount") }}{{ end }} -{{- $.Page.Scratch.Add "figurecount" 1 -}} - -{{- $thumb := .Get "src" -}} - - -{{- $figid := "" -}} -{{- $galid := "" -}} -{{- $id := "" -}} -{{- $previd := "" -}} -{{- $nextid := "" -}} -{{- if .Parent -}} - {{- $galid = .Page.Scratch.Get "gallery" -}} - {{- if not $galid }}{{ $galid = 0 }}{{ end -}} - {{- $galid = add $galid 1 -}} - {{- $.Page.Scratch.Add "thisgalfig" 1 -}} - {{- $figid = .Page.Scratch.Get "thisgalfig" -}} -{{- else -}} - {{- $.Page.Scratch.Add "nogalfig" 1 -}} - {{- $figid = .Page.Scratch.Get "nogalfig" -}} -{{- end -}} -{{- if $galid -}} - {{- $id = print "gal" $galid "-" "fig" $figid -}} - {{- $previd = print "gal" $galid "-" "fig" (sub $figid 1) -}} - {{- $nextid = print "gal" $galid "-" "fig" (add $figid 1) -}} -{{- else -}} - {{- $id = print "fig" $figid -}} -{{- end -}} - -
-
- {{ if (.Get "link") -}} - - {{ else -}} - {{ if not (eq (.Get "lightbox") "none") }}{{ end }} - {{- end -}} - - {{ . }} - {{- if or (.Get "caption") (.Get "attr")}} -
- {{- .Get "caption" | markdownify -}} - {{- with .Get "attr" }} {{ . | markdownify}}{{ end -}} -
- {{- end }} - - - {{- if not (eq (.Get "lightbox") "none") -}} -
- -
- -

- {{- if or (.Get "caption") (.Get "attr") -}} - {{- .Get "caption" | markdownify -}} - {{- with .Get "attrlink" }} {{- end -}} - {{- with .Get "attr" }} {{ . | markdownify}}{{ end -}} - {{- with .Get "attrlink" }}{{- end -}} - {{- end }} -

-
- - {{- if .Parent -}} - {{- if not (eq $figid 1) -}} - - {{- else -}} - - {{- end -}} - - - {{- end }} -
- {{- end -}} + +
+
+
-
+
+ +
+
+ +
+
+ +
+ + + + diff --git a/layouts/shortcodes/gallery.html b/layouts/shortcodes/gallery.bak.html similarity index 100% rename from layouts/shortcodes/gallery.html rename to layouts/shortcodes/gallery.bak.html diff --git a/layouts/shortcodes/snap-dir.html b/layouts/shortcodes/snap-dir.bak.html similarity index 100% rename from layouts/shortcodes/snap-dir.html rename to layouts/shortcodes/snap-dir.bak.html diff --git a/layouts/shortcodes/snap-gallery.html b/layouts/shortcodes/snap-gallery.html new file mode 100644 index 0000000..3871b0a --- /dev/null +++ b/layouts/shortcodes/snap-gallery.html @@ -0,0 +1,53 @@ + + + +{{/* Initialise variables */}} +{{ $imgs := slice }} + + +{{ if .Params.isdir }} + {{/* Get images from folder, somehow put into map */}} +{{ else }} + {{ range (split .Params.src ",") }} + {{ $imgs = $imgs | append (trim . " ") }} + {{ end }} +{{ end }} + +{{/* Visible images */}} +
+{{ range $i, $img := $imgs }} +
+ +
+{{ end }} +
+ +{{/* The Modal/Lightbox */}} + diff --git a/static/css/snap-gallery.css b/static/css/snap-gallery.css index ca9e5ca..118712b 100644 --- a/static/css/snap-gallery.css +++ b/static/css/snap-gallery.css @@ -1,282 +1,125 @@ -/* - SPDX-FileCopyrightText: 2020 Max Mehl - SPDX-License-Identifier: MIT -*/ - -/** GENERAL FIGURE LAYOUT **/ - -figure { - max-width: 90%; - margin: 10px auto; - display: block; - text-align: center; +.row > .column { + padding: 0 8px; } -/* 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 { +.row:after { 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%; + display: table; + clear: both; } -/* Container for image */ -.snap-lightbox-inner { - display: inline-block; - vertical-align: middle; - white-space: normal; - max-width: 90%; - max-height: 80%; - height: 100%; +/* Create four equal columns that floats next to eachother */ +.column { + float: left; + width: 25%; } -.snap-lightbox-inner p { - color: #fff; - z-index: 810; - position: relative; -} - -/* prev/next arrows & close button */ - -.snap-lightbox-close-button { +/* The Modal (background) */ +.modal { + display: none; 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 { + z-index: 1; + padding-top: 100px; left: 0; + top: 0; + width: 100%; + height: 100%; + overflow: auto; + background-color: black; } -.snap-lightbox-next { - right: 0; +/* Modal Content */ +.modal-content { + position: relative; + background-color: #fefefe; + margin: auto; + padding: 0; + width: 90%; + max-width: 1200px; } -.snap-lightbox-arrow { - display: inline-block; - position: fixed; +/* The Close Button */ +.close { + color: white; + position: absolute; + top: 10px; + right: 25px; + font-size: 35px; + font-weight: bold; +} + +.close:hover, +.close:focus { + color: #999; + text-decoration: none; + cursor: pointer; +} + +/* Hide the slides by default */ +.mySlides { + display: none; +} + +/* Next & previous buttons */ +.prev, +.next { + cursor: pointer; + position: absolute; top: 50%; - z-index: 900; - border: solid #000; - border-width: 0 7px 7px 0; - display: inline-block; - padding: 1%; + width: auto; + padding: 16px; + margin-top: -50px; + color: white; + font-weight: bold; + font-size: 20px; + transition: 0.6s ease; + border-radius: 0 3px 3px 0; + user-select: none; + -webkit-user-select: none; } -span .snap-lightbox-arrow { - border-color: #5e5e5e; +/* Position the "next button" to the right */ +.next { + right: 0; + border-radius: 3px 0 0 3px; } -.snap-lightbox-prev .snap-lightbox-arrow { - left: 2%; - transform: rotate(135deg); - -webkit-transform: rotate(135deg); +/* On hover, add a black background color with a little bit see-through */ +.prev:hover, +.next:hover { + background-color: rgba(0, 0, 0, 0.8); } -.snap-lightbox-next .snap-lightbox-arrow { - right: 2%; - transform: rotate(-45deg); - -webkit-transform: rotate(-45deg); +/* Number text (1/3 etc) */ +.numbertext { + color: #f2f2f2; + font-size: 12px; + padding: 8px 12px; + position: absolute; + top: 0; } -a.snap-lightbox-prev:hover > .snap-lightbox-arrow, -a.snap-lightbox-next:hover > .snap-lightbox-arrow { - border-color: #fff; - transition: all 0.25s ease; +/* Caption text */ +.caption-container { + text-align: center; + background-color: black; + padding: 2px 16px; + color: white; } -@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 */ - } +img.demo { + opacity: 0.6; +} + +.img-active, +.demo:hover { + opacity: 1 !important; +} + +img.hover-shadow { + transition: 0.3s; +} + +.hover-shadow:hover { + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); } diff --git a/static/js/snap-gallery.js b/static/js/snap-gallery.js new file mode 100644 index 0000000..b8b40ac --- /dev/null +++ b/static/js/snap-gallery.js @@ -0,0 +1,40 @@ +// Open the Modal +function openModal() { + document.getElementById("myModal").style.display = "block"; +} + +// Close the Modal +function closeModal() { + document.getElementById("myModal").style.display = "none"; +} + +var slideIndex = 1; +showSlides(slideIndex); + +// Next/previous controls +function plusSlides(n) { + showSlides(slideIndex += n); +} + +// Thumbnail image controls +function currentSlide(n) { + showSlides(slideIndex = n); +} + +function showSlides(n) { + var i; + var slides = document.getElementsByClassName("mySlides"); + var dots = document.getElementsByClassName("demo"); + var captionText = document.getElementById("caption"); + if (n > slides.length) { slideIndex = 1 } + if (n < 1) { slideIndex = slides.length } + for (i = 0; i < slides.length; i++) { + slides[i].style.display = "none"; + } + for (i = 0; i < dots.length; i++) { + dots[i].className = dots[i].className.replace(" img-active", ""); + } + slides[slideIndex - 1].style.display = "block"; + dots[slideIndex - 1].className += " img-active"; + captionText.innerHTML = dots[slideIndex - 1].alt; +}