From 33840acd1821c58237a5e33f8174f44072dc1839 Mon Sep 17 00:00:00 2001 From: "max.mehl" Date: Sun, 20 Oct 2019 22:31:29 +0200 Subject: [PATCH] make hugo-snap-gallery a submodule --- .gitmodules | 3 + themes/hugo-snap-gallery | 1 + themes/hugo-snap-gallery/README.md | 181 ------------------ .../layouts/shortcodes/figure.html | 32 ---- .../layouts/shortcodes/gallery.html | 44 ----- .../static/css/snap-gallery.css | 164 ---------------- themes/hugo-snap-gallery/theme.yaml | 14 -- 7 files changed, 4 insertions(+), 435 deletions(-) create mode 160000 themes/hugo-snap-gallery delete mode 100644 themes/hugo-snap-gallery/README.md delete mode 100644 themes/hugo-snap-gallery/layouts/shortcodes/figure.html delete mode 100644 themes/hugo-snap-gallery/layouts/shortcodes/gallery.html delete mode 100644 themes/hugo-snap-gallery/static/css/snap-gallery.css delete mode 100644 themes/hugo-snap-gallery/theme.yaml diff --git a/.gitmodules b/.gitmodules index 795eeae..4d0c6ff 100644 --- a/.gitmodules +++ b/.gitmodules @@ -1,3 +1,6 @@ [submodule "themes/hugo-cloak-email"] path = themes/hugo-cloak-email url = https://github.com/martignoni/hugo-cloak-email.git +[submodule "themes/hugo-snap-gallery"] + path = themes/hugo-snap-gallery + url = https://src.mehl.mx/mxmehl/hugo-snap-gallery diff --git a/themes/hugo-snap-gallery b/themes/hugo-snap-gallery new file mode 160000 index 0000000..51e757b --- /dev/null +++ b/themes/hugo-snap-gallery @@ -0,0 +1 @@ +Subproject commit 51e757b5270f5b42ff7b5e7364cd032fad35b1a5 diff --git a/themes/hugo-snap-gallery/README.md b/themes/hugo-snap-gallery/README.md deleted file mode 100644 index ac7e01a..0000000 --- a/themes/hugo-snap-gallery/README.md +++ /dev/null @@ -1,181 +0,0 @@ -# hugo-easy-gallery - -**2019-01-20: I'm looking for people to help maintain this project - e.g. review and approve pull requests, which I no longer have time to do. Please contact me if you are interested. Thanks!** - -Automagical css image gallery in [Hugo](https://gohugo.io/) using shortcodes, with optional lightbox/carousel gadget using [PhotoSwipe](http://photoswipe.com/) and jQuery. - -**New:** Create a gallery of all images in a directory with just one line of shortcode, see [demo](https://www.liwen.id.au/heg/#gallery-usage). - -**Need help?** -- Post your question at https://github.com/liwenyip/hugo-easy-gallery/issues. -- Include a link to a test page that demonstrates the issue you are having -- Include your source code for the test page -- Please be patient (I have a busy day job as that has nothing to do with web development or computer science, so every time I look at issues/PRs it takes me a while to get back up to speed); I will respond eventually. Please DO NOT email me asking for help, you are very unlikely to get a response from me this way. - -**Fixed an issue or made an improvement?** -- Please submit a pull request -- Include a link to a test page -- Include your source code for the test page -- Let me know if you are in Sydney and I will thank you with beer :-) - -## Demo - -- Feature demonstration at https://www.liwen.id.au/heg/ -- Real-life example at https://www.liwen.id.au/arduino-rf-codes/ - -## 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 -- 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 - -## PhotoSwipe Features - -- Load PhotoSwipe by calling the `{{< load-photoswipe >}}` shortcode anywhere in your post -- Loads all of the `
` elements in your post, regardless of where in your post they appear, into a lightbox/carousel style image gallery -- Works with any existing `
` 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) -- Loads PhotoSwipe js and css libraries from `cdnjs.cloudflare.com` - -## Installation -Put files in following places: - -- /layouts/shortcodes/figure.html -- /layouts/shortcodes/gallery.html -- /layouts/shortcodes/load-photoswipe.html -- /static/js/load-photoswipe.js -- /static/css/hugo-easy-gallery.css - -**NB `load-photoswipe.html` loads jQuery from `cdnjs.cloudflare.com`.** - -- If your template already loads jQuery in the header, you can delete the jQuery link in `load-photoswipe.html`. -- If your template already loads jQuery in the footer, you should `load-photoswipe.js` from the footer instead of in `load-photoswipe.html`. - -If you want, you could (depending on a front matter param) conditionally load `load-photoswipe.html` or its contents from the footer of your template. But I've consciously chosen to load PhotoSwipe using a shortcode so that you don't have to modify your template if you don't want to. - -## Theme integration - -Put files in the relevant folders within your theme. - -Delete `/layouts/shortcodes/load-photoswipe.html`. - -Rename `/layouts/shortcodes/load-photoswipe-theme.html` to `/layouts/shortcodes/load-photoswipe.html`. - -Add the following lines to the footer of your template, just before ``: - -(Omit the jQuery line if jQuery is already loaded elsewhere in your template; just make sure that jQuery is loaded **before** this code.) - -```html - -{{ if ($.Scratch.Get "photoswipeloaded") }} - - - - -{{ end }} -``` - -## `{{< 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 `
` 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. -- `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 - -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-effect` - determines if/how images change upon hover. Options: - - `zoom` (default) - - `grow` - - `shrink` - - `slideup` - - `slidedown` - - `none` -- `hover-transition` - determines if/how images change upon hover. Options: - - not set - smooth transition (default) - - `none` - hard transition - -## PhotoSwipe usage - -- Call `{{< load-photoswipe >}}` **once** on each page where you want to use PhotoSwipe. -- It doesn't matter where on the page. -- If you don't load PhotoSwipe, each figure will instead have a good ol' fashioned hyperlink to a bigger image (or - if you haven't specified a bigger image - the same one). - -You can optionally have different captions on page vs in PhotoSwipe: - -- `{{< figure src="image.jpg" alt="This is a caption">}}` or `{{< figure src="image.jpg" caption="This is a caption">}}` will use the same caption both on the page and in PhotoSwipe. -- `{{< figure src="image.jpg" caption="A short caption" alt="This is a much longer, verbose, comprehensive caption that will be used in PhotoSwipe">}}` will use a different caption in PhotoSwipe. - -## CSS Hackers - -`hugo-easy-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. - -## Issues - -I've tested this with the [beautifulhugo](https://github.com/halogenica/beautifulhugo) theme. If things don't work properly with other themes, raise an issue on GitHub, or even better fix the issue and submit a pull request :-) - -## Credits - -These blog posts helped me immensely: - -- http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/ -- http://www.thehome.dk/article/photoswipe-gallery-hugo/ -- https://webdesign.tutsplus.com/tutorials/the-perfect-lightbox-using-photoswipe-with-jquery--cms-23587 diff --git a/themes/hugo-snap-gallery/layouts/shortcodes/figure.html b/themes/hugo-snap-gallery/layouts/shortcodes/figure.html deleted file mode 100644 index a7952e4..0000000 --- a/themes/hugo-snap-gallery/layouts/shortcodes/figure.html +++ /dev/null @@ -1,32 +0,0 @@ - - -{{- if not ($.Page.Scratch.Get "figurecount") }}{{ end }} -{{- $.Page.Scratch.Add "figurecount" 1 -}} - -{{- $thumb := .Get "src" | default (printf "%s." (.Get "thumb") | replace (.Get "link") ".") }} -
-
-
- -
- {{ with .Get "link" | default (.Get "src") }}{{ end }} - {{- if or (or (.Get "title") (.Get "caption")) (.Get "attr")}} -
- {{- with .Get "title" }}

{{.}}

{{ end }} - {{- if or (.Get "caption") (.Get "attr")}} -

- {{- .Get "caption" -}} - {{- with .Get "attrlink"}}{{ .Get "attr" }}{{ else }}{{ .Get "attr"}}{{ end -}} -

- {{- end }} -
- {{- end }} -
-
diff --git a/themes/hugo-snap-gallery/layouts/shortcodes/gallery.html b/themes/hugo-snap-gallery/layouts/shortcodes/gallery.html deleted file mode 100644 index b5817a5..0000000 --- a/themes/hugo-snap-gallery/layouts/shortcodes/gallery.html +++ /dev/null @@ -1,44 +0,0 @@ - - - -{{- $.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 }}

-
- -
-
- {{- end }} - {{- end }} - {{- else -}} - - {{ .Inner }} - {{- end }} -
diff --git a/themes/hugo-snap-gallery/static/css/snap-gallery.css b/themes/hugo-snap-gallery/static/css/snap-gallery.css deleted file mode 100644 index c911f94..0000000 --- a/themes/hugo-snap-gallery/static/css/snap-gallery.css +++ /dev/null @@ -1,164 +0,0 @@ -/* - SPDX-FileCopyrightText: 2019 Li-Wen Yip - 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 */ -} diff --git a/themes/hugo-snap-gallery/theme.yaml b/themes/hugo-snap-gallery/theme.yaml deleted file mode 100644 index 2600648..0000000 --- a/themes/hugo-snap-gallery/theme.yaml +++ /dev/null @@ -1,14 +0,0 @@ -name: Snap Gallery -license: MIT -licenselink: -description: Automagical css image gallery in Hugo using shortcodes. Fork of https://github.com/liwenyip/hugo-easy-gallery -homepage: -tags: - - component -features: - - comments -min_version: 0.40.0 - -author: - name: Li-Wen Yip, Max Mehl - homepage: