Browse Source

make hugo-snap-gallery a submodule

new-gallery
max.mehl 2 years ago
parent
commit
33840acd18
Signed by: mxmehl GPG Key ID: 2704E4AB371E2E92
  1. 3
      .gitmodules
  2. 1
      themes/hugo-snap-gallery
  3. 181
      themes/hugo-snap-gallery/README.md
  4. 32
      themes/hugo-snap-gallery/layouts/shortcodes/figure.html
  5. 44
      themes/hugo-snap-gallery/layouts/shortcodes/gallery.html
  6. 164
      themes/hugo-snap-gallery/static/css/snap-gallery.css
  7. 14
      themes/hugo-snap-gallery/theme.yaml

3
.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

1
themes/hugo-snap-gallery

@ -0,0 +1 @@
Subproject commit 51e757b5270f5b42ff7b5e7364cd032fad35b1a5

181
themes/hugo-snap-gallery/README.md

@ -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 `<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)
- 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 `</body>`:
(Omit the jQuery line if jQuery is already loaded elsewhere in your template; just make sure that jQuery is loaded **before** this code.)
```html
<!-- Load PhotoSwipe js if the load-photoswipe shortcode has been used -->
{{ if ($.Scratch.Get "photoswipeloaded") }}
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<script src="/js/load-photoswipe.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.1/photoswipe.min.js" integrity="sha256-UplRCs9v4KXVJvVY+p+RSo5Q4ilAUXh7kpjyIP5odyc=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.1/photoswipe-ui-default.min.js" integrity="sha256-PWHOlUzc96pMc8ThwRIXPn8yH4NOLu42RQ0b9SpnpFk=" crossorigin="anonymous"></script>
{{ 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 `<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.
- `class="no-photoswipe"` prevents a `<figure>` 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

32
themes/hugo-snap-gallery/layouts/shortcodes/figure.html

@ -1,32 +0,0 @@
<!--
SPDX-FileCopyrightText: 2019 Li-Wen Yip <liwen.yip@gmail.com>
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")}}
<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 }}
</figcaption>
{{- end }}
</figure>
</div>

44
themes/hugo-snap-gallery/layouts/shortcodes/gallery.html

@ -1,44 +0,0 @@
<!--
SPDX-FileCopyrightText: 2019 Li-Wen Yip <liwen.yip@gmail.com>
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 }}
</div>

164
themes/hugo-snap-gallery/static/css/snap-gallery.css

@ -1,164 +0,0 @@
/*
SPDX-FileCopyrightText: 2019 Li-Wen Yip <liwen.yip@gmail.com>
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 */
}

14
themes/hugo-snap-gallery/theme.yaml

@ -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:
Loading…
Cancel
Save