add gallery content
This commit is contained in:
parent
7e94275ae3
commit
42942b4fbe
221 changed files with 3546 additions and 74 deletions
|
|
@ -0,0 +1,18 @@
|
|||
---
|
||||
title: Buurt in Beeld
|
||||
lastmod: 2022-11-15T22:44:12.782Z
|
||||
layout: page
|
||||
---
|
||||
Deelkippen, een buurtkas, zwembaden, boomhutten en totempalen – Buurland is moeilijk in woorden te vangen. In beeld gaat het des te beter! Klik op de foto’s hieronder voor een meer informatie.
|
||||
|
||||
{{< gallery >}}
|
||||
{{< figure src="images/buurtinbeeld/zwembad.jpg" link="/buurtinbeeld/zwembad/" caption="Zwembad" >}}
|
||||
{{< figure src="images/buurtinbeeld/buurtkas.jpg" link="/buurtinbeeld/buurtkas/" caption="Buurtkas" >}}
|
||||
{{< figure src="images/buurtinbeeld/kippen-en-eieren.jpg" link="/buurtinbeeld/eieren/" caption="Kippen (en eieren)">}}
|
||||
{{< figure src="images/buurtinbeeld/jacuzzi.jpg" link="/buurtinbeeld/jacuzzi/" caption="Jaccuzi" >}}
|
||||
{{< figure src="images/buurtinbeeld/totempaal.jpg" link="/buurtinbeeld/totempaal/" caption="Totempaal" >}}
|
||||
{{< figure src="images/buurtinbeeld/pizza-oven.jpg" link="/buurtinbeeld/pizza-oven/" caption="Pizza-oven" >}}
|
||||
{{< figure src="images/buurtinbeeld/gekleurde-gevels.jpg" link="/buurtinbeeld/gevels/" caption="Gekleurde gevels" >}}
|
||||
{{< figure src="images/buurtinbeeld/touwbrug-en-boomhut.jpg" link="/buurtinbeeld/touwbrug-boomhut/" caption="Boomhut" >}}
|
||||
{{< figure src="images/buurtinbeeld/vogelverschrikker.jpg" link="/buurtinbeeld/vogelverschrikker/" caption="Vogelverschrikker" >}}
|
||||
{{< /gallery >}}
|
||||
284
themes/hugo-easy-gallery/exampleSite/content/posts/heg.md
Normal file
284
themes/hugo-easy-gallery/exampleSite/content/posts/heg.md
Normal file
|
|
@ -0,0 +1,284 @@
|
|||
---
|
||||
title: Hugo Easy Gallery
|
||||
date: 2017-03-25T00:00:00Z
|
||||
lastmod: 2017-03-25T00:00:00Z
|
||||
author: Li-Wen Yip
|
||||
avatar: /img/authors/liwenyip.jpg
|
||||
authorlink: https://www.liwen.id.au/heg/
|
||||
cover: /img/authors/liwenyip.jpg
|
||||
# images:
|
||||
# - /img/cover.jpg
|
||||
categories:
|
||||
- Docs
|
||||
tags:
|
||||
- Photoswipe
|
||||
draft: false
|
||||
---
|
||||
*Automagical PhotoSwipe image gallery with a one-line shortcode*
|
||||
<!--more-->
|
||||
|
||||
Hugo Easy Gallery makes Hugo image galleries easy. [Get the code and documentation on GitHub](https://github.com/liwenyip/hugo-easy-gallery/). Demo below.
|
||||
|
||||
## Create gallery from a directory
|
||||
```
|
||||
{{</* gallery dir="/img/arduino/" /*/>}} {{</* load-photoswipe */>}}
|
||||
```
|
||||
|
||||
**Don't forget to close the `gallery` tag with a forward slash before the Hugo brackets `/>))` or by calling `{{</* /gallery */>}}` afterwards!!!** You can call `load-photoswipe` anywhere on the page (it doesn't have to be before or after anything in particular)
|
||||
|
||||
{{< gallery dir="/img/arduino/" />}} {{< load-photoswipe >}}
|
||||
|
||||
Notes:
|
||||
|
||||
- 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 (look at the last image - `test-setup.jpg)`.
|
||||
- The default thumbnail suffix is `-thumb`, but you can specify a different one e.g. `thumb="-small"` or `thumb="_150x150"`.
|
||||
- The layout is repsonsive - try changing your browser window size or use Chrome [device mode](https://developers.google.com/web/tools/chrome-devtools/device-mode/) to see the responsiveness.
|
||||
- `{{</* load-photoswipe */>}}` enables PhotoSwipe. You only need to call this shortcode once per page. If you don’t enable PhotoSwipe, you’ll still get the same on-page image gallery, but when you click/tap an image, it will link directly to the hi-res image (if you’ve specified one) instead of loading the PhotoSwipe carousel/lightbox gadget. For details of how the PhotoSwipe bit works, see my [previous post](/photoswipe).
|
||||
- `/static/img/arduino/` contains the following files:
|
||||
```
|
||||
garage-opener-inside-thumb.jpg
|
||||
garage-opener-inside.jpg
|
||||
garage-opener-thumb.jpg
|
||||
garage-opener.jpg
|
||||
lamp-setup-thumb.jpg
|
||||
lamp-setup.jpg
|
||||
ms-front-thumb.jpg
|
||||
ms-front.jpg
|
||||
ms-rear-thumb.jpg
|
||||
ms-rear.jpg
|
||||
ms-remote-inside-thumb.jpg
|
||||
ms-remote-inside.jpg
|
||||
ms-remote-thumb.jpg
|
||||
ms-remote.jpg
|
||||
**test**-setup.jpg
|
||||
```
|
||||
|
||||
## Create gallery of specific files
|
||||
|
||||
```
|
||||
{{</* gallery */>}}
|
||||
{{</* figure link="/img/homepage/sydney-harbour.jpg" caption="Sydney Harbour" */>}}
|
||||
{{</* figure link="/img/homepage/cc_jeepers.jpg" caption="Capital Chorus" */>}}
|
||||
{{</* figure link="/img/arduino/test-setup.jpg" caption="Arduino test setup" */>}}
|
||||
{{</* /gallery */>}}
|
||||
```
|
||||
{{< gallery >}}
|
||||
{{< figure link="/img/homepage/sydney-harbour.jpg" caption="Sydney Harbour" >}}
|
||||
{{< figure link="/img/homepage/cc_jeepers.jpg" caption="Capital Chorus" >}}
|
||||
{{< figure link="/img/arduino/test-setup.jpg" caption="Arduino test setup" >}}
|
||||
{{< /gallery >}}
|
||||
|
||||
## Gallery options
|
||||
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
|
||||
|
||||
### Caption effects:
|
||||
|
||||
```
|
||||
{{</* gallery hover-effect="none" caption-effect="slide" */>}} ...
|
||||
{{</* gallery hover-effect="none" caption-effect="fade" */>}} ...
|
||||
{{</* gallery hover-effect="none" caption-effect="appear" */>}} ...
|
||||
{{</* gallery hover-effect="none" caption-effect="none" */>}} ...
|
||||
```
|
||||
|
||||
{{< gallery hover-effect="none" caption-effect="slide" >}}
|
||||
{{< figure link="/img/homepage/sydney-harbour.jpg" caption="Sydney Harbour" >}}
|
||||
{{< figure link="/img/homepage/cc_jeepers.jpg" caption="Capital Chorus" >}}
|
||||
{{< figure link="/img/arduino/test-setup.jpg" caption="Arduino test setup" >}}
|
||||
{{< /gallery >}}
|
||||
{{< gallery hover-effect="none" caption-effect="fade" >}}
|
||||
{{< figure link="/img/homepage/sydney-harbour.jpg" caption="Sydney Harbour" >}}
|
||||
{{< figure link="/img/homepage/cc_jeepers.jpg" caption="Capital Chorus" >}}
|
||||
{{< figure link="/img/arduino/test-setup.jpg" caption="Arduino test setup" >}}
|
||||
{{< /gallery >}}
|
||||
{{< gallery hover-effect="none" caption-effect="appear" >}}
|
||||
{{< figure link="/img/homepage/sydney-harbour.jpg" caption="Sydney Harbour" >}}
|
||||
{{< figure link="/img/homepage/cc_jeepers.jpg" caption="Capital Chorus" >}}
|
||||
{{< figure link="/img/arduino/test-setup.jpg" caption="Arduino test setup" >}}
|
||||
{{< /gallery >}}
|
||||
{{< gallery hover-effect="none" caption-effect="none" >}}
|
||||
{{< figure link="/img/homepage/sydney-harbour.jpg" caption="Sydney Harbour" >}}
|
||||
{{< figure link="/img/homepage/cc_jeepers.jpg" caption="Capital Chorus" >}}
|
||||
{{< figure link="/img/arduino/test-setup.jpg" caption="Arduino test setup" >}}
|
||||
{{< /gallery >}}
|
||||
|
||||
|
||||
### Caption position:
|
||||
```
|
||||
{{</* gallery caption-position="bottom" caption-effect="slide" */>}} ...
|
||||
{{</* gallery caption-position="center" caption-effect="fade" */>}} ...
|
||||
{{</* gallery caption-position="none" */>}} ...
|
||||
```
|
||||
{{< gallery caption-position="bottom" caption-effect="slide" >}}
|
||||
{{< figure link="/img/homepage/sydney-harbour.jpg" caption="Sydney Harbour" >}}
|
||||
{{< figure link="/img/homepage/cc_jeepers.jpg" caption="Capital Chorus" >}}
|
||||
{{< figure link="/img/arduino/test-setup.jpg" caption="Arduino test setup" >}}
|
||||
{{< /gallery >}}
|
||||
{{< gallery caption-position="center" caption-effect="fade" >}}
|
||||
{{< figure link="/img/homepage/sydney-harbour.jpg" caption="Sydney Harbour" >}}
|
||||
{{< figure link="/img/homepage/cc_jeepers.jpg" caption="Capital Chorus" >}}
|
||||
{{< figure link="/img/arduino/test-setup.jpg" caption="Arduino test setup" >}}
|
||||
{{< /gallery >}}
|
||||
{{< gallery caption-position="none" >}}
|
||||
{{< figure link="/img/homepage/sydney-harbour.jpg" caption="Sydney Harbour" >}}
|
||||
{{< figure link="/img/homepage/cc_jeepers.jpg" caption="Capital Chorus" >}}
|
||||
{{< figure link="/img/arduino/test-setup.jpg" caption="Arduino test setup" >}}
|
||||
{{< /gallery >}}
|
||||
|
||||
### Hover effects:
|
||||
|
||||
```
|
||||
{{</* gallery hover-effect="grow" */>}} ...
|
||||
{{</* gallery hover-effect="shrink" */>}} ...
|
||||
{{</* gallery hover-effect="slideup" */>}} ...
|
||||
{{</* gallery hover-effect="slidedown" */>}} ...
|
||||
{{</* gallery hover-effect="none" */>}} ...
|
||||
{{</* gallery hover-effect="grow" hover-transition="none" */>}} ...
|
||||
```
|
||||
{{< gallery hover-effect="grow" >}}
|
||||
{{< figure link="/img/homepage/sydney-harbour.jpg" caption="Sydney Harbour" >}}
|
||||
{{< figure link="/img/homepage/cc_jeepers.jpg" caption="Capital Chorus" >}}
|
||||
{{< figure link="/img/arduino/test-setup.jpg" caption="Arduino test setup" >}}
|
||||
{{< /gallery >}}
|
||||
{{< gallery hover-effect="shrink" >}}
|
||||
{{< figure link="/img/homepage/sydney-harbour.jpg" caption="Sydney Harbour" >}}
|
||||
{{< figure link="/img/homepage/cc_jeepers.jpg" caption="Capital Chorus" >}}
|
||||
{{< figure link="/img/arduino/test-setup.jpg" caption="Arduino test setup" >}}
|
||||
{{< /gallery >}}
|
||||
{{< gallery hover-effect="slideup" >}}
|
||||
{{< figure link="/img/homepage/sydney-harbour.jpg" caption="Sydney Harbour" >}}
|
||||
{{< figure link="/img/homepage/cc_jeepers.jpg" caption="Capital Chorus" >}}
|
||||
{{< figure link="/img/arduino/test-setup.jpg" caption="Arduino test setup" >}}
|
||||
{{< /gallery >}}
|
||||
{{< gallery hover-effect="slidedown" >}}
|
||||
{{< figure link="/img/homepage/sydney-harbour.jpg" caption="Sydney Harbour" >}}
|
||||
{{< figure link="/img/homepage/cc_jeepers.jpg" caption="Capital Chorus" >}}
|
||||
{{< figure link="/img/arduino/test-setup.jpg" caption="Arduino test setup" >}}
|
||||
{{< /gallery >}}
|
||||
{{< gallery hover-effect="none" >}}
|
||||
{{< figure link="/img/homepage/sydney-harbour.jpg" caption="Sydney Harbour" >}}
|
||||
{{< figure link="/img/homepage/cc_jeepers.jpg" caption="Capital Chorus" >}}
|
||||
{{< figure link="/img/arduino/test-setup.jpg" caption="Arduino test setup" >}}
|
||||
{{< /gallery >}}
|
||||
{{< gallery hover-effect="grow" hover-transition="none" >}}
|
||||
{{< figure link="/img/homepage/sydney-harbour.jpg" caption="Sydney Harbour" >}}
|
||||
{{< figure link="/img/homepage/cc_jeepers.jpg" caption="Capital Chorus" >}}
|
||||
{{< figure link="/img/arduino/test-setup.jpg" caption="Arduino test setup" >}}
|
||||
{{< /gallery >}}
|
||||
|
||||
## Figure options
|
||||
### Specify separate thumbnail and hi-res files:
|
||||
```
|
||||
{{</* figure link="/img/homepage/sydney-harbour.jpg"
|
||||
src="/img/homepage/sydney-harbour-thumb.jpg" */>}}
|
||||
OR
|
||||
{{</* figure link="/img/homepage/sydney-harbour.jpg" thumb="-thumb" */>}}
|
||||
```
|
||||
{{< figure link="/img/homepage/sydney-harbour.jpg" thumb="-thumb" >}}
|
||||
|
||||
### Specify a hi-res file only:
|
||||
```
|
||||
{{</* figure link="/img/homepage/sydney-harbour.jpg" */>}}
|
||||
OR
|
||||
{{</* figure src="/img/homepage/sydney-harbour.jpg" */>}}
|
||||
```
|
||||
|
||||
{{< figure link="/img/homepage/sydney-harbour.jpg" >}}
|
||||
|
||||
### Specify the dimensions of your hi-res image:
|
||||
|
||||
`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.
|
||||
```
|
||||
{{</* figure link="/img/homepage/cc_jeepers.jpg"
|
||||
thumb="-thumb" size="1442x662" */>}}
|
||||
```
|
||||
{{< figure link="/img/homepage/cc_jeepers.jpg"
|
||||
thumb="-thumb" size="1442x662" >}}
|
||||
|
||||
## Figure options - standalone
|
||||
|
||||
Use these options only on figures that are not in a gallery…
|
||||
|
||||
### Disable photoswipe:
|
||||
|
||||
`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).
|
||||
```
|
||||
{{</* figure link="/img/homepage/sydney-harbour.jpg"
|
||||
thumb="-thumb" class="no-photoswipe" */>}}
|
||||
```
|
||||
{{< figure link="/img/homepage/sydney-harbour.jpg"
|
||||
thumb="-thumb" class="no-photoswipe" >}}
|
||||
|
||||
### Reduced width:
|
||||
|
||||
`width` defines the `max-width` 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.
|
||||
|
||||
```
|
||||
{{</* figure src="/img/homepage/sydney-harbour.jpg"
|
||||
width="400px" */>}}
|
||||
```
|
||||
|
||||
{{< figure src="/img/homepage/sydney-harbour.jpg"
|
||||
width="400px" >}}
|
||||
|
||||
### With caption:
|
||||
|
||||
By default no CSS styles are applied to the caption. You probably don’t want to do this unless you’ve got your own CSS styles for the <figcaption> element.
|
||||
|
||||
```
|
||||
{{</* figure src="/img/homepage/sydney-harbour.jpg"
|
||||
width="400px" caption="Sydney Harbour" */>}}
|
||||
```
|
||||
{{< figure src="/img/homepage/sydney-harbour.jpg"
|
||||
width="400px" caption="Sydney Harbour" >}}
|
||||
|
||||
### With pretty captions:
|
||||
|
||||
You can specify the following options to make your captions pretty:
|
||||
|
||||
- `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)
|
||||
|
||||
```
|
||||
{{</* figure src="/img/homepage/sydney-harbour.jpg" caption="Sydney Harbour"
|
||||
width="400px" caption-position="bottom" */>}}
|
||||
{{</* figure src="/img/homepage/sydney-harbour.jpg" caption="Sydney Harbour"
|
||||
width="400px" caption-position="bottom" caption-effect="appear" */>}}
|
||||
{{</* figure ... caption-effect="slide" */>}}
|
||||
{{</* figure ... caption-effect="fade" */>}}
|
||||
```
|
||||
|
||||
{{< figure src="/img/homepage/sydney-harbour.jpg" caption="Sydney Harbour"
|
||||
width="400px" caption-position="bottom" >}}
|
||||
{{< figure src="/img/homepage/sydney-harbour.jpg" caption="Sydney Harbour"
|
||||
width="400px" caption-position="bottom" caption-effect="appear" >}}
|
||||
{{< figure src="/img/homepage/sydney-harbour.jpg" caption="Sydney Harbour"
|
||||
width="400px" caption-position="bottom" caption-effect="slide" >}}
|
||||
{{< figure src="/img/homepage/sydney-harbour.jpg" caption="Sydney Harbour"
|
||||
width="400px" caption-position="bottom" caption-effect="fade" >}}
|
||||
304
themes/hugo-easy-gallery/exampleSite/content/posts/photoswipe.md
Normal file
304
themes/hugo-easy-gallery/exampleSite/content/posts/photoswipe.md
Normal file
|
|
@ -0,0 +1,304 @@
|
|||
---
|
||||
title: Automagical image gallery in Hugo with PhotoSwipe and jQuery
|
||||
date: 2017-03-06T00:00:00Z
|
||||
lastmod: 2022-03-25T00:00:00Z
|
||||
author: Li-Wen Yip
|
||||
avatar: /img/authors/liwenyip.jpg
|
||||
authorlink: https://www.liwen.id.au/photoswipe/
|
||||
cover: /img/authors/liwenyip.jpg
|
||||
# images:
|
||||
# - /img/cover.jpg
|
||||
categories:
|
||||
- Docs
|
||||
tags:
|
||||
- Photoswipe
|
||||
draft: false
|
||||
---
|
||||
|
||||
<!--more-->
|
||||
|
||||
Update 25/03/2017: I’ve combined this PhotoSwipe implementation with a shortcode that generates a responsive css gallery of all the images in a directory - see [Hugo Easy Gallery](/posts/heg).
|
||||
|
||||
There are various solutions for implementing [PhotoSwipe](http://photoswipe.com/) in [Hugo](https://gohugo.io/), including [HugoPhotoSwipe](https://github.com/GjjvdBurg/HugoPhotoSwipe) and [Tom Helmer’s blog post](http://www.thehome.dk/article/photoswipe-gallery-hugo/), but they all require you group all your images in the once place on the page.
|
||||
|
||||
What I wanted was:
|
||||
|
||||
- A lightbox/carousel-style image gallery that loads all of the images in my post, regardless of where in the post they appear;
|
||||
- Works with any existing images I’ve embedded using the figure shortcode without me having to change anything; and
|
||||
- Does not require me to [pre-define the image sizes](http://photoswipe.com/documentation/faq.html#image-size);
|
||||
|
||||
I couldn’t find a ready-made solution that met my requirements, so I made my own.
|
||||
|
||||
All the code in this post is available on [GitHub](https://github.com/liwenyip/hugo-pswp).
|
||||
|
||||
## New `figure` shortcode
|
||||
|
||||
If all your existing figures already have a `link` that points to a larger version of the image, then actually Hugo’s built-in `figure` [shortcode](https://gohugo.io/extras/shortcodes/#figure) will work just fine. But if not, we can override the built-in `figure` shortcode to make it work better with PhotoSwipe:
|
||||
|
||||
Put this file in `/layouts/shortcodes/figure.html`:
|
||||
|
||||
```html
|
||||
<figure {{ with .Get "class" }}class="{{.}}"{{ end }} itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
|
||||
<a href="{{ with .Get "link" }}{{.}}{{ else }}{{ .Get "src" }}{{ end }}" {{ with .Get "size" }}data-size="{{.}}"{{ end }} itemprop="contentUrl">
|
||||
<img itemprop="thumbnail"
|
||||
src="{{ with .Get "src" }}{{.}}{{ else }}{{ printf "%s." (.Get "thumb") | replace (.Get "link") "." }}{{ end }}"
|
||||
{{ if or (.Get "alt") (.Get "caption") }}alt="{{ with .Get "alt" }}{{.}}{{else}}{{ .Get "caption" }}{{ end }}"{{ end }}
|
||||
{{ with .Get "width" }}width="{{.}}"{{ end }}/>
|
||||
</a>
|
||||
{{ 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>
|
||||
```
|
||||
|
||||
This new shortcode accepts two new parameters size and thumb, and behaves differently as follows:
|
||||
|
||||
`{{</* figure src="/img/homepage/cc_jeepers.jpg" */>}}` does the same as normal, but with a hyperlink to itself:
|
||||
|
||||
{{< figure src="/img/homepage/cc_jeepers.jpg" >}}
|
||||
|
||||
`{{</* figure link="/img/homepage/cc_jeepers.jpg" thumb="-thumb" */>}}` will display `/img/homepage/cc_jeepers-thumb.jpg` and a hyperlink to `/img/homepage/cc_jeepers.jpg`:
|
||||
|
||||
{{< figure link="/img/homepage/cc_jeepers.jpg" thumb="-thumb" >}}
|
||||
|
||||
That’s already kind of useful by itself, but wait, there’s more…
|
||||
|
||||
## Shortcode to enable PhotoSwipe
|
||||
|
||||
To initialise PhotoSwipe we need to add some html and include the PhotoSwipe css/js libraries, which we’ll do by creating a `pswp-init` shortcode and calling it anywhere on the page/post where you want to use PhotoSwipe. Note the bulk of this file is as per the PhotoSwipe [getting started docs](http://photoswipe.com/documentation/getting-started.html#initialization), except that I’m linking the PhotoSwipe css/js libraries from a CDN.
|
||||
|
||||
Put this file in `/layouts/shortcodes/pswp-init.html`:
|
||||
|
||||
```html
|
||||
<!-- Photoswipe css/js libraries -->
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.1/photoswipe.min.css" integrity="sha256-sCl5PUOGMLfFYctzDW3MtRib0ctyUvI9Qsmq2wXOeBY=" crossorigin="anonymous" />
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.1/default-skin/default-skin.min.css" integrity="sha256-BFeI1V+Vh1Rk37wswuOYn5lsTcaU96hGaI7OUVCLjPc=" crossorigin="anonymous" />
|
||||
<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>
|
||||
|
||||
<!-- Root element of PhotoSwipe. Must have class pswp. -->
|
||||
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
|
||||
<!-- Background of PhotoSwipe.
|
||||
It's a separate element, as animating opacity is faster than rgba(). -->
|
||||
<div class="pswp__bg"></div>
|
||||
<!-- Slides wrapper with overflow:hidden. -->
|
||||
<div class="pswp__scroll-wrap">
|
||||
<!-- Container that holds slides.
|
||||
PhotoSwipe keeps only 3 of them in DOM to save memory.
|
||||
Don't modify these 3 pswp__item elements, data is added later on. -->
|
||||
<div class="pswp__container">
|
||||
<div class="pswp__item"></div>
|
||||
<div class="pswp__item"></div>
|
||||
<div class="pswp__item"></div>
|
||||
</div>
|
||||
<!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
|
||||
<div class="pswp__ui pswp__ui--hidden">
|
||||
<div class="pswp__top-bar">
|
||||
<!-- Controls are self-explanatory. Order can be changed. -->
|
||||
<div class="pswp__counter"></div>
|
||||
<button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
|
||||
<button class="pswp__button pswp__button--share" title="Share"></button>
|
||||
<button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
|
||||
<button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
|
||||
<!-- Preloader demo http://codepen.io/dimsemenov/pen/yyBWoR -->
|
||||
<!-- element will get class pswp__preloader--active when preloader is running -->
|
||||
<div class="pswp__preloader">
|
||||
<div class="pswp__preloader__icn">
|
||||
<div class="pswp__preloader__cut">
|
||||
<div class="pswp__preloader__donut"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
|
||||
<div class="pswp__share-tooltip"></div>
|
||||
</div>
|
||||
<button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
|
||||
</button>
|
||||
<button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
|
||||
</button>
|
||||
<div class="pswp__caption">
|
||||
<div class="pswp__caption__center"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--jQuery must be loaded before you load init-pswp.js; If your template already loads jQuery in the header then you don't need to load it again here; if your template already loads jQuery in the footer, then you could load init-pswp.js there instead so you don't load jQuery twice (although as long as you're loading jQuery from the same source it doesn't matter if you load it twice) -->
|
||||
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
|
||||
<script src="/js/pswp-init.js"></script>
|
||||
```
|
||||
Right at the end, we link to jQuery, and then a js and a css file. If you wanted to, you could put the js and css below in a `<script>` and a `<style>` tag so it’s all contained in the shortcode file, but I prefer to keep my js and css in separate files.
|
||||
|
||||
## The JavaScript
|
||||
|
||||
This script runs once the page is loaded, and does three things:
|
||||
|
||||
- [Create an array of slide objects](http://photoswipe.com/documentation/getting-started.html#dom-to-slide-objects) from all the figures on the page.
|
||||
- If size wasn’t pre-defined, load the image to determine its size
|
||||
- Binds click event to links/thumbnails to activate PhotoSwipe
|
||||
|
||||
Put this file in `/static/js/pswp-init.js`:
|
||||
|
||||
```js
|
||||
$( document ).ready(function() {
|
||||
var items = []; // array of slide objects that will be passed to PhotoSwipe()
|
||||
// for every figure element on the page:
|
||||
$('figure').each( function() {
|
||||
// get properties from child a/img/figcaption elements,
|
||||
var $figure = $(this),
|
||||
$a = $figure.find('a'),
|
||||
$src = $a.attr('href'),
|
||||
$title = $figure.find('figcaption').html(),
|
||||
$msrc = $figure.find('img').attr('src');
|
||||
// if data-size on <a> tag is set, read it and create an item
|
||||
if ($a.data('size')) {
|
||||
var $size = $a.data('size').split('x');
|
||||
var item = {
|
||||
src : $src,
|
||||
w : $size[0],
|
||||
h : $size[1],
|
||||
title : $title,
|
||||
msrc : $msrc
|
||||
};
|
||||
// if not, set temp default size then load the image to check actual size
|
||||
} else {
|
||||
var item = {
|
||||
src : $src,
|
||||
w : 800, // temp default size
|
||||
h : 600, // temp default size
|
||||
title : $title,
|
||||
msrc : $msrc
|
||||
};
|
||||
// load the image to check its dimensions
|
||||
// update the item as soon as w and h are known (check every 30ms)
|
||||
var img = new Image();
|
||||
img.src = $src;
|
||||
var wait = setInterval(function() {
|
||||
var w = img.naturalWidth,
|
||||
h = img.naturalHeight;
|
||||
if (w && h) {
|
||||
clearInterval(wait);
|
||||
item.w = w;
|
||||
item.h = h;
|
||||
}
|
||||
}, 30);
|
||||
}
|
||||
// Save the index of this image then add it to the array
|
||||
var index = items.length;
|
||||
items.push(item);
|
||||
// Event handler for click on a figure
|
||||
$figure.on('click', function(event) {
|
||||
event.preventDefault(); // prevent the normal behaviour i.e. load the <a> hyperlink
|
||||
// Get the PSWP element and initialise it with the desired options
|
||||
var $pswp = $('.pswp')[0];
|
||||
var options = {
|
||||
index: index,
|
||||
bgOpacity: 0.8,
|
||||
showHideOpacity: true
|
||||
}
|
||||
new PhotoSwipe($pswp, PhotoSwipeUI_Default, items, options).init();
|
||||
});
|
||||
});
|
||||
});
|
||||
```
|
||||
## Demo with individual images
|
||||
|
||||
With the `pswp-init` shortcode called, our image should now show a carousel when clicked:
|
||||
|
||||
`{{</* figure link="/img/homepage/cc_jeepers.jpg" thumb="-thumb" */>}}`:
|
||||
|
||||
{{< figure link="/img/homepage/cc_jeepers.jpg" thumb="-thumb" >}}
|
||||
|
||||
Note that the large image was already loaded - this is because we didn’t pre-define the image size, so the script had to load the image to check its size. If we pre-define the size, your browser won’t need to load it until you click on it (or any other image). We can also include a caption.
|
||||
|
||||
`{{</* figure link="/img/homepage/sydney-harbour.jpg" thumb="-thumb" size="1920x928" caption="Sydney Harbour" */>}}`:
|
||||
|
||||
{{< figure link="/img/homepage/sydney-harbour.jpg" thumb="-thumb" size="1920x928" caption="Sydney Harbour" >}}
|
||||
|
||||
If you refresh the page and then click on the image above, you’ll see it is pixellated for a litle while whilst it loads.
|
||||
|
||||
You could argue that it’s better to avoid pre-loading the images just to get their dimensions, but I’d argue it doesn’t really matter because PhotoSwipe pre-loads **all** of the images as soon as you activate it (i.e. the first time you click on an image).
|
||||
|
||||
## One last shortcode to make a gallery
|
||||
|
||||
But what if you **do** want a bunch of thumbnails all together in a box?
|
||||
|
||||
Don’t worry, we can do that too. Here’s the code:
|
||||
|
||||
Put this file in `/layouts/shortcodes/gallery.html`:
|
||||
```html
|
||||
<div class="gallery" itemscope itemtype="http://schema.org/ImageGallery">
|
||||
{{ .Inner }}
|
||||
<div class="title">{{ .Get "title" }}</div>
|
||||
</div>
|
||||
<link rel="stylesheet" href="/css/pswp-gallery.css" />
|
||||
```
|
||||
Put this file in ```/static/css/pswp-gallery.css```:
|
||||
```css
|
||||
.gallery {
|
||||
float: none;
|
||||
border: 1px solid lightgrey;
|
||||
padding: 10px;
|
||||
margin: 0px 0px 10px 10px;
|
||||
}
|
||||
.gallery .title{
|
||||
text-align: center;
|
||||
clear:left;
|
||||
//border-top: 1px solid lightgrey;
|
||||
}
|
||||
.gallery img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
.gallery figure {
|
||||
display: block;
|
||||
float: left;
|
||||
margin: 0 5px 5px 0;
|
||||
}
|
||||
.gallery figcaption {
|
||||
display: none;
|
||||
}
|
||||
figcaption {
|
||||
font-size: 75%;
|
||||
}
|
||||
```
|
||||
## Demo Gallery
|
||||
Hugo shortcodes:
|
||||
|
||||
```
|
||||
{{</* gallery title="Pictures from my Arduino post" */>}}
|
||||
{{</* figure link="/img/arduino/garage-opener.jpg" thumb="-thumb" size="600x800" caption="Garage remote" */>}}
|
||||
{{</* figure link="/img/arduino/garage-opener-inside.jpg" thumb="-thumb" size="800x600" caption="Garage remote showing EV1527 chipset" */>}}
|
||||
{{</* figure link="/img/arduino/ms-front.jpg" thumb="-thumb" size="600x800" caption="RC mains switch - front" */>}}
|
||||
{{</* figure link="/img/arduino/ms-rear.jpg" thumb="-thumb" size="600x800" caption="RC mains switch - back showing PowerTran model A0342" */>}}
|
||||
{{</* figure link="/img/arduino/ms-remote.jpg" thumb="-thumb" size="600x800" caption="RC mains switch remote" */>}}
|
||||
{{</* figure link="/img/arduino/ms-remote-inside.jpg" thumb="-thumb" size="600x800" caption="RC mains switch remote showing LX2262A-R4 chipset" */>}}
|
||||
{{</* figure link="/img/arduino/lamp-setup.jpg" thumb="-thumb" size="600x800" caption="Test setup with lamp" */>}}
|
||||
{{</* /gallery */>}}
|
||||
```
|
||||
Result:
|
||||
|
||||
{{< gallery title="Pictures from my Arduino post" >}}
|
||||
{{< figure link="/img/arduino/garage-opener.jpg" thumb="-thumb" size="600x800" caption="Garage remote" >}}
|
||||
{{< figure link="/img/arduino/garage-opener-inside.jpg" thumb="-thumb" size="800x600" caption="Garage remote showing EV1527 chipset" >}}
|
||||
{{< figure link="/img/arduino/ms-front.jpg" thumb="-thumb" size="600x800" caption="RC mains switch - front" >}}
|
||||
{{< figure link="/img/arduino/ms-rear.jpg" thumb="-thumb" size="600x800" caption="RC mains switch - back showing PowerTran model A0342" >}}
|
||||
{{< figure link="/img/arduino/ms-remote.jpg" thumb="-thumb" size="600x800" caption="RC mains switch remote" >}}
|
||||
{{< figure link="/img/arduino/ms-remote-inside.jpg" thumb="-thumb" size="600x800" caption="RC mains switch remote showing LX2262A-R4 chipset" >}}
|
||||
{{< figure link="/img/arduino/lamp-setup.jpg" thumb="-thumb" size="600x800" caption="Test setup with lamp" >}}
|
||||
{{< /gallery >}}
|
||||
|
||||
## Don't forget
|
||||
to call `{{</* pswp-init */>}}` somewhere on the page!
|
||||
|
||||
## Credits
|
||||
Thanks to [Tom Helmer](http://www.thehome.dk/article/photoswipe-gallery-hugo/) and [Thoriq Firdaus](https://webdesign.tutsplus.com/tutorials/the-perfect-lightbox-using-photoswipe-with-jquery--cms-23587) for their blog posts which helped me with this post.
|
||||
Loading…
Add table
Add a link
Reference in a new issue