Browse Source

complete rewrite of this project

max.mehl 7 months ago
parent
commit
81ece5842c
No account linked to committer's email address
6 changed files with 425 additions and 267 deletions
  1. 43
    57
      README.md
  2. 74
    24
      layouts/shortcodes/figure.html
  3. 6
    40
      layouts/shortcodes/gallery.html
  4. 59
    0
      layouts/shortcodes/snap-dir.html
  5. 241
    143
      static/css/snap-gallery.css
  6. 2
    3
      theme.yaml

+ 43
- 57
README.md View File

@@ -1,72 +1,57 @@
1 1
 <!--
2
-  SPDX-FileCopyrightText: 2019 Li-Wen Yip <liwen.yip@gmail.com>
3
-  SPDX-FileCopyrightText: 2019 Max Mehl <mail@mehl.mx>
2
+  SPDX-FileCopyrightText: 2020 Max Mehl <mail@mehl.mx>
4 3
   SPDX-License-Identifier: MIT
5 4
 -->
6 5
 
7 6
 # hugo-snap-gallery
8 7
 
9
-Automagical css image gallery in [Hugo](https://gohugo.io/) using shortcodes.
8
+Automagical css image gallery in [Hugo](https://gohugo.io/) using shortcodes. No JavaScript is used, just plain CSS.
10 9
 
11
-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.
10
+## Features
12 11
 
13
-## Image Gallery Features
14
-
15
-- Custom `{{< figure >}}` shortcode that enables new features but is backwards-compatible with Hugo's built-in `{{< figure >}}`shortcode
12
+- Custom `{{< figure >}}` shortcode that enables new features but is mostly backwards-compatible with Hugo's built-in `{{< figure >}}`shortcode
13
+- All pictures can be expanded on click in a CSS-only lightbox
16 14
 - Use the `{{< figure >}}` shortcode by itself to enable pretty captions
17 15
 - Put multiple `{{< figure >}}` shortcodes inside a `{{< gallery >}}` to create a pretty image gallery
18
-- **Point `{{< gallery >}}` at a directory to generate a gallery of all images in that directory**
19
-- Gallery is responsive, images are scaled/cropped to fill square (or other evenly-sized) tiles
20
-- Pretty captions appear/slide/fade upon hovering over the image 
21
-- Only requires 3.8kB of CSS (unminified; you can minify it if you want)
16
+- Use the `{{< snap-dir >}}` shortcode inside a `{{< gallery >}}` to show all containing files nicely
17
+- Next/prev buttons in galleries
18
+- The gallery is responsive, images are scaled/cropped to fill square tiles
19
+- Pretty captions outside and inside lightbox 
20
+- Only requires 4kB of CSS (unminified; you can minify it if you want)
22 21
 - CSS is automatically loaded the first time you use the `{{< figure >}}` shortcode on each page
23 22
 
24
-## PhotoSwipe Features
25
-
26
-- Load PhotoSwipe by calling the `{{< load-photoswipe >}}` shortcode anywhere in your post
27
-- Loads all of the `<figure>` elements in your post, regardless of where in your post they appear, into a lightbox/carousel style image gallery
28
-- Works with any existing `<figure>` elements/shortcodes in your posts
29
-- 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)
30 23
 
31 24
 ## Installation
32 25
 
33
-Use this like an additional Hugo theme.
26
+Use this like an additional Hugo theme, so add it to the `theme` config. Example:
27
+
28
+```
29
+theme = [ "hugo-sustain", "hugo-snap-gallery" ]
30
+```
34 31
 
35 32
 
36 33
 ## `{{< figure >}}` shortcode usage
37 34
 
38 35
 Specifying your image files:
39 36
 
40
-- `{{< figure src="thumb.jpg" link="image.jpg" >}}` will use `thumb.jpg` for thumbnail and `image.jpg` for lightbox
41
-- `{{< figure src="image.jpg" >}}` or `{{< figure link="image.jpg" >}}` will use `image.jpg` for both thumbnail and lightbox
42
-- `{{< figure link="image.jpg" thumb="-small" >}}` will use `image-small.jpg` for thumbnail and `image.jpg` for lightbox
37
+- `{{< figure src="image.jpg" >}}` will just show the image with no caption, and open the full version of it when clicked
38
+- `{{< 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
39
+- `{{< figure src="image.jpg" link="http://example.com" >}}` will use `image.jpg` for thumbnail and link to `http://example.com` when clicked
43 40
 
44 41
 Optional parameters:
45 42
 
46
-- 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
47
-- `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.
43
+- 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 >}}`.
48 44
 - `class` allows you to set any custom classes you want on the `<figure>` tag.
49 45
 
50
-Optional parameters for standalone `{{< figure >}}` shortcodes only (i.e. don't use on `{{< figure >}}` inside `{{< gallery >}}` - strange things may happen if you do): 
51
-
52
-- `caption-position` and `caption-effect` work the same as for the `{{< gallery >}}` shortcode (see below). 
53
-- `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. 
46
+Optional parameters work for standalone `{{< figure >}}` shortcodes and inside of `{{< gallery >}}`. However, they cannot be applied to `{{< snap-dir >}}`.
54 47
 
55 48
 
56 49
 ## `{{< gallery >}}` shortcode usage
57 50
 
58
-To specify a directory of image files:
51
+### Using defined images
59 52
 
60
-```
61
-{{< gallery dir="/img/your-directory-of-images/" />}}`
62
-```
53
+To specify individual image files, call it like in the following example. All parameters for the figure should work as described above.
63 54
 
64
-- The images are automatically captioned with the file name.
65
-- `[image].jpg` is used for the hi-res image, and `[image]-thumb.jpg` is used for the thumbnails.
66
-- If `[image]-thumb.jpg` doesn't exist, then `[image].jpg` will be used for both hi-res and thumbnail images.
67
-- The default thumbnail suffix is `-thumb`, but you can specify a different one e.g. `thumb="-small"` or `thumb="_150x150"`.
68
-
69
-To specify individual image files:
70 55
 
71 56
 ```
72 57
 {{< gallery >}}
@@ -76,33 +61,34 @@ To specify individual image files:
76 61
 {{< /gallery >}}
77 62
 ```
78 63
 
79
-Optional parameters:
64
+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.
80 65
 
81
-- `caption-position` - determines the captions' position over the image. Options:
82
-  - `bottom` (default)
83
-  - `center`
84
-  - `none` hides captions on the page (they will only show in PhotoSwipe)
85
-- `caption-effect` - determines if/how captions appear upon hover. Options:
86
-  - `slide` (default)
87
-  - `fade`
88
-  - `none` (captions always visible)
89
-- `hover-transition` - determines if/how images change upon hover. Options:
90
-  - not set - smooth transition (default)
91
-  - `none` - hard transition
66
+
67
+### Using a whole directory
68
+
69
+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:
70
+
71
+```
72
+{{< gallery >}}
73
+  {{< snap-dir srcdir="/img/blog/orr" >}}
74
+{{< /gallery >}}
75
+```
76
+
77
+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.
92 78
 
93 79
 
94 80
 ## CSS Hackers
95 81
 
96
-`snap-gallery.css` is designed to provide square tiles in a container with `max-width: 768px`.
82
+`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.
97 83
 
98
-Here are some pointers if you want to adapt the CSS:
84
+Other than that, the CSS should be simple enough to allow modifications.
99 85
 
100
- - Change `.gallery {max-width: 768px;}` if you want a gallery wider than 768px.
101
- - Change `min-width` in the `@media` styles to change the screen widths at which the layout changes
102
- - Change `min-width: 9999px` in the last `@media` style to something sensible if you want to use a 4-tile layout
103
- - If you want more than 4 tiles per row, set `width` = 100% / number of tiles per row
104
- - `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.
86
+## Credits
87
+
88
+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.
105 89
 
106 90
 ## License
107 91
 
108
-MIT
92
+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.
93
+
94
+The main license of this repo is MIT.

+ 74
- 24
layouts/shortcodes/figure.html View File

@@ -1,33 +1,83 @@
1 1
 <!--
2
-  SPDX-FileCopyrightText: 2019 Li-Wen Yip <liwen.yip@gmail.com>
3
-  SPDX-FileCopyrightText: 2019 Max Mehl <mail@mehl.mx>
2
+  SPDX-FileCopyrightText: 2020 Max Mehl <mail@mehl.mx>
4 3
   SPDX-License-Identifier: MIT
5
-
6
-  Put this file in /layouts/shortcodes/figure.html
7
-  NB this overrides Hugo's built-in "figure" shortcode but is backwards compatible
8
-  Documentation and licence at https://github.com/liwenyip/hugo-easy-gallery/
9 4
 -->
10 5
 <!-- count how many times we've called this shortcode; load the css if it's the first time -->
11 6
 {{- if not ($.Page.Scratch.Get "figurecount") }}<link rel="stylesheet" href="/css/snap-gallery.css" />{{ end }}
12 7
 {{- $.Page.Scratch.Add "figurecount" 1 -}}
13
-<!-- use either src or link-thumb for thumbnail image -->
14
-{{- $thumb := .Get "src" | default (printf "%s." (.Get "thumb") | replace (.Get "link") ".") }}
15
-<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}}>
16
-  <figure {{ with .Get "class" }}class="{{.}}"{{ end }} itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
17
-    <div class="img"{{ if .Parent }} style="background-image: url('{{ $thumb | relURL }}');"{{ end }}{{ with .Get "size" }} data-size="{{.}}"{{ end }}>
18
-      <img itemprop="thumbnail" src="{{ $thumb | relURL }}" {{ with .Get "alt" | default (.Get "caption") }}alt="{{.}}"{{ end }}/><!-- <img> hidden if in .gallery -->
19
-    </div>
20
-    {{ with .Get "link" | default (.Get "src") }}<a href="{{.}}" itemprop="contentUrl"></a>{{ end }}
21
-    {{- if or (or (.Get "title") (.Get "caption")) (.Get "attr")}}
8
+<!-- use src image -->
9
+{{- $thumb := .Get "src" -}}
10
+
11
+<!-- set unique ID depending on whether part of gallery or alone -->
12
+{{- $figid := "" -}}
13
+{{- $galid := "" -}}
14
+{{- $id := "" -}}
15
+{{- $previd := "" -}}
16
+{{- $nextid := "" -}}
17
+{{- if .Parent -}} <!-- gallery -->
18
+  {{- $galid = .Page.Scratch.Get "gallery" -}}
19
+  {{- if not $galid }}{{ $galid = 0 }}{{ end -}}
20
+  {{- $galid = add $galid 1 -}}
21
+  {{- $.Page.Scratch.Add "thisgalfig" 1 -}}
22
+  {{- $figid = .Page.Scratch.Get "thisgalfig" -}}
23
+{{- else -}} <!-- standalone figure -->
24
+  {{- $.Page.Scratch.Add "nogalfig" 1 -}}
25
+  {{- $figid = .Page.Scratch.Get "nogalfig" -}}
26
+{{- end -}}
27
+{{- if $galid -}} <!-- gallery -->
28
+  {{- $id = print "gal" $galid "-" "fig" $figid -}}
29
+  {{- $previd = print "gal" $galid "-" "fig" (sub $figid 1) -}}
30
+  {{- $nextid = print "gal" $galid "-" "fig" (add $figid 1) -}}
31
+{{- else -}} <!-- standalone figure -->
32
+  {{- $id = print "fig" $figid -}}
33
+{{- end -}}
34
+
35
+<figure {{ with .Get "class" }}class="{{.}}"{{ end }}>
36
+  {{ if (.Get "link") -}}
37
+    <a href="{{ .Get "link" }}"
38
+       {{- with .Get "target" }} target="{{ . }}"{{ end -}}
39
+       {{- with .Get "rel" }} rel="{{ . }}"{{ end -}}
40
+       >
41
+  {{ else -}}
42
+    <a href="#{{ $id }}">
43
+  {{- end -}}
44
+  <!-- THUMBNAIL -->
45
+    <img src="{{ $thumb | relURL }}" class="snap-thumb"
46
+    {{- with .Get "alt" }} alt="{{ . }}"{{ end -}}
47
+    {{- with .Get "title" }} title="{{ . }}"{{ end -}}
48
+    {{- with .Get "height" }} height="{{ . }}"{{ end -}}
49
+    {{- with .Get "width" }} width="{{ . }}"{{ end -}}
50
+     />
51
+    {{- if or (.Get "caption") (.Get "attr")}}
22 52
       <figcaption>
