initial commit
This commit is contained in:
19
LICENSES/MIT.txt
Normal file
19
LICENSES/MIT.txt
Normal file
@@ -0,0 +1,19 @@
|
||||
MIT License Copyright (c) <year> <copyright holders>
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is furnished
|
||||
to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice (including the next
|
||||
paragraph) shall be included in all copies or substantial portions of the
|
||||
Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
|
||||
FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS
|
||||
OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
|
||||
WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF
|
||||
OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
||||
108
README.md
Normal file
108
README.md
Normal file
@@ -0,0 +1,108 @@
|
||||
<!--
|
||||
SPDX-FileCopyrightText: 2019 Li-Wen Yip <liwen.yip@gmail.com>
|
||||
SPDX-FileCopyrightText: 2019 Max Mehl <mail@mehl.mx>
|
||||
SPDX-License-Identifier: MIT
|
||||
-->
|
||||
|
||||
# hugo-snap-gallery
|
||||
|
||||
Automagical css image gallery in [Hugo](https://gohugo.io/) using shortcodes.
|
||||
|
||||
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.
|
||||
|
||||
## 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
|
||||
- Only requires 3.8kB 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)
|
||||
|
||||
## Installation
|
||||
|
||||
Use this like an additional Hugo theme.
|
||||
|
||||
|
||||
## `{{< 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.
|
||||
|
||||
|
||||
## `{{< 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-transition` - determines if/how images change upon hover. Options:
|
||||
- not set - smooth transition (default)
|
||||
- `none` - hard transition
|
||||
|
||||
|
||||
## CSS Hackers
|
||||
|
||||
`snap-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.
|
||||
|
||||
## License
|
||||
|
||||
MIT
|
||||
33
layouts/shortcodes/figure.html
Normal file
33
layouts/shortcodes/figure.html
Normal file
@@ -0,0 +1,33 @@
|
||||
<!--
|
||||
SPDX-FileCopyrightText: 2019 Li-Wen Yip <liwen.yip@gmail.com>
|
||||
SPDX-FileCopyrightText: 2019 Max Mehl <mail@mehl.mx>
|
||||
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>
|
||||
45
layouts/shortcodes/gallery.html
Normal file
45
layouts/shortcodes/gallery.html
Normal file
@@ -0,0 +1,45 @@
|
||||
<!--
|
||||
SPDX-FileCopyrightText: 2019 Li-Wen Yip <liwen.yip@gmail.com>
|
||||
SPDX-FileCopyrightText: 2019 Max Mehl <mail@mehl.mx>
|
||||
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>
|
||||
165
static/css/snap-gallery.css
Normal file
165
static/css/snap-gallery.css
Normal file
@@ -0,0 +1,165 @@
|
||||
/*
|
||||
SPDX-FileCopyrightText: 2019 Li-Wen Yip <liwen.yip@gmail.com>
|
||||
SPDX-FileCopyrightText: 2019 Max Mehl <mail@mehl.mx>
|
||||
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 */
|
||||
}
|
||||
18
theme.yaml
Normal file
18
theme.yaml
Normal file
@@ -0,0 +1,18 @@
|
||||
# SPDX-FileCopyrightText: 2019 Li-Wen Yip <liwen.yip@gmail.com>
|
||||
# SPDX-FileCopyrightText: 2019 Max Mehl <mail@mehl.mx>
|
||||
# SPDX-License-Identifier: MIT
|
||||
|
||||
name: Snap Gallery
|
||||
license: MIT
|
||||
licenselink: https://src.mehl.mx/mxmehl/hugo-snap-gallery/src/branch/master/LICENSES/MIT.txt
|
||||
description: Automagical css image gallery in Hugo using shortcodes. Fork of https://github.com/liwenyip/hugo-easy-gallery
|
||||
homepage: https://src.mehl.mx/mxmehl/hugo-snap-gallery
|
||||
tags:
|
||||
- component
|
||||
features:
|
||||
- gallery
|
||||
min_version: 0.50.0
|
||||
|
||||
author:
|
||||
name: Max Mehl
|
||||
homepage: https://mehl.mx
|
||||
Reference in New Issue
Block a user