Browse Source

initial commit

max.mehl 1 month ago
commit
51e757b527
No account linked to committer's email address
6 changed files with 388 additions and 0 deletions
  1. 19
    0
      LICENSES/MIT.txt
  2. 108
    0
      README.md
  3. 33
    0
      layouts/shortcodes/figure.html
  4. 45
    0
      layouts/shortcodes/gallery.html
  5. 165
    0
      static/css/snap-gallery.css
  6. 18
    0
      theme.yaml

+ 19
- 0
LICENSES/MIT.txt View File

@@ -0,0 +1,19 @@
1
+MIT License Copyright (c) <year> <copyright holders>
2
+
3
+Permission is hereby granted, free of charge, to any person obtaining a copy
4
+of this software and associated documentation files (the "Software"), to deal
5
+in the Software without restriction, including without limitation the rights
6
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
7
+copies of the Software, and to permit persons to whom the Software is furnished
8
+to do so, subject to the following conditions:
9
+
10
+The above copyright notice and this permission notice (including the next
11
+paragraph) shall be included in all copies or substantial portions of the
12
+Software.
13
+
14
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
15
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
16
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS
17
+OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
18
+WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF
19
+OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

+ 108
- 0
README.md View File

@@ -0,0 +1,108 @@
1
+<!--
2
+  SPDX-FileCopyrightText: 2019 Li-Wen Yip <liwen.yip@gmail.com>
3
+  SPDX-FileCopyrightText: 2019 Max Mehl <mail@mehl.mx>
4
+  SPDX-License-Identifier: MIT
5
+-->
6
+
7
+# hugo-snap-gallery
8
+
9
+Automagical css image gallery in [Hugo](https://gohugo.io/) using shortcodes.
10
+
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.
12
+
13
+## Image Gallery Features
14
+
15
+- Custom `{{< figure >}}` shortcode that enables new features but is backwards-compatible with Hugo's built-in `{{< figure >}}`shortcode
16
+- Use the `{{< figure >}}` shortcode by itself to enable pretty captions
17
+- 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)
22
+- CSS is automatically loaded the first time you use the `{{< figure >}}` shortcode on each page
23
+
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
+
31
+## Installation
32
+
33
+Use this like an additional Hugo theme.
34
+
35
+
36
+## `{{< figure >}}` shortcode usage
37
+
38
+Specifying your image files:
39
+
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
43
+
44
+Optional parameters:
45
+
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.
48
+- `class` allows you to set any custom classes you want on the `<figure>` tag.
49
+
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. 
54
+
55
+
56
+## `{{< gallery >}}` shortcode usage
57
+
58
+To specify a directory of image files:
59
+
60
+```
61
+{{< gallery dir="/img/your-directory-of-images/" />}}`
62
+```
63
+
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
+
71
+```
72
+{{< gallery >}}
73
+  {{< figure src="image1.jpg" >}}
74
+  {{< figure src="image2.jpg" >}}
75
+  {{< figure src="image3.jpg" >}}
76
+{{< /gallery >}}
77
+```
78
+
79
+Optional parameters:
80
+
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
92
+
93
+
94
+## CSS Hackers
95
+
96
+`snap-gallery.css` is designed to provide square tiles in a container with `max-width: 768px`.
97
+
98
+Here are some pointers if you want to adapt the CSS:
99
+
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.
105
+
106
+## License
107
+
108
+MIT

+ 33
- 0
layouts/shortcodes/figure.html View File

@@ -0,0 +1,33 @@
1
+<!--
2
+  SPDX-FileCopyrightText: 2019 Li-Wen Yip <liwen.yip@gmail.com>
3
+  SPDX-FileCopyrightText: 2019 Max Mehl <mail@mehl.mx>
4
+  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
+-->
10
+<!-- count how many times we've called this shortcode; load the css if it's the first time -->
11
+{{- if not ($.Page.Scratch.Get "figurecount") }}<link rel="stylesheet" href="/css/snap-gallery.css" />{{ end }}
12
+{{- $.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")}}
22
+      <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 }}
30
+      </figcaption>
31
+    {{- end }}
32
+  </figure>
33
+</div>

+ 45
- 0
layouts/shortcodes/gallery.html View File

@@ -0,0 +1,45 @@
1
+<!--
2
+  SPDX-FileCopyrightText: 2019 Li-Wen Yip <liwen.yip@gmail.com>
3
+  SPDX-FileCopyrightText: 2019 Max Mehl <mail@mehl.mx>
4
+  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
+-->
9
+<!-- 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 }}
45
+</div>

+ 165
- 0
static/css/snap-gallery.css View File

@@ -0,0 +1,165 @@
1
+/*
2
+  SPDX-FileCopyrightText: 2019 Li-Wen Yip <liwen.yip@gmail.com>
3
+  SPDX-FileCopyrightText: 2019 Max Mehl <mail@mehl.mx>
4
+  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
+*/
9
+
10
+
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
+   }
49
+}
50
+
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;
62
+}
63
+/*
64
+figure styles
65
+*/
66
+figure {
67
+    position:relative; /* purely to allow absolution positioning of figcaption */
68
+    overflow: hidden;
69
+}
70
+.gallery figure {
71
+    position: absolute;
72
+    left: 5px;
73
+    right: 5px;
74
+    top: 5px;
75
+    bottom: 5px;
76
+}
77
+.gallery.hover-effect-grow figure:hover {
78
+    transform: scale(1.05);
79
+}
80
+.gallery.hover-effect-shrink figure:hover {
81
+    transform: scale(0.95);
82
+}
83
+.gallery.hover-effect-slidedown figure:hover {
84
+    transform: translateY(5px);
85
+}
86
+.gallery.hover-effect-slideup figure:hover {
87
+    transform: translateY(-5px);
88
+}
89
+
90
+/*
91
+img / a styles
92
+*/
93
+
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;
103
+}
104
+.gallery.hover-effect-zoom figure:hover .img {
105
+    transform: scale(1.05);
106
+}
107
+.gallery img {
108
+    display: none; /* only show the img if not inside a gallery */
109
+}
110
+figure a {
111
+    position: absolute;
112
+    left: 0;
113
+    right: 0;
114
+    top: 0;
115
+    bottom: 0;
116
+}
117
+
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 */
165
+}

+ 18
- 0
theme.yaml View File

@@ -0,0 +1,18 @@
1
+# SPDX-FileCopyrightText: 2019 Li-Wen Yip <liwen.yip@gmail.com>
2
+# SPDX-FileCopyrightText: 2019 Max Mehl <mail@mehl.mx>
3
+# SPDX-License-Identifier: MIT
4
+
5
+name: Snap Gallery
6
+license: MIT
7
+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
9
+homepage: https://src.mehl.mx/mxmehl/hugo-snap-gallery
10
+tags:
11
+  - component
12
+features:
13
+  - gallery
14
+min_version: 0.50.0
15
+
16
+author:
17
+  name: Max Mehl
18
+  homepage: https://mehl.mx

Loading…
Cancel
Save