23
-        {{- with .Get "title" }}<h4>{{.}}</h4>{{ end }}
24
-        {{- if or (.Get "caption") (.Get "attr")}}
25
-          <p>
26
-            {{- .Get "caption" -}}
27
-            {{- with .Get "attrlink"}}<a href="{{.}}">{{ .Get "attr" }}</a>{{ else }}{{ .Get "attr"}}{{ end -}}
28
-          </p>
29
-        {{- end }}
53
+        {{- .Get "caption" | markdownify -}}
54
+        {{- with .Get "attr" }} {{ . | markdownify}}{{ end -}}
30 55
       </figcaption>
31 56
     {{- end }}
32
-  </figure>
33
-</div>
57
+  </a>
58
+  <!-- FULL IMAGE; HIDDEN -->
59
+  <div class="snap-lightbox" id="{{ $id }}">
60
+    <a href="#_" class="snap-lightbox-close"></a>
61
+    <div class="snap-lightbox-inner">
62
+      <img src="{{ .Get "src" }}" {{ with .Get "alt" }}alt="{{ . }}"{{ end }} />
63
+      <p>
64
+      {{- if or (.Get "caption") (.Get "attr") -}}
65
+        {{- .Get "caption" | markdownify -}}
66
+        {{- with .Get "attrlink" }} <a href="{{ . }}">{{- end -}}
67
+        {{- with .Get "attr" }} {{ . | markdownify}}{{ end -}}
68
+        {{- with .Get "attrlink" }}</a>{{- end -}}
69
+      {{- end }}
70
+      </p>
71
+    </div>
72
+    <a href="#_" class="snap-lightbox-close-button"><i class="snap-lightbox-x"></i></a>
73
+    {{- if .Parent -}}
74
+      {{- if not (eq $figid 1) -}}
75
+        <a href="#{{ $previd }}" class="snap-lightbox-prev"><i class="snap-lightbox-arrow"></i></a>
76
+      {{- else -}}
77
+        <span class="snap-lightbox-prev"><i class="snap-lightbox-arrow"></i></span>
78
+      {{- end -}}
79
+      <!-- TODO: Somehow try to identify whether this is the last element in the gallery -->
80
+      <a href="#{{ $nextid }}" class="snap-lightbox-next"><i class="snap-lightbox-arrow"></i></a>
81
+    {{- end }}
82
+  </div>
83
+</figure>

