add gallery content
This commit is contained in:
parent
7e94275ae3
commit
42942b4fbe
221 changed files with 3546 additions and 74 deletions
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" >}}
|
||||
Loading…
Add table
Add a link
Reference in a new issue