initial commit

LICENSES/MIT.txt

@@ -0,0 +1,19 @@
+MIT License Copyright (c) <year> <copyright holders>
+
+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.

README.md

@@ -0,0 +1,108 @@
+<!--
+  SPDX-FileCopyrightText: 2019 Li-Wen Yip <liwen.yip@gmail.com>
+  SPDX-FileCopyrightText: 2019 Max Mehl <mail@mehl.mx>
+  SPDX-License-Identifier: MIT
+-->
+
+# 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 `<figure>` elements in your post, regardless of where in your post they appear, into a lightbox/carousel style image gallery
+- Works with any existing `<figure>` 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 `<figure>` 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

layouts/shortcodes/figure.html

@@ -0,0 +1,33 @@
+<!--
+  SPDX-FileCopyrightText: 2019 Li-Wen Yip <liwen.yip@gmail.com>
+  SPDX-FileCopyrightText: 2019 Max Mehl <mail@mehl.mx>
+  SPDX-License-Identifier: MIT
+
+  Put this file in /layouts/shortcodes/figure.html
+  NB this overrides Hugo's built-in "figure" shortcode but is backwards compatible
+  Documentation and licence at https://github.com/liwenyip/hugo-easy-gallery/
+-->
+<!-- count how many times we've called this shortcode; load the css if it's the first time -->
+{{- if not ($.Page.Scratch.Get "figurecount") }}<link rel="stylesheet" href="/css/snap-gallery.css" />{{ end }}
+{{- $.Page.Scratch.Add "figurecount" 1 -}}
+<!-- use either src or link-thumb for thumbnail image -->
+{{- $thumb := .Get "src" | default (printf "%s." (.Get "thumb") | replace (.Get "link") ".") }}
+<div class="box{{ with .Get "caption-position" }} fancy-figure caption-position-{{.}}{{end}}{{ with .Get "caption-effect" }} caption-effect-{{.}}{{end}}" {{ with .Get "width" }}style="max-width:{{.}}"{{end}}>
+  <figure {{ with .Get "class" }}class="{{.}}"{{ end }} itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
+    <div class="img"{{ if .Parent }} style="background-image: url('{{ $thumb | relURL }}');"{{ end }}{{ with .Get "size" }} data-size="{{.}}"{{ end }}>
+      <img itemprop="thumbnail" src="{{ $thumb | relURL }}" {{ with .Get "alt" | default (.Get "caption") }}alt="{{.}}"{{ end }}/><!-- <img> hidden if in .gallery -->
+    </div>
+    {{ with .Get "link" | default (.Get "src") }}<a href="{{.}}" itemprop="contentUrl"></a>{{ end }}
+    {{- if or (or (.Get "title") (.Get "caption")) (.Get "attr")}}
+      <figcaption>
+        {{- with .Get "title" }}<h4>{{.}}</h4>{{ end }}
+        {{- if or (.Get "caption") (.Get "attr")}}
+          <p>
+            {{- .Get "caption" -}}
+            {{- with .Get "attrlink"}}<a href="{{.}}">{{ .Get "attr" }}</a>{{ else }}{{ .Get "attr"}}{{ end -}}
+          </p>
+        {{- end }}
+      </figcaption>
+    {{- end }}
+  </figure>
+</div>

layouts/shortcodes/gallery.html

@@ -0,0 +1,45 @@
+<!--
+  SPDX-FileCopyrightText: 2019 Li-Wen Yip <liwen.yip@gmail.com>
+  SPDX-FileCopyrightText: 2019 Max Mehl <mail@mehl.mx>
+  SPDX-License-Identifier: MIT
+
+  Put this file in /layouts/shortcodes/gallery.html
+  Documentation and licence at https://github.com/liwenyip/hugo-easy-gallery/
+-->
+<!-- count how many times we've called this shortcode; load the css if it's the first time -->
+<link rel="stylesheet" href="/css/snap-gallery.css" />
+{{- $.Page.Scratch.Add "figurecount" 1 }}
+{{ $baseURL := .Site.BaseURL }}
+<div class="gallery caption-position-{{ with .Get "caption-position" | default "bottom" }}{{.}}{{end}} caption-effect-{{ with .Get "caption-effect" | default "slide" }}{{.}}{{end}} hover-effect-{{ with .Get "hover-effect" | default "zoom" }}{{.}}{{end}} {{ if ne (.Get "hover-transition") "none" }}hover-transition{{end}}" itemscope itemtype="http://schema.org/ImageGallery">
+	{{- with (.Get "dir") -}}
+		<!-- If a directory was specified, generate figures for all of the images in the directory -->
+		{{- $files := readDir (print "/static/" .) }}
+		{{- range $files -}}
+			<!-- skip files that aren't images, or that inlcude the thumb suffix in their name -->
+			{{- $thumbext := $.Get "thumb" | default "-thumb" }}
+			{{- $isthumb := .Name | findRE ($thumbext | printf "%s\\.") }}<!-- is the current file a thumbnail image? -->
+			{{- $isimg := lower .Name | findRE "\\.(gif|jpg|jpeg|tiff|png|bmp)" }}<!-- is the current file an image? -->
+			{{- if and $isimg (not $isthumb) }}
+				{{- $caption :=  .Name | replaceRE "\\..*" "" | humanize }}<!-- humanized filename without extension -->
+				{{- $linkURL := print $baseURL ($.Get "dir") "" .Name | absURL }}<!-- absolute URL to hi-res image -->
+				{{- $thumb := .Name | replaceRE "(\\.)" ($thumbext | printf "%s.") }}<!-- filename of thumbnail image -->
+				{{- $thumbexists := where $files "Name" $thumb }}<!-- does a thumbnail image exist? --> 
+				{{- $thumbURL := print $baseURL ($.Get "dir") "/" $thumb | absURL }}<!-- absolute URL to thumbnail image -->
+				<div class="box">
+				  <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
+				    <div class="img" style="background-image: url('{{ if $thumbexists }}{{ $thumbURL }}{{ else }}{{ $linkURL }}{{ end }}');" >
+				      <img itemprop="thumbnail" src="{{ if $thumbexists }}{{ $thumbURL }}{{ else }}{{ $linkURL }}{{ end }}" alt="{{ $caption }}" /><!-- <img> hidden if in .gallery -->
+				    </div>
+			      <figcaption>
+		          <p>{{ $caption }}</p>
+			      </figcaption>
+				    <a href="{{ $linkURL }}" itemprop="contentUrl" class="hiddenlink" target="_blank"></a><!-- put <a> last so it is stacked on top -->
+				  </figure>
+				</div>
+			{{- end }}
+		{{- end }}
+	{{- else -}}
+		<!-- If no directory was specified, include any figure shortcodes called within the gallery -->
+	  {{ .Inner }}
+	{{- end }}
+</div>

static/css/snap-gallery.css

@@ -0,0 +1,165 @@
+/*
+  SPDX-FileCopyrightText: 2019 Li-Wen Yip <liwen.yip@gmail.com>
+  SPDX-FileCopyrightText: 2019 Max Mehl <mail@mehl.mx>
+  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 */
+}

theme.yaml

@@ -0,0 +1,18 @@
+# SPDX-FileCopyrightText: 2019 Li-Wen Yip <liwen.yip@gmail.com>
+# SPDX-FileCopyrightText: 2019 Max Mehl <mail@mehl.mx>
+# 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