From 51e757b5270f5b42ff7b5e7364cd032fad35b1a5 Mon Sep 17 00:00:00 2001 From: "max.mehl" Date: Sun, 20 Oct 2019 22:27:27 +0200 Subject: [PATCH] initial commit --- LICENSES/MIT.txt | 19 ++++ README.md | 108 +++++++++++++++++++++ layouts/shortcodes/figure.html | 33 +++++++ layouts/shortcodes/gallery.html | 45 +++++++++ static/css/snap-gallery.css | 165 ++++++++++++++++++++++++++++++++ theme.yaml | 18 ++++ 6 files changed, 388 insertions(+) create mode 100644 LICENSES/MIT.txt create mode 100644 README.md create mode 100644 layouts/shortcodes/figure.html create mode 100644 layouts/shortcodes/gallery.html create mode 100644 static/css/snap-gallery.css create mode 100644 theme.yaml diff --git a/LICENSES/MIT.txt b/LICENSES/MIT.txt new file mode 100644 index 0000000..204b93d --- /dev/null +++ b/LICENSES/MIT.txt @@ -0,0 +1,19 @@ +MIT License Copyright (c) + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is furnished +to do so, subject to the following conditions: + +The above copyright notice and this permission notice (including the next +paragraph) shall be included in all copies or substantial portions of the +Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS +FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS +OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, +WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF +OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. diff --git a/README.md b/README.md new file mode 100644 index 0000000..b6a97b9 --- /dev/null +++ b/README.md @@ -0,0 +1,108 @@ + + +# hugo-snap-gallery + +Automagical css image gallery in [Hugo](https://gohugo.io/) using shortcodes. + +This is a fork of [easy gallery](https://github.com/liwenyip/hugo-easy-gallery). It is supposed to come without any JavaScript and therefore has limited features, but new JS-less stuff is planned. + +## Image Gallery Features + +- Custom `{{< figure >}}` shortcode that enables new features but is backwards-compatible with Hugo's built-in `{{< figure >}}`shortcode +- Use the `{{< figure >}}` shortcode by itself to enable pretty captions +- Put multiple `{{< figure >}}` shortcodes inside a `{{< gallery >}}` to create a pretty image gallery +- **Point `{{< gallery >}}` at a directory to generate a gallery of all images in that directory** +- Gallery is responsive, images are scaled/cropped to fill square (or other evenly-sized) tiles +- Pretty captions appear/slide/fade upon hovering over the image +- Only requires 3.8kB of CSS (unminified; you can minify it if you want) +- CSS is automatically loaded the first time you use the `{{< figure >}}` shortcode on each page + +## PhotoSwipe Features + +- Load PhotoSwipe by calling the `{{< load-photoswipe >}}` shortcode anywhere in your post +- Loads all of the `
` elements in your post, regardless of where in your post they appear, into a lightbox/carousel style image gallery +- Works with any existing `
` elements/shortcodes in your posts +- Does not require you to [pre-define the image sizes](http://photoswipe.com/documentation/faq.html#image-size) (the initialisation script pre-loads the image to determine its size; you can optionally pre-define the image size if you want to avoid this pre-loading) + +## Installation + +Use this like an additional Hugo theme. + + +## `{{< figure >}}` shortcode usage + +Specifying your image files: + +- `{{< figure src="thumb.jpg" link="image.jpg" >}}` will use `thumb.jpg` for thumbnail and `image.jpg` for lightbox +- `{{< figure src="image.jpg" >}}` or `{{< figure link="image.jpg" >}}` will use `image.jpg` for both thumbnail and lightbox +- `{{< figure link="image.jpg" thumb="-small" >}}` will use `image-small.jpg` for thumbnail and `image.jpg` for lightbox + +Optional parameters: + +- All the [features/parameters](https://gohugo.io/extras/shortcodes) of Hugo's built-in `figure` shortcode work as normal, i.e. src, link, title, caption, class, attr (attribution), attrlink, alt +- `size` (e.g. `size="1024x768"`) pre-defines the image size for PhotoSwipe. Use this option if you don't want to pre-load the linked image to determine its size. +- `class` allows you to set any custom classes you want on the `
` tag. + +Optional parameters for standalone `{{< figure >}}` shortcodes only (i.e. don't use on `{{< figure >}}` inside `{{< gallery >}}` - strange things may happen if you do): + +- `caption-position` and `caption-effect` work the same as for the `{{< gallery >}}` shortcode (see below). +- `width` defines the [`max-width`](https://www.w3schools.com/cssref/pr_dim_max-width.asp) of the image displayed on the page. If using a thumbnail for a standalone figure, set this equal to your thumbnail's native width to make the captions behave properly (or feel free to come up with a better solution and submit a pull request :-)). Also use this option if you don't have a thumbnail and you don't want the hi-res image to take up the entire width of the screen/container. + + +## `{{< gallery >}}` shortcode usage + +To specify a directory of image files: + +``` +{{< gallery dir="/img/your-directory-of-images/" />}}` +``` + +- The images are automatically captioned with the file name. +- `[image].jpg` is used for the hi-res image, and `[image]-thumb.jpg` is used for the thumbnails. +- If `[image]-thumb.jpg` doesn't exist, then `[image].jpg` will be used for both hi-res and thumbnail images. +- The default thumbnail suffix is `-thumb`, but you can specify a different one e.g. `thumb="-small"` or `thumb="_150x150"`. + +To specify individual image files: + +``` +{{< gallery >}} + {{< figure src="image1.jpg" >}} + {{< figure src="image2.jpg" >}} + {{< figure src="image3.jpg" >}} +{{< /gallery >}} +``` + +Optional parameters: + +- `caption-position` - determines the captions' position over the image. Options: + - `bottom` (default) + - `center` + - `none` hides captions on the page (they will only show in PhotoSwipe) +- `caption-effect` - determines if/how captions appear upon hover. Options: + - `slide` (default) + - `fade` + - `none` (captions always visible) +- `hover-transition` - determines if/how images change upon hover. Options: + - not set - smooth transition (default) + - `none` - hard transition + + +## CSS Hackers + +`snap-gallery.css` is designed to provide square tiles in a container with `max-width: 768px`. + +Here are some pointers if you want to adapt the CSS: + + - Change `.gallery {max-width: 768px;}` if you want a gallery wider than 768px. + - Change `min-width` in the `@media` styles to change the screen widths at which the layout changes + - Change `min-width: 9999px` in the last `@media` style to something sensible if you want to use a 4-tile layout + - If you want more than 4 tiles per row, set `width` = 100% / number of tiles per row + - `padding-bottom` = `width` gives square tiles. Change padding-bottom if you want some other aspect ratio, e.g. `width: 33.3%; padding-bottom: 25%` gives a 4:3 aspect ratio. + +## License + +MIT diff --git a/layouts/shortcodes/figure.html b/layouts/shortcodes/figure.html new file mode 100644 index 0000000..192c29a --- /dev/null +++ b/layouts/shortcodes/figure.html @@ -0,0 +1,33 @@ + + +{{- if not ($.Page.Scratch.Get "figurecount") }}{{ end }} +{{- $.Page.Scratch.Add "figurecount" 1 -}} + +{{- $thumb := .Get "src" | default (printf "%s." (.Get "thumb") | replace (.Get "link") ".") }} +
+
+
+ +
+ {{ with .Get "link" | default (.Get "src") }}{{ end }} + {{- if or (or (.Get "title") (.Get "caption")) (.Get "attr")}} +
+ {{- with .Get "title" }}

