complete rewrite of this project

2020-03-09 13:20:20 +01:00
parent 51e757b527
commit 81ece5842c
6 changed files with 429 additions and 271 deletions
--- a/README.md
+++ b/README.md
@@ -1,72 +1,57 @@
 <!--
-  SPDX-FileCopyrightText: 2019 Li-Wen Yip <liwen.yip@gmail.com>
-  SPDX-FileCopyrightText: 2019 Max Mehl <mail@mehl.mx>
+  SPDX-FileCopyrightText: 2020 Max Mehl <mail@mehl.mx>
  SPDX-License-Identifier: MIT
 -->

 # hugo-snap-gallery

-Automagical css image gallery in [Hugo](https://gohugo.io/) using shortcodes.
+Automagical css image gallery in [Hugo](https://gohugo.io/) using shortcodes. No JavaScript is used, just plain CSS.

-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.
+## Features

-## Image Gallery Features
-
- Custom `{{< figure >}}` shortcode that enables new features but is backwards-compatible with Hugo's built-in `{{< figure >}}`shortcode
+- Custom `{{< figure >}}` shortcode that enables new features but is mostly backwards-compatible with Hugo's built-in `{{< figure >}}`shortcode
+- All pictures can be expanded on click in a CSS-only lightbox
 - 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)
+- Use the `{{< snap-dir >}}` shortcode inside a `{{< gallery >}}` to show all containing files nicely
+- Next/prev buttons in galleries
+- The gallery is responsive, images are scaled/cropped to fill square tiles
+- Pretty captions outside and inside lightbox 
+- Only requires 4kB 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.
+Use this like an additional Hugo theme, so add it to the `theme` config. Example:
+
+```
+theme = [ "hugo-sustain", "hugo-snap-gallery" ]
+```


 ## `{{< 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
+- `{{< figure src="image.jpg" >}}` will just show the image with no caption, and open the full version of it when clicked
+- `{{< figure src="image.jpg" capation="My description" >}}` will show the image and open the full version of it when clicked, and shows the caption text in both views. Markdown is possible
+- `{{< figure src="image.jpg" link="http://example.com" >}}` will use `image.jpg` for thumbnail and link to `http://example.com` when clicked

 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.
+- All the [features/parameters](https://gohugo.io/content-management/shortcodes/#figure) of Hugo's built-in `figure` shortcode work as normal, i.e. src, link, rel, title, caption, class, attr (attribution), attrlink, alt. width and height might lead to strange results when used inside `{{< gallery >}}`.
 - `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. 
+Optional parameters work for standalone `{{< figure >}}` shortcodes and inside of `{{< gallery >}}`. However, they cannot be applied to `{{< snap-dir >}}`.


 ## `{{< gallery >}}` shortcode usage

-To specify a directory of image files:
+### Using defined images

-```
-{{< gallery dir="/img/your-directory-of-images/" />}}`
-```
+To specify individual image files, call it like in the following example. All parameters for the figure should work as described above.

- 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 >}}
@@ -76,33 +61,34 @@ To specify individual image files:
 {{< /gallery >}}
 ```

-Optional parameters:
+Inside of the lightbox (so when clicked on one image), you will see forward and backward arrows on the right and left side. The backward arrow will not work when you are on the first image of a gallery. The forward arrow however will still show when on the last image but just close the frame.

- `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
+
+### Using a whole directory
+
+To specify a directory full of image files, use the example below. This will use all files (make sure it's only images!) and display them in a gallery. You cannot define captions or other parameters for the individual images:
+
+```
+{{< gallery >}}
+  {{< snap-dir srcdir="/img/blog/orr" >}}
+{{< /gallery >}}
+```
+
+The navigation inside the lightbox will work as with the individually defined gallery image, and even recognise when the gallery is at its last image.


 ## CSS Hackers

-`snap-gallery.css` is designed to provide square tiles in a container with `max-width: 768px`.
+`snap-gallery.css` is designed to provide square tiles. The gallery contains three tiles per row on larger screens, and will limit to 2 or 1 tile per row if the screen is smaller. To change that, you should look at the three definition of `.snap-gallery figure`. Please feel free to contact me if you found a more flexible way to change that.

-Here are some pointers if you want to adapt the CSS:
+Other than that, the CSS should be simple enough to allow modifications.

- - 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.
+## Credits
+
+The original inspiration for this shortcode comes from [Li-Wen Yip's easy-gallery](https://github.com/liwenyip/hugo-easy-gallery). However, snap-gallery is a 98% rewrite.

 ## License

-MIT
+This repository follows the REUSE best practices for clear copyright and licensing information. The license texts for all used licenses can be found in the LICENSES/ directory under the root of this repository. Visit [reuse.software](https://reuse.software) for more information.
+
+The main license of this repo is MIT.
--- a/layouts/shortcodes/figure.html
+++ b/layouts/shortcodes/figure.html
@@ -1,33 +1,83 @@
 <!--
-  SPDX-FileCopyrightText: 2019 Li-Wen Yip <liwen.yip@gmail.com>
-  SPDX-FileCopyrightText: 2019 Max Mehl <mail@mehl.mx>
+  SPDX-FileCopyrightText: 2020 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")}}
+<!-- use src image -->
+{{- $thumb := .Get "src" -}}
+
+<!-- set unique ID depending on whether part of gallery or alone -->
+{{- $figid := "" -}}
+{{- $galid := "" -}}
+{{- $id := "" -}}
+{{- $previd := "" -}}
+{{- $nextid := "" -}}
+{{- if .Parent -}} <!-- gallery -->
+  {{- $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 -}} <!-- standalone figure -->
+  {{- $.Page.Scratch.Add "nogalfig" 1 -}}
+  {{- $figid = .Page.Scratch.Get "nogalfig" -}}
+{{- end -}}
+{{- if $galid -}} <!-- gallery -->
+  {{- $id = print "gal" $galid "-" "fig" $figid -}}
+  {{- $previd = print "gal" $galid "-" "fig" (sub $figid 1) -}}
+  {{- $nextid = print "gal" $galid "-" "fig" (add $figid 1) -}}
+{{- else -}} <!-- standalone figure -->
+  {{- $id = print "fig" $figid -}}
+{{- end -}}
+
+<figure {{ with .Get "class" }}class="{{.}}"{{ end }}>
+  {{ if (.Get "link") -}}
+    <a href="{{ .Get "link" }}"
+       {{- with .Get "target" }} target="{{ . }}"{{ end -}}
+       {{- with .Get "rel" }} rel="{{ . }}"{{ end -}}
+       >
+  {{ else -}}
+    <a href="#{{ $id }}">
+  {{- end -}}
+  <!-- THUMBNAIL -->
+    <img src="{{ $thumb | relURL }}" class="snap-thumb"
+    {{- with .Get "alt" }} alt="{{ . }}"{{ end -}}
+    {{- with .Get "title" }} title="{{ . }}"{{ end -}}
+    {{- with .Get "height" }} height="{{ . }}"{{ end -}}
+    {{- with .Get "width" }} width="{{ . }}"{{ end -}}
+     />
+    {{- if or (.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 }}
+        {{- .Get "caption" | markdownify -}}
+        {{- with .Get "attr" }} {{ . | markdownify}}{{ end -}}
      </figcaption>
    {{- end }}
-  </figure>
-</div>
+  </a>
+  <!-- FULL IMAGE; HIDDEN -->
+  <div class="snap-lightbox" id="{{ $id }}">
+    <a href="#_" class="snap-lightbox-close"></a>
+    <div class="snap-lightbox-inner">
+      <img src="{{ .Get "src" }}" {{ with .Get "alt" }}alt="{{ . }}"{{ end }} />
+      <p>
+      {{- if or (.Get "caption") (.Get "attr") -}}
+        {{- .Get "caption" | markdownify -}}
+        {{- with .Get "attrlink" }} <a href="{{ . }}">{{- end -}}
+        {{- with .Get "attr" }} {{ . | markdownify}}{{ end -}}
+        {{- with .Get "attrlink" }}</a>{{- end -}}
+      {{- end }}
+      </p>
+    </div>
+    <a href="#_" class="snap-lightbox-close-button"><i class="snap-lightbox-x"></i></a>
+    {{- if .Parent -}}
+      {{- if not (eq $figid 1) -}}
+        <a href="#{{ $previd }}" class="snap-lightbox-prev"><i class="snap-lightbox-arrow"></i></a>
+      {{- else -}}
+        <span class="snap-lightbox-prev"><i class="snap-lightbox-arrow"></i></span>
+      {{- end -}}
+      <!-- TODO: Somehow try to identify whether this is the last element in the gallery -->
+      <a href="#{{ $nextid }}" class="snap-lightbox-next"><i class="snap-lightbox-arrow"></i></a>
+    {{- end }}
+  </div>
+</figure>
--- a/layouts/shortcodes/gallery.html
+++ b/layouts/shortcodes/gallery.html
@@ -1,45 +1,11 @@
 <!--
-  SPDX-FileCopyrightText: 2019 Li-Wen Yip <liwen.yip@gmail.com>
-  SPDX-FileCopyrightText: 2019 Max Mehl <mail@mehl.mx>
+  SPDX-FileCopyrightText: 2020 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 }}
+{{- .Page.Scratch.Add "gallery" 1 -}}
+<div class="snap-gallery">
+  {{ .Inner }}
 </div>
+<!-- delete count of gallery figures (but not those of standalone figures -->
+{{- .Page.Scratch.Delete "thisgalfig" -}}
--- a/layouts/shortcodes/snap-dir.html
+++ b/layouts/shortcodes/snap-dir.html
@@ -0,0 +1,59 @@
+<!--
+  SPDX-FileCopyrightText: 2020 Max Mehl <mail@mehl.mx>
+  SPDX-License-Identifier: MIT
+-->
+<!-- This file is a variation of figure.html specifically to load all
+     files from a directory. Assumes that is has the gallery shortcode
+     as parent
+-->
+<!-- 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 -}}
+
+{{- $files := readDir (print "/static" (.Get "srcdir")) -}}
+{{- $maxid := len $files -}}
+
+{{- range $files -}}
+  {{ $src := (print ($.Get "srcdir") "/" .Name) }}
+  {{- $thumb := $src -}}
+
+  <!-- set unique ID for gallery and figure -->
+  {{- $figid := "" -}}
+  {{- $galid := "" -}}
+  {{- $id := "" -}}
+  {{- $previd := "" -}}
+  {{- $nextid := "" -}}
+  {{- $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" -}}
+  {{- $id = print "gal" $galid "-" "fig" $figid -}}
+  {{- $previd = print "gal" $galid "-" "fig" (sub $figid 1) -}}
+  {{- $nextid = print "gal" $galid "-" "fig" (add $figid 1) -}}
+
+  <figure>
+    <!-- THUMBNAIL -->
+    <a href="#{{ $id }}">
+      <img src="{{ $thumb | relURL }}" class="snap-thumb" />
+    </a>
+    <!-- FULL IMAGE; HIDDEN -->
+    <div class="snap-lightbox" id="{{ $id }}">
+      <a href="#_" class="snap-lightbox-close"></a>
+      <div class="snap-lightbox-inner">
+        <img src='{{ $src }}' />
+      </div>
+      <a href="#_" class="snap-lightbox-close-button"><i class="snap-lightbox-x"></i></a>
+      {{- if not (eq $figid 1) -}}
+        <a href="#{{ $previd }}" class="snap-lightbox-prev"><i class="snap-lightbox-arrow"></i></a>
+      {{- else -}}
+        <span class="snap-lightbox-prev"><i class="snap-lightbox-arrow"></i></span>
+      {{- end -}}
+      {{- if not (eq $figid $maxid) -}}
+        <a href="#{{ $nextid }}" class="snap-lightbox-next"><i class="snap-lightbox-arrow"></i></a>
+      {{- else -}}
+        <span class="snap-lightbox-next"><i class="snap-lightbox-arrow"></i></span>
+      {{- end }}
+    </div>
+  </figure>
+{{ end }}
--- a/static/css/snap-gallery.css
+++ b/static/css/snap-gallery.css
@@ -1,165 +1,263 @@
 /*
-  SPDX-FileCopyrightText: 2019 Li-Wen Yip <liwen.yip@gmail.com>
-  SPDX-FileCopyrightText: 2019 Max Mehl <mail@mehl.mx>
+  SPDX-FileCopyrightText: 2020 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/
 */

+/** GENERAL FIGURE LAYOUT **/

-/*
-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);
+  max-width: 90%;
+  margin: 30px auto 40px;
+  display: block;
+  text-align: center;
+  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
 }

-/*
-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;
+figure a:hover {
+  text-decoration: none;
 }

-/*
-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;
+figure img {
+  max-width: 100%;
+  max-height: 100%;
 }
-.gallery.caption-position-none figcaption,
-.fancy-figure.caption-position-none figcaption  {
-    display: none;
+
+figure.small img {
+  max-height: 150px;
 }
-.gallery.caption-position-center figcaption,
-.fancy-figure.caption-position-center figcaption {
-    top: 0;
-    padding: 40% 5px;
+
+figure.medium img {
+  max-height: 225px;
 }
-.gallery.caption-position-bottom figcaption,
-.fancy-figure.caption-position-bottom figcaption {
-    padding: 5px;
+
+figure.pull-right {
+  padding: 10px 0 10px 10px;
 }
-.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;
+
+figure.pull-left {
+  padding: 10px 10px 10px 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%;
+
+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;
 }
-.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%;
+
+/** GALLERY MARKUP **/
+.snap-gallery {
+  margin: 10px;
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
 }
-figcaption p {
-    margin: auto; /* override style in theme */
+
+.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 */
+  }
 }
--- a/theme.yaml
+++ b/theme.yaml
@@ -1,17 +1,16 @@
-# 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
+description: Advanced image gallery using shortcodes. It offers a lightbox and is also usable for single images. CSS only, no Javascript!
 homepage: https://src.mehl.mx/mxmehl/hugo-snap-gallery
 tags:
  - component
 features:
  - gallery
-min_version: 0.50.0
+min_version: 0.60.0

 author:
  name: Max Mehl