+ 6
- 40
layouts/shortcodes/gallery.html View File

@@ -1,45 +1,11 @@
1 1
 <!--
2
-  SPDX-FileCopyrightText: 2019 Li-Wen Yip <liwen.yip@gmail.com>
3
-  SPDX-FileCopyrightText: 2019 Max Mehl <mail@mehl.mx>
2
+  SPDX-FileCopyrightText: 2020 Max Mehl <mail@mehl.mx>
4 3
   SPDX-License-Identifier: MIT
5
-
6
-  Put this file in /layouts/shortcodes/gallery.html
7
-  Documentation and licence at https://github.com/liwenyip/hugo-easy-gallery/
8 4
 -->
9 5
 <!-- count how many times we've called this shortcode; load the css if it's the first time -->
10
-<link rel="stylesheet" href="/css/snap-gallery.css" />
11
-{{- $.Page.Scratch.Add "figurecount" 1 }}
12
-{{ $baseURL := .Site.BaseURL }}
13
-<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">
14
-	{{- with (.Get "dir") -}}
15
-		<!-- If a directory was specified, generate figures for all of the images in the directory -->
16
-		{{- $files := readDir (print "/static/" .) }}
17
-		{{- range $files -}}
18
-			<!-- skip files that aren't images, or that inlcude the thumb suffix in their name -->
19
-			{{- $thumbext := $.Get "thumb" | default "-thumb" }}
20
-			{{- $isthumb := .Name | findRE ($thumbext | printf "%s\\.") }}<!-- is the current file a thumbnail image? -->
21
-			{{- $isimg := lower .Name | findRE "\\.(gif|jpg|jpeg|tiff|png|bmp)" }}<!-- is the current file an image? -->
22
-			{{- if and $isimg (not $isthumb) }}
23
-				{{- $caption :=  .Name | replaceRE "\\..*" "" | humanize }}<!-- humanized filename without extension -->
24
-				{{- $linkURL := print $baseURL ($.Get "dir") "" .Name | absURL }}<!-- absolute URL to hi-res image -->
25
-				{{- $thumb := .Name | replaceRE "(\\.)" ($thumbext | printf "%s.") }}<!-- filename of thumbnail image -->
26
-				{{- $thumbexists := where $files "Name" $thumb }}<!-- does a thumbnail image exist? --> 
27
-				{{- $thumbURL := print $baseURL ($.Get "dir") "/" $thumb | absURL }}<!-- absolute URL to thumbnail image -->
28
-				<div class="box">
29
-				  <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
30
-				    <div class="img" style="background-image: url('{{ if $thumbexists }}{{ $thumbURL }}{{ else }}{{ $linkURL }}{{ end }}');" >
31
-				      <img itemprop="thumbnail" src="{{ if $thumbexists }}{{ $thumbURL }}{{ else }}{{ $linkURL }}{{ end }}" alt="{{ $caption }}" /><!-- <img> hidden if in .gallery -->
32
-				    </div>
33
-			      <figcaption>
34
-		          <p>{{ $caption }}</p>
35
-			      </figcaption>
36
-				    <a href="{{ $linkURL }}" itemprop="contentUrl" class="hiddenlink" target="_blank"></a><!-- put <a> last so it is stacked on top -->
37
-				  </figure>
38
-				</div>
39
-			{{- end }}
40
-		{{- end }}
41
-	{{- else -}}
42
-		<!-- If no directory was specified, include any figure shortcodes called within the gallery -->
43
-	  {{ .Inner }}
44
-	{{- end }}
6
+{{- .Page.Scratch.Add "gallery" 1 -}}
7
+<div class="snap-gallery">
8
+  {{ .Inner }}
45 9
 </div>