{{.}}

{{ end }} + {{- if or (.Get "caption") (.Get "attr")}} +

+ {{- .Get "caption" -}} + {{- with .Get "attrlink"}}{{ .Get "attr" }}{{ else }}{{ .Get "attr"}}{{ end -}} +

+ {{- end }} +
+ {{- end }} +
+
diff --git a/layouts/shortcodes/gallery.html b/layouts/shortcodes/gallery.html new file mode 100644 index 0000000..d6bb580 --- /dev/null +++ b/layouts/shortcodes/gallery.html @@ -0,0 +1,45 @@ + + + +{{- $.Page.Scratch.Add "figurecount" 1 }} +{{ $baseURL := .Site.BaseURL }} +
+ {{- with (.Get "dir") -}} + + {{- $files := readDir (print "/static/" .) }} + {{- range $files -}} + + {{- $thumbext := $.Get "thumb" | default "-thumb" }} + {{- $isthumb := .Name | findRE ($thumbext | printf "%s\\.") }} + {{- $isimg := lower .Name | findRE "\\.(gif|jpg|jpeg|tiff|png|bmp)" }} + {{- if and $isimg (not $isthumb) }} + {{- $caption := .Name | replaceRE "\\..*" "" | humanize }} + {{- $linkURL := print $baseURL ($.Get "dir") "" .Name | absURL }} + {{- $thumb := .Name | replaceRE "(\\.)" ($thumbext | printf "%s.") }} + {{- $thumbexists := where $files "Name" $thumb }} + {{- $thumbURL := print $baseURL ($.Get "dir") "/" $thumb | absURL }} +
+
+
+ {{ $caption }} +
+
+

{{ $caption }}

