From c4f6e3fd321ed2de338f89806ea2a79ddcca00b9 Mon Sep 17 00:00:00 2001 From: Emiel Hollander Date: Sun, 14 Oct 2018 10:08:30 +0200 Subject: [PATCH 1/4] Use Hugo page resources to create thumbnails and gallery --- layouts/shortcodes/gallery.html | 50 ++++++++++++--------------------- 1 file changed, 18 insertions(+), 32 deletions(-) diff --git a/layouts/shortcodes/gallery.html b/layouts/shortcodes/gallery.html index aac2ace..b9eb593 100644 --- a/layouts/shortcodes/gallery.html +++ b/layouts/shortcodes/gallery.html @@ -3,39 +3,25 @@ Documentation and licence at https://github.com/liwenyip/hugo-easy-gallery/ --> -{{- if not ($.Page.Scratch.Get "figurecount") }}{{ end }} -{{- $.Page.Scratch.Add "figurecount" 1 }} -{{ $baseURL := .Site.BaseURL }} +{{- if not ($.Page.Scratch.Get "figurecount") -}}{{- end -}} +{{- $.Page.Scratch.Add "figurecount" 1 -}} +{{- $baseURL := .Site.BaseURL -}}
- {{- with (.Get "dir") -}} - - {{- $files := readDir (print "/static/" .) }} - {{- range $files -}} - - {{- $thumbext := $.Get "thumb" | default "-thumb" }} - {{- $isthumb := .Name | findRE ($thumbext | printf "%s\\.") }} - {{- $isimg := lower .Name | findRE "\\.(gif|jpg|jpeg|tiff|png|bmp)" }} - {{- if and $isimg (not $isthumb) }} - {{- $caption := .Name | replaceRE "\\..*" "" | humanize }} - {{- $linkURL := print $baseURL ($.Get "dir") "/" .Name | absURL }} - {{- $thumb := .Name | replaceRE "(\\.)" ($thumbext | printf "%s.") }} - {{- $thumbexists := where $files "Name" $thumb }} - {{- $thumbURL := print $baseURL ($.Get "dir") "/" $thumb | absURL }} -
-
-
- {{ $caption }} -
-
-

{{ $caption }}

-
- -
+ + {{- range $.Page.Resources.ByType "image" -}} + {{- $thumbnail := .Fill "300x300" -}} +
+
+
+ {{ .Title }}
- {{- end }} - {{- end }} - {{- else -}} - - {{ .Inner }} + {{- with .Title -}} +
+

{{ . }}