10
+<!-- delete count of gallery figures (but not those of standalone figures -->
11
+{{- .Page.Scratch.Delete "thisgalfig" -}}

+ 59
- 0
layouts/shortcodes/snap-dir.html View File

@@ -0,0 +1,59 @@
1
+<!--
2
+  SPDX-FileCopyrightText: 2020 Max Mehl <mail@mehl.mx>
3
+  SPDX-License-Identifier: MIT
4
+-->
5
+<!-- This file is a variation of figure.html specifically to load all
6
+     files from a directory. Assumes that is has the gallery shortcode
7
+     as parent
8
+-->
9
+<!-- count how many times we've called this shortcode; load the css if it's the first time -->
10
+{{- if not ($.Page.Scratch.Get "figurecount") }}<link rel="stylesheet" href="/css/snap-gallery.css" />{{ end }}
11
+{{- $.Page.Scratch.Add "figurecount" 1 -}}
12
+
13
+{{- $files := readDir (print "/static" (.Get "srcdir")) -}}
14
+{{- $maxid := len $files -}}
15
+
16
+{{- range $files -}}
17
+  {{ $src := (print ($.Get "srcdir") "/" .Name) }}
18
+  {{- $thumb := $src -}}
19
+
20
+  <!-- set unique ID for gallery and figure -->
21
+  {{- $figid := "" -}}
22
+  {{- $galid := "" -}}
23
+  {{- $id := "" -}}
24
+  {{- $previd := "" -}}
25
+  {{- $nextid := "" -}}
26
+  {{- $galid = $.Page.Scratch.Get "gallery" -}}
27
+  {{- if not $galid }}{{ $galid = 0 }}{{ end -}}
28
+  {{- $galid = add $galid 1 -}}
29
+  {{- $.Page.Scratch.Add "thisgalfig" 1 -}}
30
+  {{- $figid = $.Page.Scratch.Get "thisgalfig" -}}
31
+  {{- $id = print "gal" $galid "-" "fig" $figid -}}
32
+  {{- $previd = print "gal" $galid "-" "fig" (sub $figid 1) -}}
33
+  {{- $nextid = print "gal" $galid "-" "fig" (add $figid 1) -}}
34
+
35
+  <figure>
36
+    <!-- THUMBNAIL -->
37
+    <a href="#{{ $id }}">
38
+      <img src="{{ $thumb | relURL }}" class="snap-thumb" />
39
+    </a>
40
+    <!-- FULL IMAGE; HIDDEN -->
41
+    <div class="snap-lightbox" id="{{ $id }}">
42
+      <a href="#_" class="snap-lightbox-close"></a>
43
+      <div class="snap-lightbox-inner">
44
+        <img src='{{ $src }}' />
45
+      </div>
46
+      <a href="#_" class="snap-lightbox-close-button"><i class="snap-lightbox-x"></i></a>
47
+      {{- if not (eq $figid 1) -}}
48
+        <a href="#{{ $previd }}" class="snap-lightbox-prev"><i class="snap-lightbox-arrow"></i></a>
49
+      {{- else -}}
50
+        <span class="snap-lightbox-prev"><i class="snap-lightbox-arrow"></i></span>
51
+      {{- end -}}
52
+      {{- if not (eq $figid $maxid) -}}
53
+        <a href="#{{ $nextid }}" class="snap-lightbox-next"><i class="snap-lightbox-arrow"></i></a>
54
+      {{- else -}}
55
+        <span class="snap-lightbox-next"><i class="snap-lightbox-arrow"></i></span>
56
+      {{- end }}
57
+    </div>
58
+  </figure>
59
+{{ end }}

+ 241
- 143
static/css/snap-gallery.css View File

@@ -1,165 +1,263 @@
1 1
 /*
2
-  SPDX-FileCopyrightText: 2019 Li-Wen Yip <liwen.yip@gmail.com>
3
-  SPDX-FileCopyrightText: 2019 Max Mehl <mail@mehl.mx>
2
+  SPDX-FileCopyrightText: 2020 Max Mehl <mail@mehl.mx>
4 3
   SPDX-License-Identifier: MIT
5
-
6
-  Put this file in /static/css/hugo-easy-gallery.css
7
-  Documentation and licence at https://github.com/liwenyip/hugo-easy-gallery/
8 4
 */
9 5
 
6
+/** GENERAL FIGURE LAYOUT **/
10 7
 
11
-/*
12
-Grid Layout Styles
13
-*/
14
-.gallery {
15
-    overflow: hidden;
16
-    margin: 10px;
17
-    max-width: 768px;
18
-    display: flex;
19
-    flex-wrap: wrap;
20
-}
21
-.gallery .box {
22
-    float: left;
23
-    position: relative;
24
-    /* Default: 1 tile wide */
25
-    width: 100%;
26
-    padding-bottom: 100%;
27
-    margin: 0 auto;
28
-}
29
-@media only screen and (min-width : 365px) {
30
-    /* Tablet view: 2 tiles */
31
-    .gallery .box {
32
-        width: 50%;
33
-        padding-bottom: 50%;
34
-    }
35
-}
36
-@media only screen and (min-width : 480px) {
37
-    /* Small desktop / ipad view: 3 tiles */
38
-    .gallery .box {
39
-        width: 33.3%;
40
-        padding-bottom: 33.3%; /*  */
41
-    }
42
-}
43
-@media only screen and (min-width : 9999px) {
44
-   /* Medium desktop: 4 tiles */
45
-   .box {
46
-      width: 25%;
47
-      padding-bottom: 25%;
48
-   }
8
+figure {
9
+  max-width: 90%;
10
+  margin: 30px auto 40px;
11
+  display: block;
12
+  text-align: center;
13
+  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
49 14
 }
50 15
 
51
-/*
52
-Transition styles
53
-*/
54
-.gallery.hover-transition figure,
55
-.gallery.hover-effect-zoom .img, 
56
-.gallery:not(.caption-effect-appear) figcaption,
57
-.fancy-figure:not(.caption-effect-appear) figcaption {
58
-    -webkit-transition: all 0.3s ease-in-out;
59
-    -moz-transition: all 0.3s ease-in-out;
60
-    -o-transition: all 0.3s ease-in-out;
61
-    transition: all 0.3s ease-in-out;
16
+figure a:hover {
17
+  text-decoration: none;
62 18
 }
63
-/*
64
-figure styles
65
-*/
66
-figure {
67
-    position:relative; /* purely to allow absolution positioning of figcaption */
68
-    overflow: hidden;
19
+
20
+figure img {
21
+  max-width: 100%;
22
+  max-height: 100%;
69 23
 }
70
-.gallery figure {
71
-    position: absolute;
72
-    left: 5px;
73
-    right: 5px;
74
-    top: 5px;
75
-    bottom: 5px;
24
+
25
+figure.small img {
26
+  max-height: 150px;
76 27
 }
77
-.gallery.hover-effect-grow figure:hover {
78
-    transform: scale(1.05);
28
+
29
+figure.medium img {
30
+  max-height: 225px;
79 31
 }
80
-.gallery.hover-effect-shrink figure:hover {
81
-    transform: scale(0.95);
32
+
33
+figure.pull-right {
34
+  padding: 10px 0 10px 10px;
82 35
 }
83
-.gallery.hover-effect-slidedown figure:hover {
84
-    transform: translateY(5px);
36
+
37
+figure.pull-left {
38
+  padding: 10px 10px 10px 0;
85 39
 }
86
-.gallery.hover-effect-slideup figure:hover {
87
-    transform: translateY(-5px);
40
+
41
+figure figcaption {
42
+  background-color: rgba(0, 0, 0, 0.5);
43
+  display: block;
44
+  font-size: .8em;
45
+  padding: 1px;
46
+  position: static;
47
+  text-align: center;
48
+  bottom: 0;
49
+  left: 0;
50
+  right: 0;
51
+  color: #FFF;
88 52
 }
89 53
 
90
-/*
91
-img / a styles
92
-*/
54
+/** GALLERY MARKUP **/
55
+.snap-gallery {
56
+  margin: 10px;
57
+  display: flex;
58
+  justify-content: center;
59
+  flex-wrap: wrap;
60
+}
93 61
 
94
-.gallery .img {
95
-    position: absolute;
96
-    left: 0;
97
-    right: 0;
98
-    top: 0;
99
-    bottom: 0;
100
-    background-size: cover;
101
-    background-position: 50% 50%;
102
-    background-repeat: no-repeat;
62
+.snap-gallery figure {
63
+  position: relative;
64
+  width: 30%;
65
+  padding-bottom: 30%;
66
+  margin: 1%;
67
+  text-align: left;
68
+  box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2),0 2px 4px 0 rgba(0,0,0,0.19);
103 69
 }
104
-.gallery.hover-effect-zoom figure:hover .img {
105
-    transform: scale(1.05);
70
+
71
+.snap-gallery figcaption {
72
+  position: absolute;
106 73
 }
107
-.gallery img {
108
-    display: none; /* only show the img if not inside a gallery */
74
+
75
+.snap-gallery img.snap-thumb {
76
+  position: absolute;
77
+  object-fit: cover;
78
+  object-position: center;
79
+  height: 100%;
80
+  width: 100%;
109 81
 }
110
-figure a {
111
-    position: absolute;
112
-    left: 0;
113
-    right: 0;
114
-    top: 0;
115
-    bottom: 0;
82
+
83
+.snap-gallery figure img.snap-thumb:hover {
84
+  transform: scale(1.02);
85
+  -webkit-transition: all 0.3s ease-in-out;
86
+  -moz-transition: all 0.3s ease-in-out;
87
+  -o-transition: all 0.3s ease-in-out;
88
+  transition: all 0.3s ease-in-out;
116 89
 }
117 90
 
118
-/*
119
-figcaption styles
120
-*/
121
-.gallery figcaption,
122
-.fancy-figure figcaption {
123
-    position: absolute;
124
-    bottom: 0;
125
-    left: 0;
126
-    right: 0;
127
-    background: #000;
128
-    color: #FFF;
129
-    text-align: center;
130
-    font-size: 75%; /* change this if you want bigger text */
131
-    background: rgba(0, 0, 0, 0.5);
132
-    opacity: 1;
133
-    cursor: pointer;
134
-}
135
-.gallery.caption-position-none figcaption,
136
-.fancy-figure.caption-position-none figcaption  {
137
-    display: none;
138
-}
139
-.gallery.caption-position-center figcaption,
140
-.fancy-figure.caption-position-center figcaption {
141
-    top: 0;
142
-    padding: 40% 5px;
143
-}
144
-.gallery.caption-position-bottom figcaption,
145
-.fancy-figure.caption-position-bottom figcaption {
146
-    padding: 5px;
147
-}
148
-.gallery.caption-effect-fade figure:not(:hover) figcaption,
149
-.gallery.caption-effect-appear figure:not(:hover) figcaption,
150
-.fancy-figure.caption-effect-fade figure:not(:hover) figcaption,
151
-.fancy-figure.caption-effect-appear figure:not(:hover) figcaption {
152
-    background: rgba(0, 0, 0, 0);
153
-    opacity: 0;
154
-}
155
-.gallery.caption-effect-slide.caption-position-bottom figure:not(:hover) figcaption,
156
-.fancy-figure.caption-effect-slide.caption-position-bottom figure:not(:hover) figcaption {
157
-    margin-bottom: -100%;
158
-}
159
-.gallery.caption-effect-slide.caption-position-center figure:not(:hover) figcaption,
160
-.fancy-figure.caption-effect-slide.caption-position-center figure:not(:hover) figcaption  {
161
-    top: 100%;
162
-}
163
-figcaption p {
164
-    margin: auto; /* override style in theme */
91
+@media screen and (max-width: 767px) {
92
+  .snap-gallery figure {
93
+    width: 45%;
94
+    padding-bottom: 45%;
95
+    margin: 2%
96
+  }
97
+}
98
+@media screen and (max-width: 479px) {
99
+  .snap-gallery figure {
100
+    width: 90%;
101
+    padding-bottom: 90%;
102
+    margin: 3%;
103
+  }
104
+}
105
+
106
+/** LIGHTBOX MARKUP **/
107
+
108
+.snap-lightbox {
109
+  /** Default lightbox to hidden */
110
+  display: none;
111
+
112
+  /** Position and style */
113
+  position: fixed;
114
+  z-index: 999;
115
+  width: 100%;
116
+  height: 100%;
117
+  text-align: center;
118
+  white-space: nowrap;
119
+  top: 0;
120
+  left: 0;
121
+  background: rgba(0,0,0,0.8);
122
+}
123
+
124
+/* effects when "activating" the figure */ 
125
+.snap-lightbox:target {
126
+  /** Remove default browser outline */
127
+  outline: none;
128
+
129
+  /** Unhide lightbox **/
130
+  display: block;
131
+}
132
+
133
+/* Click on the complete background closes the lightbox */
134
+/* Exception: arrow in gallery, they have higher z-index */
135
+a.snap-lightbox-close {
136
+  position: fixed;
137
+  z-index: 800;
138
+  width: 100%;
139
+  height: 100%;
140
+  text-align: center;
141
+  white-space: nowrap;
142
+  top: 0;
143
+  left: 0;
144
+}
145
+
146
+/* keep lightbox in middle. TODO: hacky, and not realibly in middle */
147
+.snap-lightbox::before {
148
+  content: "";
149
+  display: inline-block;
150
+  vertical-align: middle;
151
+  width: 0;
152
+  /* adjust for white space between pseudo element and next sibling */
153
+  margin-right: -.25em;
154
+  /* stretch line height */
155
+  height: 100%;
156
+}
157
+
158
+/* Container for image */
159
+.snap-lightbox-inner {
160
+  display: inline-block;
161
+  vertical-align: middle;
162
+  white-space: normal;
163
+  max-width: 90%;
164
+  max-height: 80%;
165
+  height: 100%;
166
+}
167
+
168
+.snap-lightbox-inner p {
169
+  color: #fff;
170
+  z-index: 810;
171
+  position: relative;
172
+}
173
+
174
+/* prev/next arrows & close button */
175
+
176
+.snap-lightbox-close-button {
177
+  position: fixed;
178
+  z-index: 950;
179
+  width: 5%;
180
+  height: calc(5vw); /* ~5% width */
181
+  right: 0;
182
+  top: 0;
183
+}
184
+
185
+.snap-lightbox-x::after {
186
+  content: "\00d7"; /* This will render the 'X' */
187
+  font-size: 3em;
188
+  font-style: normal;
189
+  font-weight: 700;
190
+  color: #000;
191
+  display: flex;
192
+  align-items: center;
193
+  justify-content: center;
194
+  height: 100%;
195
+}
196
+
197
+.snap-lightbox-close-button:hover .snap-lightbox-x::after {
198
+  color: #fff;
199
+  transition: all 0.25s ease;
200
+}
201
+
202
+.snap-lightbox-prev, .snap-lightbox-next  {
203
+  position: fixed;
204
+  z-index: 800;
205
+  width: 5%;
206
+  height: 100%;
207
+  text-align: center;
208
+  top: 0;
209
+}
210
+
211
+.snap-lightbox-prev {
212
+  left: 0;
213
+}
214
+
215
+.snap-lightbox-next {
216
+  right: 0;
217
+}
218
+
219
+.snap-lightbox-arrow {
220
+  display: inline-block;
221
+  position: fixed;
222
+  top: 50%;
223
+  z-index: 900;
224
+  border: solid #000;
225
+  border-width: 0 7px 7px 0;
226
+  display: inline-block;
227
+  padding: 1%;
228
+}
229
+
230
+span .snap-lightbox-arrow {
231
+  border-color: #5e5e5e;
232
+}
233
+
234
+.snap-lightbox-prev .snap-lightbox-arrow {
235
+  left: 2%;
236
+  transform: rotate(135deg);
237
+  -webkit-transform: rotate(135deg);
238
+}
239
+
240
+.snap-lightbox-next .snap-lightbox-arrow {
241
+  right: 2%;
242
+  transform: rotate(-45deg);
243
+  -webkit-transform: rotate(-45deg);
244
+}
245
+
246
+a.snap-lightbox-prev:hover > .snap-lightbox-arrow,
247
+a.snap-lightbox-next:hover > .snap-lightbox-arrow {
248
+  border-color: #fff;
249
+  transition: all 0.25s ease;
250
+}
251
+
252
+@media screen and (max-width: 767px) {
253
+  .snap-lightbox-inner {
254
+    max-width: 80%;
255
+  }
256
+  .snap-lightbox-prev, .snap-lightbox-next {
257
+    width: 10%;
258
+  }
259
+  .snap-lightbox-close-button {
260
+    width: 10%;
261
+    height: calc(10vw); /* ~10% width */
262
+  }
165 263
 }

+ 2
- 3
theme.yaml View File

@@ -1,17 +1,16 @@
1
-# SPDX-FileCopyrightText: 2019 Li-Wen Yip <liwen.yip@gmail.com>
2 1
 # SPDX-FileCopyrightText: 2019 Max Mehl <mail@mehl.mx>
3 2
 # SPDX-License-Identifier: MIT
4 3
 
5 4
 name: Snap Gallery
6 5
 license: MIT
7 6
 licenselink: https://src.mehl.mx/mxmehl/hugo-snap-gallery/src/branch/master/LICENSES/MIT.txt
8
-description: Automagical css image gallery in Hugo using shortcodes. Fork of https://github.com/liwenyip/hugo-easy-gallery
7
+description: Advanced image gallery using shortcodes. It offers a lightbox and is also usable for single images. CSS only, no Javascript!
9 8
 homepage: https://src.mehl.mx/mxmehl/hugo-snap-gallery
10 9
 tags:
11 10
   - component
12 11
 features:
13 12
   - gallery
14
-min_version: 0.50.0
13
+min_version: 0.60.0
15 14
 
16 15
 author:
17 16
   name: Max Mehl

Loading…
Cancel
Save