+
+ +
+
+ {{- end }} + {{- end }} + {{- else -}} + + {{ .Inner }} + {{- end }} +
diff --git a/static/css/snap-gallery.css b/static/css/snap-gallery.css new file mode 100644 index 0000000..c2ce5a9 --- /dev/null +++ b/static/css/snap-gallery.css @@ -0,0 +1,165 @@ +/* + SPDX-FileCopyrightText: 2019 Li-Wen Yip + SPDX-FileCopyrightText: 2019 Max Mehl + SPDX-License-Identifier: MIT + + Put this file in /static/css/hugo-easy-gallery.css + Documentation and licence at https://github.com/liwenyip/hugo-easy-gallery/ +*/ + + +/* +Grid Layout Styles +*/ +.gallery { + overflow: hidden; + margin: 10px; + max-width: 768px; + display: flex; + flex-wrap: wrap; +} +.gallery .box { + float: left; + position: relative; + /* Default: 1 tile wide */ + width: 100%; + padding-bottom: 100%; + margin: 0 auto; +} +@media only screen and (min-width : 365px) { + /* Tablet view: 2 tiles */ + .gallery .box { + width: 50%; + padding-bottom: 50%; + } +} +@media only screen and (min-width : 480px) { + /* Small desktop / ipad view: 3 tiles */ + .gallery .box { + width: 33.3%; + padding-bottom: 33.3%; /* */ + } +} +@media only screen and (min-width : 9999px) { + /* Medium desktop: 4 tiles */ + .box { + width: 25%; + padding-bottom: 25%; + } +} + +/* +Transition styles +*/ +.gallery.hover-transition figure, +.gallery.hover-effect-zoom .img, +.gallery:not(.caption-effect-appear) figcaption, +.fancy-figure:not(.caption-effect-appear) figcaption { + -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; +} +/* +figure styles +*/ +figure { + position:relative; /* purely to allow absolution positioning of figcaption */ + overflow: hidden; +} +.gallery figure { + position: absolute; + left: 5px; + right: 5px; + top: 5px; + bottom: 5px; +} +.gallery.hover-effect-grow figure:hover { + transform: scale(1.05); +} +.gallery.hover-effect-shrink figure:hover { + transform: scale(0.95); +} +.gallery.hover-effect-slidedown figure:hover { + transform: translateY(5px); +} +.gallery.hover-effect-slideup figure:hover { + transform: translateY(-5px); +} + +/* +img / a styles +*/ + +.gallery .img { + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; + background-size: cover; + background-position: 50% 50%; + background-repeat: no-repeat; +} +.gallery.hover-effect-zoom figure:hover .img { + transform: scale(1.05); +} +.gallery img { + display: none; /* only show the img if not inside a gallery */ +} +figure a { + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; +} + +/* +figcaption styles +*/ +.gallery figcaption, +.fancy-figure figcaption { + position: absolute; + bottom: 0; + left: 0; + right: 0; + background: #000; + color: #FFF; + text-align: center; + font-size: 75%; /* change this if you want bigger text */ + background: rgba(0, 0, 0, 0.5); + opacity: 1; + cursor: pointer; +} +.gallery.caption-position-none figcaption, +.fancy-figure.caption-position-none figcaption { + display: none; +} +.gallery.caption-position-center figcaption, +.fancy-figure.caption-position-center figcaption { + top: 0; + padding: 40% 5px; +} +.gallery.caption-position-bottom figcaption, +.fancy-figure.caption-position-bottom figcaption { + padding: 5px; +} +.gallery.caption-effect-fade figure:not(:hover) figcaption, +.gallery.caption-effect-appear figure:not(:hover) figcaption, +.fancy-figure.caption-effect-fade figure:not(:hover) figcaption, +.fancy-figure.caption-effect-appear figure:not(:hover) figcaption { + background: rgba(0, 0, 0, 0); + opacity: 0; +} +.gallery.caption-effect-slide.caption-position-bottom figure:not(:hover) figcaption, +.fancy-figure.caption-effect-slide.caption-position-bottom figure:not(:hover) figcaption { + margin-bottom: -100%; +} +.gallery.caption-effect-slide.caption-position-center figure:not(:hover) figcaption, +.fancy-figure.caption-effect-slide.caption-position-center figure:not(:hover) figcaption { + top: 100%; +} +figcaption p { + margin: auto; /* override style in theme */ +} diff --git a/theme.yaml b/theme.yaml new file mode 100644 index 0000000..e08d260 --- /dev/null +++ b/theme.yaml @@ -0,0 +1,18 @@ +# SPDX-FileCopyrightText: 2019 Li-Wen Yip +# SPDX-FileCopyrightText: 2019 Max Mehl +# SPDX-License-Identifier: MIT + +name: Snap Gallery +license: MIT +licenselink: https://src.mehl.mx/mxmehl/hugo-snap-gallery/src/branch/master/LICENSES/MIT.txt +description: Automagical css image gallery in Hugo using shortcodes. Fork of https://github.com/liwenyip/hugo-easy-gallery +homepage: https://src.mehl.mx/mxmehl/hugo-snap-gallery +tags: + - component +features: + - gallery +min_version: 0.50.0 + +author: + name: Max Mehl + homepage: https://mehl.mx