+
+ {{- end -}} + +
+
{{- end }}
From 2953bfd80030f9b2a4ee3d7da272554a591d0439 Mon Sep 17 00:00:00 2001 From: Emiel Hollander Date: Sat, 13 Apr 2019 14:04:36 +0200 Subject: [PATCH 2/4] Make thumbnail size configurable --- layouts/shortcodes/gallery.html | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/layouts/shortcodes/gallery.html b/layouts/shortcodes/gallery.html index b9eb593..abd9ed4 100644 --- a/layouts/shortcodes/gallery.html +++ b/layouts/shortcodes/gallery.html @@ -6,10 +6,12 @@ {{- if not ($.Page.Scratch.Get "figurecount") -}}{{- end -}} {{- $.Page.Scratch.Add "figurecount" 1 -}} {{- $baseURL := .Site.BaseURL -}} +{{- $thumbnailSize := .Get "thumbnail-size" | default "300x300" -}}
{{- range $.Page.Resources.ByType "image" -}} - {{- $thumbnail := .Fill "300x300" -}} + + {{- $thumbnail := .Fill $thumbnailSize -}}
From 6afb2310e28f23799b3805c44165662e2b28b8d8 Mon Sep 17 00:00:00 2001 From: Emiel Hollander Date: Sat, 13 Apr 2019 14:04:44 +0200 Subject: [PATCH 3/4] Update README --- README.md | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index c816c5b..b545acd 100644 --- a/README.md +++ b/README.md @@ -27,7 +27,7 @@ Automagical css image gallery in [Hugo](https://gohugo.io/) using shortcodes, wi - 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 +- Pretty captions appear/slide/fade upon hovering over the image - Optionally make gallery images zoom, grow, shrink, slide up, or slide down upon hover - Only requires 3.6kB 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 @@ -92,10 +92,10 @@ Optional parameters: - `size` (e.g. `size="1024x768"`) pre-defines the image size for PhotoSwipe. Use this option if you don't want to pre-load the linked image to determine its size. - `class` allows you to set any custom classes you want on the `
` tag. -Optional parameters for standalone `{{< figure >}}` shortcodes only (i.e. don't use on `{{< figure >}}` inside `{{< gallery >}}` - strange things may happen if you do): +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. +- `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. - `class="no-photoswipe"` prevents a `
` from being loaded into PhotoSwipe. If you click on the figure you'll instead a good ol' fashioned hyperlink to a bigger image (or - if you haven't specified a bigger image - the same one). ## `{{< gallery >}}` shortcode usage @@ -141,6 +141,8 @@ Optional parameters: - `hover-transition` - determines if/how images change upon hover. Options: - not set - smooth transition (default) - `none` - hard transition +- `thumbnail-size` sets the size of the thumbnails for the gallery. Default is "300x300". First number is width, second number is height. + - example: `{{< gallery dir="/img/your-directory-of-images/" thumbnail-size="150x150" />}}` ## PhotoSwipe usage From 0043b7d2c68ddf78a9185410187312fb6cc4a5be Mon Sep 17 00:00:00 2001 From: Emiel Hollander Date: Sat, 27 Apr 2019 14:36:45 +0200 Subject: [PATCH 4/4] Restore original functions --- layouts/shortcodes/gallery.html | 64 +++++++++++++++++++++++++-------- 1 file changed, 49 insertions(+), 15 deletions(-) diff --git a/layouts/shortcodes/gallery.html b/layouts/shortcodes/gallery.html index abd9ed4..66a90e2 100644 --- a/layouts/shortcodes/gallery.html +++ b/layouts/shortcodes/gallery.html @@ -8,22 +8,56 @@ {{- $baseURL := .Site.BaseURL -}} {{- $thumbnailSize := .Get "thumbnail-size" | default "300x300" -}}
- - {{- range $.Page.Resources.ByType "image" -}} + {{- with (.Get "dir") -}} + + {{- $files := readDir (print "/static/" .) }} + {{- range $files -}} + + {{- $thumbext := $.Get "thumb" | default "-thumb" }} + {{- $isthumb := .Name | findRE ($thumbext | printf "%s\\.") }} + {{- $isimg := lower .Name | findRE "\\.(gif|jpg|jpeg|tiff|png|bmp)" }} + {{- if and $isimg (not $isthumb) }} + {{- $caption := .Name | replaceRE "\\..*" "" | humanize }} + {{- $linkURL := print $baseURL ($.Get "dir") "/" .Name | absURL }} + {{- $thumb := .Name | replaceRE "(\\.)" ($thumbext | printf "%s.") }} + {{- $thumbexists := where $files "Name" $thumb }} + {{- $thumbURL := print $baseURL ($.Get "dir") "/" $thumb | absURL }} +
+
+
+ {{ $caption }} +
+
+

{{ $caption }}

+
+ +
+
+ {{- end }} + {{- end }} + {{- else }} + {{ with .Inner -}} + + {{ . }} + {{- else }} + + {{- range $.Page.Resources.ByType "image" -}} - {{- $thumbnail := .Fill $thumbnailSize -}} -
-
-
- {{ .Title }} + {{- $thumbnail := .Fill $thumbnailSize -}} +
+
+
+ {{ .Title }} +
+ {{- with .Title -}} +
+

{{ . }}

+
+ {{- end -}} + +
- {{- with .Title -}} -
-

{{ . }}

-
- {{- end -}} - -
-
+ {{- end }} + {{- end }} {{- end }}