add gallery content
This commit is contained in:
parent
7e94275ae3
commit
42942b4fbe
221 changed files with 3546 additions and 74 deletions
BIN
themes/.DS_Store
vendored
BIN
themes/.DS_Store
vendored
Binary file not shown.
17
themes/hugo-easy-gallery/.gitattributes
vendored
Normal file
17
themes/hugo-easy-gallery/.gitattributes
vendored
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
# Auto detect text files and perform LF normalization
|
||||
* text=auto
|
||||
|
||||
# Custom for Visual Studio
|
||||
*.cs diff=csharp
|
||||
|
||||
# Standard to msysgit
|
||||
*.doc diff=astextplain
|
||||
*.DOC diff=astextplain
|
||||
*.docx diff=astextplain
|
||||
*.DOCX diff=astextplain
|
||||
*.dot diff=astextplain
|
||||
*.DOT diff=astextplain
|
||||
*.pdf diff=astextplain
|
||||
*.PDF diff=astextplain
|
||||
*.rtf diff=astextplain
|
||||
*.RTF diff=astextplain
|
||||
47
themes/hugo-easy-gallery/.gitignore
vendored
Normal file
47
themes/hugo-easy-gallery/.gitignore
vendored
Normal file
|
|
@ -0,0 +1,47 @@
|
|||
# Windows image file caches
|
||||
Thumbs.db
|
||||
ehthumbs.db
|
||||
|
||||
# Folder config file
|
||||
Desktop.ini
|
||||
|
||||
# Recycle Bin used on file shares
|
||||
$RECYCLE.BIN/
|
||||
|
||||
# Windows Installer files
|
||||
*.cab
|
||||
*.msi
|
||||
*.msm
|
||||
*.msp
|
||||
|
||||
# Windows shortcuts
|
||||
*.lnk
|
||||
|
||||
# =========================
|
||||
# Operating System Files
|
||||
# =========================
|
||||
|
||||
# OSX
|
||||
# =========================
|
||||
|
||||
.DS_Store
|
||||
.AppleDouble
|
||||
.LSOverride
|
||||
|
||||
# Thumbnails
|
||||
._*
|
||||
|
||||
# Files that might appear in the root of a volume
|
||||
.DocumentRevisions-V100
|
||||
.fseventsd
|
||||
.Spotlight-V100
|
||||
.TemporaryItems
|
||||
.Trashes
|
||||
.VolumeIcon.icns
|
||||
|
||||
# Directories potentially created on remote AFP share
|
||||
.AppleDB
|
||||
.AppleDesktop
|
||||
Network Trash Folder
|
||||
Temporary Items
|
||||
.apdisk
|
||||
21
themes/hugo-easy-gallery/LICENCE.md
Normal file
21
themes/hugo-easy-gallery/LICENCE.md
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
MIT License
|
||||
|
||||
Copyright (c) 2017 Li-Wen Yip
|
||||
|
||||
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 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.
|
||||
225
themes/hugo-easy-gallery/README.md
Normal file
225
themes/hugo-easy-gallery/README.md
Normal file
|
|
@ -0,0 +1,225 @@
|
|||
# hugo-easy-gallery 🖼
|
||||
### This fork is currently maintained by [Darthagnon] ([homepage]), associate of Flukey and [Mesh Infrasoft](https://www.meshinfrasoft.com/).
|
||||
|
||||
Automagical css image gallery in [Hugo](https://gohugo.io/) using shortcodes, with optional lightbox/carousel gadget using [PhotoSwipe] and **no jQuery** or other frameworks.
|
||||
|
||||
## Screenshot
|
||||
|
||||
|
||||
|
||||
## Demo
|
||||
|
||||
- Feature demonstration at https://www.liwen.id.au/heg/
|
||||
- Real-life example at https://www.liwen.id.au/arduino-rf-codes/
|
||||
- Production usage by [iroQuai](https://github.com/iroQuai) at https://buurlandutrecht.nl/buurtinbeeld/ ; features a creative example of a grid gallery that links to other pages in Hugo (see also [/exampleSite/buurtinbeeld.md](/exampleSite/buurtinbeeld.md), copied from his [website source](https://raw.githubusercontent.com/iroQuai/buurlandutrecht.nl/main/content/buurtinbeeld/_index.md))
|
||||
- Production usage by maintainer [Darthagnon] on websites he manages: https://robot-one.github.io/, https://dragonsnotincluded.com/
|
||||
|
||||
|
||||
## Image Gallery Features
|
||||
|
||||
- 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): `{{< gallery dir="/img/your-directory-of-images/" />}}`
|
||||
- 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
|
||||
- **Coming soon:** Automatic thumbnail generation from image resources via [Hugo image processing](https://gohugo.io/content-management/image-processing/)
|
||||
|
||||
## 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 locally or from `cdnjs.cloudflare.com` (specify `CDNJS= true` in `config.toml/[Params]`
|
||||
|
||||
## Installation
|
||||
### As a Theme
|
||||
**(1)** Check out this repo into your `themes/` folder:
|
||||
|
||||
```
|
||||
git submodule add https://github.com/Darthagnon/hugo-easy-gallery.git themes/hugo-easy-gallery
|
||||
git submodule init
|
||||
```
|
||||
|
||||
**(2)** Then update your `./config.toml` to load the theme, for example:
|
||||
|
||||
```
|
||||
theme = ["hugo-coder", "hugo-easy-gallery"]
|
||||
```
|
||||
|
||||
### Manual Installation
|
||||
Click the big green `Code` button at the top of this page, then `Download ZIP` and extract it to your `themes/` folder.
|
||||
|
||||
**Or**, 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`
|
||||
|
||||
Then, update your `./config.toml` to load the theme, for example:
|
||||
|
||||
```
|
||||
theme = ["hugo-coder", "hugo-easy-gallery"]
|
||||
```
|
||||
|
||||
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
|
||||
|
||||
Feel free to use Hugo Easy Gallery to add Photoswipe to your Hugo themes! Tell us about them so we can list them here! Here's how you do it:
|
||||
|
||||
1. Merge the files into the relevant folders within your theme:
|
||||
- `myTheme/static/css/{files from hugo-easy-gallery}`
|
||||
- `myTheme/static/js/{files from hugo-easy-gallery}`
|
||||
- `myTheme/layouts/shortcodes/{files from hugo-easy-gallery}`
|
||||
|
||||
2. Move `/layouts/shortcodes/load-photoswipe.html` to `/layouts/partials/load-photoswipe.html`.
|
||||
|
||||
3. Add the following line to `myTheme/layouts/_default/baseof.html`, just before the closing `</body>` tag:
|
||||
|
||||
```html
|
||||
{{ partial "load-photoswipe" }}
|
||||
</body>
|
||||
```
|
||||
|
||||
Hugo Easy Gallery and Photoswipe will now be loaded on every page on your website; call the `{{< figure >}}` and `{{< gallery >}}` shortcodes anywhere!
|
||||
|
||||
## `{{< 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/" />}}
|
||||
```
|
||||
|
||||
**Don't forget the closing forward slash before the end Hugo brackets `/>}}`!!!**
|
||||
|
||||
- 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
|
||||
- `thumbnail-size` sets the size of the thumbnails for the gallery. Default is "300x300". First number is width, second number is height.
|
||||
- example: `{{< gallery dir="/img/your-directory-of-images/" thumbnail-size="150x150" />}}`
|
||||
|
||||
## 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
|
||||
|
||||
This module has been tested 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 :-)
|
||||
|
||||
### Need help?
|
||||
- Post your question in **[Issues](https://github.com/Darthagnon/hugo-easy-gallery/issues)**, or contact Darth via his [homepage].
|
||||
- Include a link to a test page that demonstrates the issue you are having
|
||||
- We recommended hosting for free with [GitHub Pages](https://pages.github.com/) and building site based off the Hugo themes [blank](https://github.com/vimux/blank) or [plain](https://github.com/Darthagnon/hugo-plain-theme) with Hugo Easy Gallery added.
|
||||
- Include your source code for the test page
|
||||
- Please be patient; the [original project](https://github.com/liwenyip/hugo-easy-gallery) is kinda dead, and we are maintining this part-time...
|
||||
|
||||
### Fixed an issue or made an improvement?
|
||||
- Please submit a **[pull request](https://github.com/Darthagnon/hugo-easy-gallery/pulls)**
|
||||
- Include a link to a test page
|
||||
- Include your source code for the test page
|
||||
- Consider volunteering to help maintain this project :-)
|
||||
|
||||
## Credits
|
||||
|
||||
These blog posts helped original author Li-Wen Yip 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
|
||||
|
||||
Many thanks to [Li-Wen Yip](https://www.liwen.id.au/), the **original author** of [Hugo Easy Gallery](https://github.com/liwenyip/hugo-easy-gallery), who retired from maintaining it 2022-02-28 due to other commitments and family. Without him, this project wouldn't exist; may he live long and prosper! His blog posts were very informative, and have been included as [exampleSite](/exampleSite) material:
|
||||
- https://www.liwen.id.au/heg/
|
||||
- https://www.liwen.id.au/photoswipe/
|
||||
|
||||
Thanks to [Kishor Bhat](https://github.com/kishorbhat) and [Emiel Hollander](https://github.com/EmielH), volunteer collaborators.
|
||||
|
||||
Thanks to [Dmytro Semenov](https://github.com/dimsemenov), the [PhotoSwipe] author.
|
||||
|
||||
Thanks to the [BeautifulHugo theme](https://github.com/halogenica/beautifulhugo) authors, who maintained compatibility and provided example code for this module.
|
||||
|
||||
Thanks to [the many community members who have contributed pull requests and issues to the original project](https://github.com/liwenyip/hugo-easy-gallery/pulls)
|
||||
|
||||
|
||||
[PhotoSwipe]: https://photoswipe.com/
|
||||
[Darthagnon]: https://github.com/Darthagnon
|
||||
[homepage]: https://robot-one.github.io/
|
||||
6
themes/hugo-easy-gallery/exampleSite/config.toml
Normal file
6
themes/hugo-easy-gallery/exampleSite/config.toml
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
[params]
|
||||
# Toggle console logging of resources loaded
|
||||
debug= true
|
||||
# Choose whether to load JS/CSS remotely from a CDN or locally
|
||||
CDNJS = false
|
||||
|
||||
|
|
@ -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.
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 140 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 107 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 66 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 56 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 69 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 119 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 76 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 240 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 227 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 292 KiB |
28
themes/hugo-easy-gallery/layouts/shortcodes/figure.html
Normal file
28
themes/hugo-easy-gallery/layouts/shortcodes/figure.html
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
<!--
|
||||
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/hugo-easy-gallery.css" | relURL }} />{{ end }}
|
||||
{{- $.Page.Scratch.Add "figurecount" 1 -}}
|
||||
<!-- use either src or link-thumb for thumbnail image -->
|
||||
{{- $filetype := index (findRE "[^.]+$" (.Get "link") ) 0 }}
|
||||
{{- $thumb := .Get "src" | default (printf "%s.%s" (replaceRE "\\.[^.]+$" (.Get "thumb") (.Get "link") ) $filetype ) | relURL }}
|
||||
<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('{{ print ($thumb | relURL) }}');"{{ end }}{{ with .Get "size" }} data-size="{{.}}"{{ end }}>
|
||||
<img itemprop="thumbnail" src="{{ $thumb }}" {{ with .Get "alt" | default (.Get "caption") }}alt="{{.}}"{{ end }}/><!-- <img> hidden if in .gallery -->
|
||||
</div>
|
||||
{{ with .Get "link" | default (.Get "src") }}<a href="{{. | relURL}}" itemprop="contentUrl"></a>{{ end }}
|
||||
{{- if or (or (.Get "title") (.Get "caption")) (.Get "attr") (.Get "attrlink") }}
|
||||
<figcaption>
|
||||
{{- with .Get "title" }}<h4>{{.}}</h4>{{ end }}
|
||||
{{- with .Get "caption" }}<p>{{.}}</p>{{ end }}
|
||||
{{- if or (.Get "attr") (.Get "attrlink") }}
|
||||
<footer><small>{{if .Get "attrlink"}}<a href="{{.Get `attrlink`}}">{{ default (.Get "attrlink") (.Get "attr") }}</a>{{ else }}{{ .Get "attr"}}{{ end }}</small></footer>
|
||||
{{- end }}
|
||||
</figcaption>
|
||||
{{- end }}
|
||||
</figure>
|
||||
</div>
|
||||
65
themes/hugo-easy-gallery/layouts/shortcodes/gallery.html
Normal file
65
themes/hugo-easy-gallery/layouts/shortcodes/gallery.html
Normal file
|
|
@ -0,0 +1,65 @@
|
|||
<!--
|
||||
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 -->
|
||||
{{- if not ($.Page.Scratch.Get "figurecount") }}<link rel="stylesheet" href="{{ relURL "/css/hugo-easy-gallery.css" }}" />{{ end }}
|
||||
{{- $.Page.Scratch.Add "figurecount" 1 }}
|
||||
{{ $baseURL := .Site.BaseURL }}
|
||||
{{- $thumbnailSize := .Get "thumbnail-size" | default "300x300" -}}
|
||||
<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|webp|avif|jxl)" }}<!-- 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 -->
|
||||
{{- $filetype := index (findRE "[^.]+$" .Name ) 0 }}<!-- file extension of 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"></a><!-- put <a> last so it is stacked on top -->
|
||||
</figure>
|
||||
</div>
|
||||
{{- end }}
|
||||
{{- end }}
|
||||
{{- else -}}
|
||||
{{ with .Inner -}}
|
||||
<!-- If no directory was specified, include any figure shortcodes called within the gallery -->
|
||||
{{ . }}
|
||||
{{- else }}
|
||||
<!-- Generate figures for all page resources of type image. -->
|
||||
{{- range $.Page.Resources.ByType "image" -}}
|
||||
|
||||
{{- $thumbnail := .Fill $thumbnailSize -}}
|
||||
<div class="box">
|
||||
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
|
||||
<div class="img" style="background-image: url('{{ $thumbnail.RelPermalink }}');" >
|
||||
<img itemprop="thumbnail" src="{{ $thumbnail.RelPermalink }}" width="{{ $thumbnail.Width }}" height="{{ $thumbnail.Height }}" alt="{{ .Title }}" /><!-- <img> hidden if in .gallery -->
|
||||
</div>
|
||||
{{- with .Title -}}
|
||||
<figcaption>
|
||||
<p>{{ . }}</p>
|
||||
</figcaption>
|
||||
{{- end -}}
|
||||
<a href="{{ .RelPermalink }}" itemprop="contentUrl"></a><!-- put <a> last so it is stacked on top -->
|
||||
</figure>
|
||||
</div>
|
||||
{{- end }}
|
||||
{{- end }}
|
||||
{{- end }}
|
||||
</div>
|
||||
|
||||
174
themes/hugo-easy-gallery/layouts/shortcodes/load-photoswipe.html
Normal file
174
themes/hugo-easy-gallery/layouts/shortcodes/load-photoswipe.html
Normal file
|
|
@ -0,0 +1,174 @@
|
|||
<!--
|
||||
Put this file in /layouts/shortcodes/load-photoswipe.html
|
||||
Documentation and licence at https://github.com/liwenyip/hugo-easy-gallery/
|
||||
-->
|
||||
|
||||
<!-- prevent this shortcode from being loaded more than once per page -->
|
||||
{{ if not ($.Page.Scratch.Get "photoswipeloaded") }}
|
||||
{{ $.Page.Scratch.Set "photoswipeloaded" 1 }}
|
||||
|
||||
<!--<script src="/js/load-photoswipe.js"></script>-->
|
||||
|
||||
<script>
|
||||
/*
|
||||
Put this file in /static/js/load-photoswipe.js
|
||||
Documentation and licence at https://github.com/liwenyip/hugo-easy-gallery/
|
||||
*/
|
||||
/* Show an alert if this js file has been loaded twice */
|
||||
if (window.loadphotoswipejs) {
|
||||
window.alert("You've loaded load-photoswipe.js twice. See https://github.com/liwenyip/hugo-easy-gallery/issues/6")
|
||||
}
|
||||
var loadphotoswipejs = 1
|
||||
|
||||
/* TODO: Make the share function work */
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
var items = []; // array of slide objects that will be passed to PhotoSwipe()
|
||||
// for every figure element on the page:
|
||||
document.querySelectorAll('figure').forEach(function($figure, index) {
|
||||
if ($figure.className == 'no-photoswipe') return true; // ignore any figures where class="no-photoswipe"
|
||||
var $a = $figure.querySelector('a'),
|
||||
$img = $figure.querySelector('img'),
|
||||
$src = $a.href,
|
||||
$title = $img.alt,
|
||||
$msrc = $img.src;
|
||||
// if data-size on <a> tag is set, read it and create an item
|
||||
if ($a.dataset.size) {
|
||||
var $size = $a.dataset.size.split('x');
|
||||
var item = {
|
||||
src : $src,
|
||||
w : $size[0],
|
||||
h : $size[1],
|
||||
title : $title,
|
||||
msrc : $msrc
|
||||
};
|
||||
{{ if .Site.Params.debug }}
|
||||
console.log("Using pre-defined dimensions for " + $src);
|
||||
{{ end }}
|
||||
// if not, set temp default size then load the image to check actual size
|
||||
} else {
|
||||
var item = {
|
||||
src : $src,
|
||||
w : 400, // temp default size
|
||||
h : 300, // temp default size
|
||||
title : $title,
|
||||
msrc : $msrc
|
||||
};
|
||||
{{ if .Site.Params.debug }}
|
||||
console.log("Using default dimensions for " + $src);
|
||||
{{ end }}
|
||||
// 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;
|
||||
{{ if .Site.Params.debug }}
|
||||
console.log("Got actual dimensions for " + img.src);
|
||||
{{ end }}
|
||||
// Update the figure parent div's max width.
|
||||
var $parentDiv = $figure.parentElement;
|
||||
if (!$parentDiv.hasOwnProperty("style")) {
|
||||
$figure.parentElement.style = "max-width: " + w + "px"
|
||||
}
|
||||
}
|
||||
}, 30);
|
||||
}
|
||||
// Save the index of this image then add it to the array
|
||||
items.push(item);
|
||||
// Event handler for click on a figure
|
||||
$figure.addEventListener('click', function(event) {
|
||||
event.preventDefault(); // prevent the normal behaviour i.e. load the <a> hyperlink
|
||||
// Get the PSWP element and initialize it with the desired options
|
||||
var $pswp = document.querySelector('.pswp');
|
||||
var options = {
|
||||
index: index,
|
||||
bgOpacity: 0.8,
|
||||
showHideOpacity: true,
|
||||
showHideAnimationType: 'zoom',
|
||||
focus: 'false',
|
||||
history: 'false'
|
||||
}
|
||||
new PhotoSwipe($pswp, PhotoSwipeUI_Default, items, options).init();
|
||||
}, false);
|
||||
});
|
||||
}, false);
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<!-- Photoswipe css/js libraries -->
|
||||
{{ with .Site.Params.CDNJS }}
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.3/photoswipe.min.css" integrity="sha256-LWdHSKWG7zv3DTpee8YAgoTfkj3gNkfauF624h4P2Nw=" crossorigin="anonymous" />
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.3/default-skin/default-skin.min.css" integrity="sha256-Q9bBMw/rHRRag46GDWY84J3elDNc8JJjKXL9tIC4oe8=" crossorigin="anonymous" />
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.3/photoswipe.min.js" integrity="sha256-ePwmChbbvXbsO02lbM3HoHbSHTHFAeChekF1xKJdleo=" crossorigin="anonymous"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.3/photoswipe-ui-default.min.js" integrity="sha256-UKkzOn/w1mBxRmLLGrSeyB4e1xbrp4xylgAWb3M42pU=" crossorigin="anonymous"></script>
|
||||
{{- else -}}
|
||||
<link rel="stylesheet" href="{{ "/css/3p/photoswipe.min@4.1.3.css" | relURL }}"></script>
|
||||
<link rel="stylesheet" href="{{ "/css/3p/default-skin/default-skin.min@4.1.3.css" | relURL }}"></script>
|
||||
<script src="{{ "/js/3p/photoswipe.min@4.1.3.js" | relURL }}"></script>
|
||||
<script src="{{ "/js/3p/photoswipe-ui-default.min@4.1.3.js" | relURL }}"></script>
|
||||
{{ end }}
|
||||
|
||||
<style>
|
||||
.pswp__caption a
|
||||
, .pswp__caption small a
|
||||
, .pswp__caption__center a {
|
||||
color: #CCC;
|
||||
/* text-decoration: none; */
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- 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>
|
||||
{{ end }}
|
||||
BIN
themes/hugo-easy-gallery/screenshot.png
Normal file
BIN
themes/hugo-easy-gallery/screenshot.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 418 KiB |
|
|
@ -0,0 +1,482 @@
|
|||
/*! PhotoSwipe Default UI CSS by Dmitry Semenov | photoswipe.com | MIT license */
|
||||
/*
|
||||
|
||||
Contents:
|
||||
|
||||
1. Buttons
|
||||
2. Share modal and links
|
||||
3. Index indicator ("1 of X" counter)
|
||||
4. Caption
|
||||
5. Loading indicator
|
||||
6. Additional styles (root element, top bar, idle state, hidden state, etc.)
|
||||
|
||||
*/
|
||||
/*
|
||||
|
||||
1. Buttons
|
||||
|
||||
*/
|
||||
/* <button> css reset */
|
||||
.pswp__button {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
position: relative;
|
||||
background: none;
|
||||
cursor: pointer;
|
||||
overflow: visible;
|
||||
-webkit-appearance: none;
|
||||
display: block;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
float: right;
|
||||
opacity: 0.75;
|
||||
-webkit-transition: opacity 0.2s;
|
||||
transition: opacity 0.2s;
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none; }
|
||||
.pswp__button:focus, .pswp__button:hover {
|
||||
opacity: 1; }
|
||||
.pswp__button:active {
|
||||
outline: none;
|
||||
opacity: 0.9; }
|
||||
.pswp__button::-moz-focus-inner {
|
||||
padding: 0;
|
||||
border: 0; }
|
||||
|
||||
/* pswp__ui--over-close class it added when mouse is over element that should close gallery */
|
||||
.pswp__ui--over-close .pswp__button--close {
|
||||
opacity: 1; }
|
||||
|
||||
.pswp__button,
|
||||
.pswp__button--arrow--left:before,
|
||||
.pswp__button--arrow--right:before {
|
||||
background: url(default-skin.png) 0 0 no-repeat;
|
||||
background-size: 264px 88px;
|
||||
width: 44px;
|
||||
height: 44px; }
|
||||
|
||||
@media (-webkit-min-device-pixel-ratio: 1.1), (-webkit-min-device-pixel-ratio: 1.09375), (min-resolution: 105dpi), (min-resolution: 1.1dppx) {
|
||||
/* Serve SVG sprite if browser supports SVG and resolution is more than 105dpi */
|
||||
.pswp--svg .pswp__button,
|
||||
.pswp--svg .pswp__button--arrow--left:before,
|
||||
.pswp--svg .pswp__button--arrow--right:before {
|
||||
background-image: url(default-skin.svg); }
|
||||
.pswp--svg .pswp__button--arrow--left,
|
||||
.pswp--svg .pswp__button--arrow--right {
|
||||
background: none; } }
|
||||
|
||||
.pswp__button--close {
|
||||
background-position: 0 -44px; }
|
||||
|
||||
.pswp__button--share {
|
||||
background-position: -44px -44px; }
|
||||
|
||||
.pswp__button--fs {
|
||||
display: none; }
|
||||
|
||||
.pswp--supports-fs .pswp__button--fs {
|
||||
display: block; }
|
||||
|
||||
.pswp--fs .pswp__button--fs {
|
||||
background-position: -44px 0; }
|
||||
|
||||
.pswp__button--zoom {
|
||||
display: none;
|
||||
background-position: -88px 0; }
|
||||
|
||||
.pswp--zoom-allowed .pswp__button--zoom {
|
||||
display: block; }
|
||||
|
||||
.pswp--zoomed-in .pswp__button--zoom {
|
||||
background-position: -132px 0; }
|
||||
|
||||
/* no arrows on touch screens */
|
||||
.pswp--touch .pswp__button--arrow--left,
|
||||
.pswp--touch .pswp__button--arrow--right {
|
||||
visibility: hidden; }
|
||||
|
||||
/*
|
||||
Arrow buttons hit area
|
||||
(icon is added to :before pseudo-element)
|
||||
*/
|
||||
.pswp__button--arrow--left,
|
||||
.pswp__button--arrow--right {
|
||||
background: none;
|
||||
top: 50%;
|
||||
margin-top: -50px;
|
||||
width: 70px;
|
||||
height: 100px;
|
||||
position: absolute; }
|
||||
|
||||
.pswp__button--arrow--left {
|
||||
left: 0; }
|
||||
|
||||
.pswp__button--arrow--right {
|
||||
right: 0; }
|
||||
|
||||
.pswp__button--arrow--left:before,
|
||||
.pswp__button--arrow--right:before {
|
||||
content: '';
|
||||
top: 35px;
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
height: 30px;
|
||||
width: 32px;
|
||||
position: absolute; }
|
||||
|
||||
.pswp__button--arrow--left:before {
|
||||
left: 6px;
|
||||
background-position: -138px -44px; }
|
||||
|
||||
.pswp__button--arrow--right:before {
|
||||
right: 6px;
|
||||
background-position: -94px -44px; }
|
||||
|
||||
/*
|
||||
|
||||
2. Share modal/popup and links
|
||||
|
||||
*/
|
||||
.pswp__counter,
|
||||
.pswp__share-modal {
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none; }
|
||||
|
||||
.pswp__share-modal {
|
||||
display: block;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
padding: 10px;
|
||||
position: absolute;
|
||||
z-index: 1600;
|
||||
opacity: 0;
|
||||
-webkit-transition: opacity 0.25s ease-out;
|
||||
transition: opacity 0.25s ease-out;
|
||||
-webkit-backface-visibility: hidden;
|
||||
will-change: opacity; }
|
||||
|
||||
.pswp__share-modal--hidden {
|
||||
display: none; }
|
||||
|
||||
.pswp__share-tooltip {
|
||||
z-index: 1620;
|
||||
position: absolute;
|
||||
background: #FFF;
|
||||
top: 56px;
|
||||
border-radius: 2px;
|
||||
display: block;
|
||||
width: auto;
|
||||
right: 44px;
|
||||
-webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
|
||||
-webkit-transform: translateY(6px);
|
||||
-ms-transform: translateY(6px);
|
||||
transform: translateY(6px);
|
||||
-webkit-transition: -webkit-transform 0.25s;
|
||||
transition: transform 0.25s;
|
||||
-webkit-backface-visibility: hidden;
|
||||
will-change: transform; }
|
||||
.pswp__share-tooltip a {
|
||||
display: block;
|
||||
padding: 8px 12px;
|
||||
color: #000;
|
||||
text-decoration: none;
|
||||
font-size: 14px;
|
||||
line-height: 18px; }
|
||||
.pswp__share-tooltip a:hover {
|
||||
text-decoration: none;
|
||||
color: #000; }
|
||||
.pswp__share-tooltip a:first-child {
|
||||
/* round corners on the first/last list item */
|
||||
border-radius: 2px 2px 0 0; }
|
||||
.pswp__share-tooltip a:last-child {
|
||||
border-radius: 0 0 2px 2px; }
|
||||
|
||||
.pswp__share-modal--fade-in {
|
||||
opacity: 1; }
|
||||
.pswp__share-modal--fade-in .pswp__share-tooltip {
|
||||
-webkit-transform: translateY(0);
|
||||
-ms-transform: translateY(0);
|
||||
transform: translateY(0); }
|
||||
|
||||
/* increase size of share links on touch devices */
|
||||
.pswp--touch .pswp__share-tooltip a {
|
||||
padding: 16px 12px; }
|
||||
|
||||
a.pswp__share--facebook:before {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
position: absolute;
|
||||
top: -12px;
|
||||
right: 15px;
|
||||
border: 6px solid transparent;
|
||||
border-bottom-color: #FFF;
|
||||
-webkit-pointer-events: none;
|
||||
-moz-pointer-events: none;
|
||||
pointer-events: none; }
|
||||
|
||||
a.pswp__share--facebook:hover {
|
||||
background: #3E5C9A;
|
||||
color: #FFF; }
|
||||
a.pswp__share--facebook:hover:before {
|
||||
border-bottom-color: #3E5C9A; }
|
||||
|
||||
a.pswp__share--twitter:hover {
|
||||
background: #55ACEE;
|
||||
color: #FFF; }
|
||||
|
||||
a.pswp__share--pinterest:hover {
|
||||
background: #CCC;
|
||||
color: #CE272D; }
|
||||
|
||||
a.pswp__share--download:hover {
|
||||
background: #DDD; }
|
||||
|
||||
/*
|
||||
|
||||
3. Index indicator ("1 of X" counter)
|
||||
|
||||
*/
|
||||
.pswp__counter {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 44px;
|
||||
font-size: 13px;
|
||||
line-height: 44px;
|
||||
color: #FFF;
|
||||
opacity: 0.75;
|
||||
padding: 0 10px; }
|
||||
|
||||
/*
|
||||
|
||||
4. Caption
|
||||
|
||||
*/
|
||||
.pswp__caption {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
min-height: 44px; }
|
||||
.pswp__caption small {
|
||||
font-size: 11px;
|
||||
color: #BBB; }
|
||||
|
||||
.pswp__caption__center {
|
||||
text-align: left;
|
||||
max-width: 420px;
|
||||
margin: 0 auto;
|
||||
font-size: 13px;
|
||||
padding: 10px;
|
||||
line-height: 20px;
|
||||
color: #CCC; }
|
||||
|
||||
.pswp__caption--empty {
|
||||
display: none; }
|
||||
|
||||
/* Fake caption element, used to calculate height of next/prev image */
|
||||
.pswp__caption--fake {
|
||||
visibility: hidden; }
|
||||
|
||||
/*
|
||||
|
||||
5. Loading indicator (preloader)
|
||||
|
||||
You can play with it here - http://codepen.io/dimsemenov/pen/yyBWoR
|
||||
|
||||
*/
|
||||
.pswp__preloader {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
margin-left: -22px;
|
||||
opacity: 0;
|
||||
-webkit-transition: opacity 0.25s ease-out;
|
||||
transition: opacity 0.25s ease-out;
|
||||
will-change: opacity;
|
||||
direction: ltr; }
|
||||
|
||||
.pswp__preloader__icn {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin: 12px; }
|
||||
|
||||
.pswp__preloader--active {
|
||||
opacity: 1; }
|
||||
.pswp__preloader--active .pswp__preloader__icn {
|
||||
/* We use .gif in browsers that don't support CSS animation */
|
||||
background: url(preloader.gif) 0 0 no-repeat; }
|
||||
|
||||
.pswp--css_animation .pswp__preloader--active {
|
||||
opacity: 1; }
|
||||
.pswp--css_animation .pswp__preloader--active .pswp__preloader__icn {
|
||||
-webkit-animation: clockwise 500ms linear infinite;
|
||||
animation: clockwise 500ms linear infinite; }
|
||||
.pswp--css_animation .pswp__preloader--active .pswp__preloader__donut {
|
||||
-webkit-animation: donut-rotate 1000ms cubic-bezier(0.4, 0, 0.22, 1) infinite;
|
||||
animation: donut-rotate 1000ms cubic-bezier(0.4, 0, 0.22, 1) infinite; }
|
||||
|
||||
.pswp--css_animation .pswp__preloader__icn {
|
||||
background: none;
|
||||
opacity: 0.75;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
position: absolute;
|
||||
left: 15px;
|
||||
top: 15px;
|
||||
margin: 0; }
|
||||
|
||||
.pswp--css_animation .pswp__preloader__cut {
|
||||
/*
|
||||
The idea of animating inner circle is based on Polymer ("material") loading indicator
|
||||
by Keanu Lee https://blog.keanulee.com/2014/10/20/the-tale-of-three-spinners.html
|
||||
*/
|
||||
position: relative;
|
||||
width: 7px;
|
||||
height: 14px;
|
||||
overflow: hidden; }
|
||||
|
||||
.pswp--css_animation .pswp__preloader__donut {
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border: 2px solid #FFF;
|
||||
border-radius: 50%;
|
||||
border-left-color: transparent;
|
||||
border-bottom-color: transparent;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: none;
|
||||
margin: 0; }
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
.pswp__preloader {
|
||||
position: relative;
|
||||
left: auto;
|
||||
top: auto;
|
||||
margin: 0;
|
||||
float: right; } }
|
||||
|
||||
@-webkit-keyframes clockwise {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg); }
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
transform: rotate(360deg); } }
|
||||
|
||||
@keyframes clockwise {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg); }
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
transform: rotate(360deg); } }
|
||||
|
||||
@-webkit-keyframes donut-rotate {
|
||||
0% {
|
||||
-webkit-transform: rotate(0);
|
||||
transform: rotate(0); }
|
||||
50% {
|
||||
-webkit-transform: rotate(-140deg);
|
||||
transform: rotate(-140deg); }
|
||||
100% {
|
||||
-webkit-transform: rotate(0);
|
||||
transform: rotate(0); } }
|
||||
|
||||
@keyframes donut-rotate {
|
||||
0% {
|
||||
-webkit-transform: rotate(0);
|
||||
transform: rotate(0); }
|
||||
50% {
|
||||
-webkit-transform: rotate(-140deg);
|
||||
transform: rotate(-140deg); }
|
||||
100% {
|
||||
-webkit-transform: rotate(0);
|
||||
transform: rotate(0); } }
|
||||
|
||||
/*
|
||||
|
||||
6. Additional styles
|
||||
|
||||
*/
|
||||
/* root element of UI */
|
||||
.pswp__ui {
|
||||
-webkit-font-smoothing: auto;
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
z-index: 1550; }
|
||||
|
||||
/* top black bar with buttons and "1 of X" indicator */
|
||||
.pswp__top-bar {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 44px;
|
||||
width: 100%; }
|
||||
|
||||
.pswp__caption,
|
||||
.pswp__top-bar,
|
||||
.pswp--has_mouse .pswp__button--arrow--left,
|
||||
.pswp--has_mouse .pswp__button--arrow--right {
|
||||
-webkit-backface-visibility: hidden;
|
||||
will-change: opacity;
|
||||
-webkit-transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
|
||||
transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); }
|
||||
|
||||
/* pswp--has_mouse class is added only when two subsequent mousemove events occur */
|
||||
.pswp--has_mouse .pswp__button--arrow--left,
|
||||
.pswp--has_mouse .pswp__button--arrow--right {
|
||||
visibility: visible; }
|
||||
|
||||
.pswp__top-bar,
|
||||
.pswp__caption {
|
||||
background-color: rgba(0, 0, 0, 0.5); }
|
||||
|
||||
/* pswp__ui--fit class is added when main image "fits" between top bar and bottom bar (caption) */
|
||||
.pswp__ui--fit .pswp__top-bar,
|
||||
.pswp__ui--fit .pswp__caption {
|
||||
background-color: rgba(0, 0, 0, 0.3); }
|
||||
|
||||
/* pswp__ui--idle class is added when mouse isn't moving for several seconds (JS option timeToIdle) */
|
||||
.pswp__ui--idle .pswp__top-bar {
|
||||
opacity: 0; }
|
||||
|
||||
.pswp__ui--idle .pswp__button--arrow--left,
|
||||
.pswp__ui--idle .pswp__button--arrow--right {
|
||||
opacity: 0; }
|
||||
|
||||
/*
|
||||
pswp__ui--hidden class is added when controls are hidden
|
||||
e.g. when user taps to toggle visibility of controls
|
||||
*/
|
||||
.pswp__ui--hidden .pswp__top-bar,
|
||||
.pswp__ui--hidden .pswp__caption,
|
||||
.pswp__ui--hidden .pswp__button--arrow--left,
|
||||
.pswp__ui--hidden .pswp__button--arrow--right {
|
||||
/* Force paint & create composition layer for controls. */
|
||||
opacity: 0.001; }
|
||||
|
||||
/* pswp__ui--one-slide class is added when there is just one item in gallery */
|
||||
.pswp__ui--one-slide .pswp__button--arrow--left,
|
||||
.pswp__ui--one-slide .pswp__button--arrow--right,
|
||||
.pswp__ui--one-slide .pswp__counter {
|
||||
display: none; }
|
||||
|
||||
.pswp__element--disabled {
|
||||
display: none !important; }
|
||||
|
||||
.pswp--minimal--dark .pswp__top-bar {
|
||||
background: none; }
|
||||
|
|
@ -0,0 +1 @@
|
|||
{"version":3,"sources":["default-skin.css"],"names":[],"mappings":"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"}
|
||||
File diff suppressed because one or more lines are too long
Binary file not shown.
|
After Width: | Height: | Size: 547 B |
|
|
@ -0,0 +1 @@
|
|||
<svg width="264" height="88" viewBox="0 0 264 88" xmlns="http://www.w3.org/2000/svg"><title>default-skin 2</title><g fill="none" fill-rule="evenodd"><g><path d="M67.002 59.5v3.768c-6.307.84-9.184 5.75-10.002 9.732 2.22-2.83 5.564-5.098 10.002-5.098V71.5L73 65.585 67.002 59.5z" id="Shape" fill="#fff"/><g fill="#fff"><path d="M13 29v-5h2v3h3v2h-5zM13 15h5v2h-3v3h-2v-5zM31 15v5h-2v-3h-3v-2h5zM31 29h-5v-2h3v-3h2v5z" id="Shape"/></g><g fill="#fff"><path d="M62 24v5h-2v-3h-3v-2h5zM62 20h-5v-2h3v-3h2v5zM70 20v-5h2v3h3v2h-5zM70 24h5v2h-3v3h-2v-5z"/></g><path d="M20.586 66l-5.656-5.656 1.414-1.414L22 64.586l5.656-5.656 1.414 1.414L23.414 66l5.656 5.656-1.414 1.414L22 67.414l-5.656 5.656-1.414-1.414L20.586 66z" fill="#fff"/><path d="M111.785 65.03L110 63.5l3-3.5h-10v-2h10l-3-3.5 1.785-1.468L117 59l-5.215 6.03z" fill="#fff"/><path d="M152.215 65.03L154 63.5l-3-3.5h10v-2h-10l3-3.5-1.785-1.468L147 59l5.215 6.03z" fill="#fff"/><g><path id="Rectangle-11" fill="#fff" d="M160.957 28.543l-3.25-3.25-1.413 1.414 3.25 3.25z"/><path d="M152.5 27c3.038 0 5.5-2.462 5.5-5.5s-2.462-5.5-5.5-5.5-5.5 2.462-5.5 5.5 2.462 5.5 5.5 5.5z" id="Oval-1" stroke="#fff" stroke-width="1.5"/><path fill="#fff" d="M150 21h5v1h-5z"/></g><g><path d="M116.957 28.543l-1.414 1.414-3.25-3.25 1.414-1.414 3.25 3.25z" fill="#fff"/><path d="M108.5 27c3.038 0 5.5-2.462 5.5-5.5s-2.462-5.5-5.5-5.5-5.5 2.462-5.5 5.5 2.462 5.5 5.5 5.5z" stroke="#fff" stroke-width="1.5"/><path fill="#fff" d="M106 21h5v1h-5z"/><path fill="#fff" d="M109.043 19.008l-.085 5-1-.017.085-5z"/></g></g></g></svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 866 B |
179
themes/hugo-easy-gallery/static/css/3p/photoswipe.css
Normal file
179
themes/hugo-easy-gallery/static/css/3p/photoswipe.css
Normal file
|
|
@ -0,0 +1,179 @@
|
|||
/*! PhotoSwipe main CSS by Dmitry Semenov | photoswipe.com | MIT license */
|
||||
/*
|
||||
Styles for basic PhotoSwipe functionality (sliding area, open/close transitions)
|
||||
*/
|
||||
/* pswp = photoswipe */
|
||||
.pswp {
|
||||
display: none;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
overflow: hidden;
|
||||
-ms-touch-action: none;
|
||||
touch-action: none;
|
||||
z-index: 1500;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
/* create separate layer, to avoid paint on window.onscroll in webkit/blink */
|
||||
-webkit-backface-visibility: hidden;
|
||||
outline: none; }
|
||||
.pswp * {
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box; }
|
||||
.pswp img {
|
||||
max-width: none; }
|
||||
|
||||
/* style is added when JS option showHideOpacity is set to true */
|
||||
.pswp--animate_opacity {
|
||||
/* 0.001, because opacity:0 doesn't trigger Paint action, which causes lag at start of transition */
|
||||
opacity: 0.001;
|
||||
will-change: opacity;
|
||||
/* for open/close transition */
|
||||
-webkit-transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
|
||||
transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); }
|
||||
|
||||
.pswp--open {
|
||||
display: block; }
|
||||
|
||||
.pswp--zoom-allowed .pswp__img {
|
||||
/* autoprefixer: off */
|
||||
cursor: -webkit-zoom-in;
|
||||
cursor: -moz-zoom-in;
|
||||
cursor: zoom-in; }
|
||||
|
||||
.pswp--zoomed-in .pswp__img {
|
||||
/* autoprefixer: off */
|
||||
cursor: -webkit-grab;
|
||||
cursor: -moz-grab;
|
||||
cursor: grab; }
|
||||
|
||||
.pswp--dragging .pswp__img {
|
||||
/* autoprefixer: off */
|
||||
cursor: -webkit-grabbing;
|
||||
cursor: -moz-grabbing;
|
||||
cursor: grabbing; }
|
||||
|
||||
/*
|
||||
Background is added as a separate element.
|
||||
As animating opacity is much faster than animating rgba() background-color.
|
||||
*/
|
||||
.pswp__bg {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #000;
|
||||
opacity: 0;
|
||||
-webkit-transform: translateZ(0);
|
||||
transform: translateZ(0);
|
||||
-webkit-backface-visibility: hidden;
|
||||
will-change: opacity; }
|
||||
|
||||
.pswp__scroll-wrap {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden; }
|
||||
|
||||
.pswp__container,
|
||||
.pswp__zoom-wrap {
|
||||
-ms-touch-action: none;
|
||||
touch-action: none;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0; }
|
||||
|
||||
/* Prevent selection and tap highlights */
|
||||
.pswp__container,
|
||||
.pswp__img {
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
-webkit-touch-callout: none; }
|
||||
|
||||
.pswp__zoom-wrap {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
-webkit-transform-origin: left top;
|
||||
-ms-transform-origin: left top;
|
||||
transform-origin: left top;
|
||||
/* for open/close transition */
|
||||
-webkit-transition: -webkit-transform 333ms cubic-bezier(0.4, 0, 0.22, 1);
|
||||
transition: transform 333ms cubic-bezier(0.4, 0, 0.22, 1); }
|
||||
|
||||
.pswp__bg {
|
||||
will-change: opacity;
|
||||
/* for open/close transition */
|
||||
-webkit-transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
|
||||
transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); }
|
||||
|
||||
.pswp--animated-in .pswp__bg,
|
||||
.pswp--animated-in .pswp__zoom-wrap {
|
||||
-webkit-transition: none;
|
||||
transition: none; }
|
||||
|
||||
.pswp__container,
|
||||
.pswp__zoom-wrap {
|
||||
-webkit-backface-visibility: hidden; }
|
||||
|
||||
.pswp__item {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
overflow: hidden; }
|
||||
|
||||
.pswp__img {
|
||||
position: absolute;
|
||||
width: auto;
|
||||
height: auto;
|
||||
top: 0;
|
||||
left: 0; }
|
||||
|
||||
/*
|
||||
stretched thumbnail or div placeholder element (see below)
|
||||
style is added to avoid flickering in webkit/blink when layers overlap
|
||||
*/
|
||||
.pswp__img--placeholder {
|
||||
-webkit-backface-visibility: hidden; }
|
||||
|
||||
/*
|
||||
div element that matches size of large image
|
||||
large image loads on top of it
|
||||
*/
|
||||
.pswp__img--placeholder--blank {
|
||||
background: #222; }
|
||||
|
||||
.pswp--ie .pswp__img {
|
||||
width: 100% !important;
|
||||
height: auto !important;
|
||||
left: 0;
|
||||
top: 0; }
|
||||
|
||||
/*
|
||||
Error message appears when image is not loaded
|
||||
(JS option errorMsg controls markup)
|
||||
*/
|
||||
.pswp__error-msg {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
margin-top: -8px;
|
||||
color: #CCC; }
|
||||
|
||||
.pswp__error-msg a {
|
||||
color: #CCC;
|
||||
text-decoration: underline; }
|
||||
|
|
@ -0,0 +1 @@
|
|||
{"version":3,"sources":["photoswipe.css"],"names":[],"mappings":"AAAA,2EAKA,MACE,QAAS,KACT,SAAU,SACV,MAAO,KACP,OAAQ,KACR,KAAM,EACN,IAAK,EACL,SAAU,OACV,iBAAkB,KAClB,aAAc,KACd,QAAS,KACT,yBAA0B,KAE1B,4BAA6B,OAC7B,QAAS,EACT,QACE,mBAAoB,WACZ,WAAY,WACtB,UACE,UAAW,KAGf,uBAEE,QAAS,KACT,YAAa,QAEb,mBAAoB,QAAQ,MAAM,yBAC1B,WAAY,QAAQ,MAAM,yBAEpC,YACE,QAAS,MAEX,+BAEE,OAAQ,gBACR,OAAQ,aACR,OAAQ,QAEV,4BAEE,OAAQ,aACR,OAAQ,UACR,OAAQ,KAEV,2BAEE,OAAQ,iBACR,OAAQ,cACR,OAAQ,SAMV,UACE,SAAU,SACV,KAAM,EACN,IAAK,EACL,MAAO,KACP,OAAQ,KACR,WAAY,KACZ,QAAS,EACT,kBAAmB,cACX,UAAW,cACnB,4BAA6B,OAC7B,YAAa,QAEf,mBACE,SAAU,SACV,KAAM,EACN,IAAK,EACL,MAAO,KACP,OAAQ,KACR,SAAU,OAEZ,iBACA,iBACE,iBAAkB,KAClB,aAAc,KACd,SAAU,SACV,KAAM,EACN,MAAO,EACP,IAAK,EACL,OAAQ,EAGV,iBACA,WACE,oBAAqB,KACrB,iBAAkB,KAClB,gBAAiB,KACb,YAAa,KACjB,4BAA6B,YAC7B,sBAAuB,KAEzB,iBACE,SAAU,SACV,MAAO,KACP,yBAA0B,KAAK,IAC/B,qBAAsB,KAAK,IAC3B,iBAAkB,KAAK,IAEvB,mBAAoB,kBAAkB,MAAM,yBACpC,WAAY,UAAU,MAAM,yBAEtC,UACE,YAAa,QAEb,mBAAoB,QAAQ,MAAM,yBAC1B,WAAY,QAAQ,MAAM,yBAEpC,6BACA,oCACE,mBAAoB,KACpB,WAAY,KAEd,iBACA,iBACE,4BAA6B,OAE/B,YACE,SAAU,SACV,KAAM,EACN,MAAO,EACP,IAAK,EACL,OAAQ,EACR,SAAU,OAEZ,WACE,SAAU,SACV,MAAO,KACP,OAAQ,KACR,IAAK,EACL,KAAM,EAMR,wBACE,4BAA6B,OAM/B,+BACE,WAAY,KAEd,qBACE,MAAO,eACP,OAAQ,eACR,KAAM,EACN,IAAK,EAMP,iBACE,SAAU,SACV,KAAM,EACN,IAAK,IACL,MAAO,KACP,WAAY,OACZ,UAAW,KACX,YAAa,KACb,WAAY,KACZ,MAAO,KAET,mBACE,MAAO,KACP,gBAAiB"}
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
/*! PhotoSwipe main CSS by Dmitry Semenov | photoswipe.com | MIT license */.pswp{display:none;position:absolute;width:100%;height:100%;left:0;top:0;overflow:hidden;-ms-touch-action:none;touch-action:none;z-index:1500;-webkit-text-size-adjust:100%;-webkit-backface-visibility:hidden;outline:0}.pswp *{-webkit-box-sizing:border-box;box-sizing:border-box}.pswp img{max-width:none}.pswp--animate_opacity{opacity:.001;will-change:opacity;-webkit-transition:opacity 333ms cubic-bezier(.4,0,.22,1);transition:opacity 333ms cubic-bezier(.4,0,.22,1)}.pswp--open{display:block}.pswp--zoom-allowed .pswp__img{cursor:-webkit-zoom-in;cursor:-moz-zoom-in;cursor:zoom-in}.pswp--zoomed-in .pswp__img{cursor:-webkit-grab;cursor:-moz-grab;cursor:grab}.pswp--dragging .pswp__img{cursor:-webkit-grabbing;cursor:-moz-grabbing;cursor:grabbing}.pswp__bg{position:absolute;left:0;top:0;width:100%;height:100%;background:#000;opacity:0;-webkit-transform:translateZ(0);transform:translateZ(0);-webkit-backface-visibility:hidden;will-change:opacity}.pswp__scroll-wrap{position:absolute;left:0;top:0;width:100%;height:100%;overflow:hidden}.pswp__container,.pswp__zoom-wrap{-ms-touch-action:none;touch-action:none;position:absolute;left:0;right:0;top:0;bottom:0}.pswp__container,.pswp__img{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}.pswp__zoom-wrap{position:absolute;width:100%;-webkit-transform-origin:left top;-ms-transform-origin:left top;transform-origin:left top;-webkit-transition:-webkit-transform 333ms cubic-bezier(.4,0,.22,1);transition:transform 333ms cubic-bezier(.4,0,.22,1)}.pswp__bg{will-change:opacity;-webkit-transition:opacity 333ms cubic-bezier(.4,0,.22,1);transition:opacity 333ms cubic-bezier(.4,0,.22,1)}.pswp--animated-in .pswp__bg,.pswp--animated-in .pswp__zoom-wrap{-webkit-transition:none;transition:none}.pswp__container,.pswp__zoom-wrap{-webkit-backface-visibility:hidden}.pswp__item{position:absolute;left:0;right:0;top:0;bottom:0;overflow:hidden}.pswp__img{position:absolute;width:auto;height:auto;top:0;left:0}.pswp__img--placeholder{-webkit-backface-visibility:hidden}.pswp__img--placeholder--blank{background:#222}.pswp--ie .pswp__img{width:100%!important;height:auto!important;left:0;top:0}.pswp__error-msg{position:absolute;left:0;top:50%;width:100%;text-align:center;font-size:14px;line-height:16px;margin-top:-8px;color:#ccc}.pswp__error-msg a{color:#ccc;text-decoration:underline}
|
||||
/*# sourceMappingURL=photoswipe.min.css.map */
|
||||
179
themes/hugo-easy-gallery/static/css/hugo-easy-gallery.css
Normal file
179
themes/hugo-easy-gallery/static/css/hugo-easy-gallery.css
Normal file
|
|
@ -0,0 +1,179 @@
|
|||
/*
|
||||
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;
|
||||
}
|
||||
.gallery .box {
|
||||
float: left;
|
||||
position: relative;
|
||||
/* Default: 1 tile wide */
|
||||
width: 100%;
|
||||
padding-bottom: 100%;
|
||||
}
|
||||
@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);
|
||||
}
|
||||
|
||||
/* Force square grid (from Bootstrap v3.7.7) */
|
||||
figure {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
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 */
|
||||
}
|
||||
|
||||
figure img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
figure figcaption a {
|
||||
position: relative;
|
||||
color: #CCC;
|
||||
/* text-decoration: none; */
|
||||
}
|
||||
|
||||
/* Format figure captions and Photoswipe text (from Bootstrap v3.7.7) */
|
||||
figcaption, .pswp__caption__center, .pswp__counter, .pswp__share-tooltip {
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
font-size: 13px;
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
10
themes/hugo-easy-gallery/theme.toml
Normal file
10
themes/hugo-easy-gallery/theme.toml
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
name = "Easy Gallery"
|
||||
license = "MIT"
|
||||
licenselink = "https://github.com/liwenyip/hugo-easy-gallery/blob/master/LICENCE.md"
|
||||
description = "Automagical CSS image gallery in Hugo using shortcodes, with optional lightbox/carousel gadget using PhotoSwipe."
|
||||
homepage = "https://github.com/liwenyip/hugo-easy-gallery"
|
||||
min_version = "0.79.0"
|
||||
|
||||
[author]
|
||||
name = "Li-Wen Yip "
|
||||
homepage = "https://www.liwen.id.au/"
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<a
|
||||
|
||||
{{ if or (strings.HasPrefix .Destination `http`) (strings.HasPrefix .Destination `#`) (strings.HasPrefix .Destination `/`) }}
|
||||
|
||||
href = "{{ .Destination | safeURL }}"
|
||||
|
||||
{{ else if strings.HasPrefix .Destination `mailto` }}
|
||||
|
||||
href = "mailto:{{ .Text }}"
|
||||
|
||||
{{ end }}
|
||||
|
||||
{{ with .Title}}
|
||||
|
||||
title = "{{ . }}"
|
||||
|
||||
{{ end }}
|
||||
|
||||
{{ if strings.HasPrefix .Destination "http" }}
|
||||
|
||||
target = "_blank"
|
||||
rel = "nofollow noopener noreferrer"
|
||||
|
||||
{{ else if strings.HasPrefix .Destination "mailto" }}
|
||||
|
||||
onClick = "javascript:window.open('mailto:{{ .Text }}', 'mail'); event.preventDefault()"
|
||||
|
||||
{{ end }}>
|
||||
|
||||
<span>
|
||||
{{ .Text }}
|
||||
</span>
|
||||
|
||||
</a>
|
||||
|
|
@ -52,5 +52,6 @@
|
|||
{{ end }}
|
||||
{{ partial "footer.html" . }}
|
||||
</div>
|
||||
{{ partial "load-photoswipe" }}
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ Bienvenue sur mon blog personnel,<a href="about/">infos.</a>
|
|||
</p>
|
||||
<br/>
|
||||
|
||||
<h1>Latest posts</h1>
|
||||
<h1>Sur le blog</h1>
|
||||
|
||||
<div class="posts-list">
|
||||
{{ with .Site.GetPage "/posts" }}
|
||||
|
|
@ -23,7 +23,23 @@ Bienvenue sur mon blog personnel,<a href="about/">infos.</a>
|
|||
{{ end }}
|
||||
</div>
|
||||
|
||||
<h1>Latest photos</h1>
|
||||
<h1>Au jardin</h1>
|
||||
|
||||
<div class="posts-list">
|
||||
{{ with .Site.GetPage "/jardin" }}
|
||||
{{ range first 3 (sort .Data.Pages "Date" "desc" (where .Pages ".Params.private" "!=" true))}}
|
||||
<div class="post">
|
||||
<p>
|
||||
<div class="date">{{ $mymonths := index $.Site.Data.moisshort }}{{ .Date.Day }} {{ index $mymonths (printf "%d" .Date.Month) }} {{ .Date.Year }}</div>
|
||||
<h1><a href="{{ .Permalink }}" title="{{ .Title }}">{{ .Title }}</a></h1>
|
||||
{{ .Summary }}
|
||||
</p>
|
||||
</div>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
</div>
|
||||
|
||||
<h1>Dernières photos</h1>
|
||||
|
||||
<div class="image-grid">
|
||||
{{ with .Site.GetPage "/photos" }}
|
||||
|
|
|
|||
174
themes/hugo-theme-console/layouts/partials/load-photoswipe.html
Normal file
174
themes/hugo-theme-console/layouts/partials/load-photoswipe.html
Normal file
|
|
@ -0,0 +1,174 @@
|
|||
<!--
|
||||
Put this file in /layouts/shortcodes/load-photoswipe.html
|
||||
Documentation and licence at https://github.com/liwenyip/hugo-easy-gallery/
|
||||
-->
|
||||
|
||||
<!-- prevent this shortcode from being loaded more than once per page -->
|
||||
{{ if not ($.Page.Scratch.Get "photoswipeloaded") }}
|
||||
{{ $.Page.Scratch.Set "photoswipeloaded" 1 }}
|
||||
|
||||
<!--<script src="/js/load-photoswipe.js"></script>-->
|
||||
|
||||
<script>
|
||||
/*
|
||||
Put this file in /static/js/load-photoswipe.js
|
||||
Documentation and licence at https://github.com/liwenyip/hugo-easy-gallery/
|
||||
*/
|
||||
/* Show an alert if this js file has been loaded twice */
|
||||
if (window.loadphotoswipejs) {
|
||||
window.alert("You've loaded load-photoswipe.js twice. See https://github.com/liwenyip/hugo-easy-gallery/issues/6")
|
||||
}
|
||||
var loadphotoswipejs = 1
|
||||
|
||||
/* TODO: Make the share function work */
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
var items = []; // array of slide objects that will be passed to PhotoSwipe()
|
||||
// for every figure element on the page:
|
||||
document.querySelectorAll('figure').forEach(function($figure, index) {
|
||||
if ($figure.className == 'no-photoswipe') return true; // ignore any figures where class="no-photoswipe"
|
||||
var $a = $figure.querySelector('a'),
|
||||
$img = $figure.querySelector('img'),
|
||||
$src = $a.href,
|
||||
$title = $img.alt,
|
||||
$msrc = $img.src;
|
||||
// if data-size on <a> tag is set, read it and create an item
|
||||
if ($a.dataset.size) {
|
||||
var $size = $a.dataset.size.split('x');
|
||||
var item = {
|
||||
src : $src,
|
||||
w : $size[0],
|
||||
h : $size[1],
|
||||
title : $title,
|
||||
msrc : $msrc
|
||||
};
|
||||
{{ if .Site.Params.debug }}
|
||||
console.log("Using pre-defined dimensions for " + $src);
|
||||
{{ end }}
|
||||
// if not, set temp default size then load the image to check actual size
|
||||
} else {
|
||||
var item = {
|
||||
src : $src,
|
||||
w : 400, // temp default size
|
||||
h : 300, // temp default size
|
||||
title : $title,
|
||||
msrc : $msrc
|
||||
};
|
||||
{{ if .Site.Params.debug }}
|
||||
console.log("Using default dimensions for " + $src);
|
||||
{{ end }}
|
||||
// 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;
|
||||
{{ if .Site.Params.debug }}
|
||||
console.log("Got actual dimensions for " + img.src);
|
||||
{{ end }}
|
||||
// Update the figure parent div's max width.
|
||||
var $parentDiv = $figure.parentElement;
|
||||
if (!$parentDiv.hasOwnProperty("style")) {
|
||||
$figure.parentElement.style = "max-width: " + w + "px"
|
||||
}
|
||||
}
|
||||
}, 30);
|
||||
}
|
||||
// Save the index of this image then add it to the array
|
||||
items.push(item);
|
||||
// Event handler for click on a figure
|
||||
$figure.addEventListener('click', function(event) {
|
||||
event.preventDefault(); // prevent the normal behaviour i.e. load the <a> hyperlink
|
||||
// Get the PSWP element and initialize it with the desired options
|
||||
var $pswp = document.querySelector('.pswp');
|
||||
var options = {
|
||||
index: index,
|
||||
bgOpacity: 0.8,
|
||||
showHideOpacity: true,
|
||||
showHideAnimationType: 'zoom',
|
||||
focus: 'false',
|
||||
history: 'false'
|
||||
}
|
||||
new PhotoSwipe($pswp, PhotoSwipeUI_Default, items, options).init();
|
||||
}, false);
|
||||
});
|
||||
}, false);
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<!-- Photoswipe css/js libraries -->
|
||||
{{ with .Site.Params.CDNJS }}
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.3/photoswipe.min.css" integrity="sha256-LWdHSKWG7zv3DTpee8YAgoTfkj3gNkfauF624h4P2Nw=" crossorigin="anonymous" />
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.3/default-skin/default-skin.min.css" integrity="sha256-Q9bBMw/rHRRag46GDWY84J3elDNc8JJjKXL9tIC4oe8=" crossorigin="anonymous" />
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.3/photoswipe.min.js" integrity="sha256-ePwmChbbvXbsO02lbM3HoHbSHTHFAeChekF1xKJdleo=" crossorigin="anonymous"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.3/photoswipe-ui-default.min.js" integrity="sha256-UKkzOn/w1mBxRmLLGrSeyB4e1xbrp4xylgAWb3M42pU=" crossorigin="anonymous"></script>
|
||||
{{- else -}}
|
||||
<link rel="stylesheet" href="{{ "/css/3p/photoswipe.min@4.1.3.css" | relURL }}"></script>
|
||||
<link rel="stylesheet" href="{{ "/css/3p/default-skin/default-skin.min@4.1.3.css" | relURL }}"></script>
|
||||
<script src="{{ "/js/3p/photoswipe.min@4.1.3.js" | relURL }}"></script>
|
||||
<script src="{{ "/js/3p/photoswipe-ui-default.min@4.1.3.js" | relURL }}"></script>
|
||||
{{ end }}
|
||||
|
||||
<style>
|
||||
.pswp__caption a
|
||||
, .pswp__caption small a
|
||||
, .pswp__caption__center a {
|
||||
color: #CCC;
|
||||
/* text-decoration: none; */
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- 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>
|
||||
{{ end }}
|
||||
|
|
@ -0,0 +1,482 @@
|
|||
/*! PhotoSwipe Default UI CSS by Dmitry Semenov | photoswipe.com | MIT license */
|
||||
/*
|
||||
|
||||
Contents:
|
||||
|
||||
1. Buttons
|
||||
2. Share modal and links
|
||||
3. Index indicator ("1 of X" counter)
|
||||
4. Caption
|
||||
5. Loading indicator
|
||||
6. Additional styles (root element, top bar, idle state, hidden state, etc.)
|
||||
|
||||
*/
|
||||
/*
|
||||
|
||||
1. Buttons
|
||||
|
||||
*/
|
||||
/* <button> css reset */
|
||||
.pswp__button {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
position: relative;
|
||||
background: none;
|
||||
cursor: pointer;
|
||||
overflow: visible;
|
||||
-webkit-appearance: none;
|
||||
display: block;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
float: right;
|
||||
opacity: 0.75;
|
||||
-webkit-transition: opacity 0.2s;
|
||||
transition: opacity 0.2s;
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none; }
|
||||
.pswp__button:focus, .pswp__button:hover {
|
||||
opacity: 1; }
|
||||
.pswp__button:active {
|
||||
outline: none;
|
||||
opacity: 0.9; }
|
||||
.pswp__button::-moz-focus-inner {
|
||||
padding: 0;
|
||||
border: 0; }
|
||||
|
||||
/* pswp__ui--over-close class it added when mouse is over element that should close gallery */
|
||||
.pswp__ui--over-close .pswp__button--close {
|
||||
opacity: 1; }
|
||||
|
||||
.pswp__button,
|
||||
.pswp__button--arrow--left:before,
|
||||
.pswp__button--arrow--right:before {
|
||||
background: url(default-skin.png) 0 0 no-repeat;
|
||||
background-size: 264px 88px;
|
||||
width: 44px;
|
||||
height: 44px; }
|
||||
|
||||
@media (-webkit-min-device-pixel-ratio: 1.1), (-webkit-min-device-pixel-ratio: 1.09375), (min-resolution: 105dpi), (min-resolution: 1.1dppx) {
|
||||
/* Serve SVG sprite if browser supports SVG and resolution is more than 105dpi */
|
||||
.pswp--svg .pswp__button,
|
||||
.pswp--svg .pswp__button--arrow--left:before,
|
||||
.pswp--svg .pswp__button--arrow--right:before {
|
||||
background-image: url(default-skin.svg); }
|
||||
.pswp--svg .pswp__button--arrow--left,
|
||||
.pswp--svg .pswp__button--arrow--right {
|
||||
background: none; } }
|
||||
|
||||
.pswp__button--close {
|
||||
background-position: 0 -44px; }
|
||||
|
||||
.pswp__button--share {
|
||||
background-position: -44px -44px; }
|
||||
|
||||
.pswp__button--fs {
|
||||
display: none; }
|
||||
|
||||
.pswp--supports-fs .pswp__button--fs {
|
||||
display: block; }
|
||||
|
||||
.pswp--fs .pswp__button--fs {
|
||||
background-position: -44px 0; }
|
||||
|
||||
.pswp__button--zoom {
|
||||
display: none;
|
||||
background-position: -88px 0; }
|
||||
|
||||
.pswp--zoom-allowed .pswp__button--zoom {
|
||||
display: block; }
|
||||
|
||||
.pswp--zoomed-in .pswp__button--zoom {
|
||||
background-position: -132px 0; }
|
||||
|
||||
/* no arrows on touch screens */
|
||||
.pswp--touch .pswp__button--arrow--left,
|
||||
.pswp--touch .pswp__button--arrow--right {
|
||||
visibility: hidden; }
|
||||
|
||||
/*
|
||||
Arrow buttons hit area
|
||||
(icon is added to :before pseudo-element)
|
||||
*/
|
||||
.pswp__button--arrow--left,
|
||||
.pswp__button--arrow--right {
|
||||
background: none;
|
||||
top: 50%;
|
||||
margin-top: -50px;
|
||||
width: 70px;
|
||||
height: 100px;
|
||||
position: absolute; }
|
||||
|
||||
.pswp__button--arrow--left {
|
||||
left: 0; }
|
||||
|
||||
.pswp__button--arrow--right {
|
||||
right: 0; }
|
||||
|
||||
.pswp__button--arrow--left:before,
|
||||
.pswp__button--arrow--right:before {
|
||||
content: '';
|
||||
top: 35px;
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
height: 30px;
|
||||
width: 32px;
|
||||
position: absolute; }
|
||||
|
||||
.pswp__button--arrow--left:before {
|
||||
left: 6px;
|
||||
background-position: -138px -44px; }
|
||||
|
||||
.pswp__button--arrow--right:before {
|
||||
right: 6px;
|
||||
background-position: -94px -44px; }
|
||||
|
||||
/*
|
||||
|
||||
2. Share modal/popup and links
|
||||
|
||||
*/
|
||||
.pswp__counter,
|
||||
.pswp__share-modal {
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none; }
|
||||
|
||||
.pswp__share-modal {
|
||||
display: block;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
padding: 10px;
|
||||
position: absolute;
|
||||
z-index: 1600;
|
||||
opacity: 0;
|
||||
-webkit-transition: opacity 0.25s ease-out;
|
||||
transition: opacity 0.25s ease-out;
|
||||
-webkit-backface-visibility: hidden;
|
||||
will-change: opacity; }
|
||||
|
||||
.pswp__share-modal--hidden {
|
||||
display: none; }
|
||||
|
||||
.pswp__share-tooltip {
|
||||
z-index: 1620;
|
||||
position: absolute;
|
||||
background: #FFF;
|
||||
top: 56px;
|
||||
border-radius: 2px;
|
||||
display: block;
|
||||
width: auto;
|
||||
right: 44px;
|
||||
-webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
|
||||
-webkit-transform: translateY(6px);
|
||||
-ms-transform: translateY(6px);
|
||||
transform: translateY(6px);
|
||||
-webkit-transition: -webkit-transform 0.25s;
|
||||
transition: transform 0.25s;
|
||||
-webkit-backface-visibility: hidden;
|
||||
will-change: transform; }
|
||||
.pswp__share-tooltip a {
|
||||
display: block;
|
||||
padding: 8px 12px;
|
||||
color: #000;
|
||||
text-decoration: none;
|
||||
font-size: 14px;
|
||||
line-height: 18px; }
|
||||
.pswp__share-tooltip a:hover {
|
||||
text-decoration: none;
|
||||
color: #000; }
|
||||
.pswp__share-tooltip a:first-child {
|
||||
/* round corners on the first/last list item */
|
||||
border-radius: 2px 2px 0 0; }
|
||||
.pswp__share-tooltip a:last-child {
|
||||
border-radius: 0 0 2px 2px; }
|
||||
|
||||
.pswp__share-modal--fade-in {
|
||||
opacity: 1; }
|
||||
.pswp__share-modal--fade-in .pswp__share-tooltip {
|
||||
-webkit-transform: translateY(0);
|
||||
-ms-transform: translateY(0);
|
||||
transform: translateY(0); }
|
||||
|
||||
/* increase size of share links on touch devices */
|
||||
.pswp--touch .pswp__share-tooltip a {
|
||||
padding: 16px 12px; }
|
||||
|
||||
a.pswp__share--facebook:before {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
position: absolute;
|
||||
top: -12px;
|
||||
right: 15px;
|
||||
border: 6px solid transparent;
|
||||
border-bottom-color: #FFF;
|
||||
-webkit-pointer-events: none;
|
||||
-moz-pointer-events: none;
|
||||
pointer-events: none; }
|
||||
|
||||
a.pswp__share--facebook:hover {
|
||||
background: #3E5C9A;
|
||||
color: #FFF; }
|
||||
a.pswp__share--facebook:hover:before {
|
||||
border-bottom-color: #3E5C9A; }
|
||||
|
||||
a.pswp__share--twitter:hover {
|
||||
background: #55ACEE;
|
||||
color: #FFF; }
|
||||
|
||||
a.pswp__share--pinterest:hover {
|
||||
background: #CCC;
|
||||
color: #CE272D; }
|
||||
|
||||
a.pswp__share--download:hover {
|
||||
background: #DDD; }
|
||||
|
||||
/*
|
||||
|
||||
3. Index indicator ("1 of X" counter)
|
||||
|
||||
*/
|
||||
.pswp__counter {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 44px;
|
||||
font-size: 13px;
|
||||
line-height: 44px;
|
||||
color: #FFF;
|
||||
opacity: 0.75;
|
||||
padding: 0 10px; }
|
||||
|
||||
/*
|
||||
|
||||
4. Caption
|
||||
|
||||
*/
|
||||
.pswp__caption {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
min-height: 44px; }
|
||||
.pswp__caption small {
|
||||
font-size: 11px;
|
||||
color: #BBB; }
|
||||
|
||||
.pswp__caption__center {
|
||||
text-align: left;
|
||||
max-width: 420px;
|
||||
margin: 0 auto;
|
||||
font-size: 13px;
|
||||
padding: 10px;
|
||||
line-height: 20px;
|
||||
color: #CCC; }
|
||||
|
||||
.pswp__caption--empty {
|
||||
display: none; }
|
||||
|
||||
/* Fake caption element, used to calculate height of next/prev image */
|
||||
.pswp__caption--fake {
|
||||
visibility: hidden; }
|
||||
|
||||
/*
|
||||
|
||||
5. Loading indicator (preloader)
|
||||
|
||||
You can play with it here - http://codepen.io/dimsemenov/pen/yyBWoR
|
||||
|
||||
*/
|
||||
.pswp__preloader {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
margin-left: -22px;
|
||||
opacity: 0;
|
||||
-webkit-transition: opacity 0.25s ease-out;
|
||||
transition: opacity 0.25s ease-out;
|
||||
will-change: opacity;
|
||||
direction: ltr; }
|
||||
|
||||
.pswp__preloader__icn {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin: 12px; }
|
||||
|
||||
.pswp__preloader--active {
|
||||
opacity: 1; }
|
||||
.pswp__preloader--active .pswp__preloader__icn {
|
||||
/* We use .gif in browsers that don't support CSS animation */
|
||||
background: url(preloader.gif) 0 0 no-repeat; }
|
||||
|
||||
.pswp--css_animation .pswp__preloader--active {
|
||||
opacity: 1; }
|
||||
.pswp--css_animation .pswp__preloader--active .pswp__preloader__icn {
|
||||
-webkit-animation: clockwise 500ms linear infinite;
|
||||
animation: clockwise 500ms linear infinite; }
|
||||
.pswp--css_animation .pswp__preloader--active .pswp__preloader__donut {
|
||||
-webkit-animation: donut-rotate 1000ms cubic-bezier(0.4, 0, 0.22, 1) infinite;
|
||||
animation: donut-rotate 1000ms cubic-bezier(0.4, 0, 0.22, 1) infinite; }
|
||||
|
||||
.pswp--css_animation .pswp__preloader__icn {
|
||||
background: none;
|
||||
opacity: 0.75;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
position: absolute;
|
||||
left: 15px;
|
||||
top: 15px;
|
||||
margin: 0; }
|
||||
|
||||
.pswp--css_animation .pswp__preloader__cut {
|
||||
/*
|
||||
The idea of animating inner circle is based on Polymer ("material") loading indicator
|
||||
by Keanu Lee https://blog.keanulee.com/2014/10/20/the-tale-of-three-spinners.html
|
||||
*/
|
||||
position: relative;
|
||||
width: 7px;
|
||||
height: 14px;
|
||||
overflow: hidden; }
|
||||
|
||||
.pswp--css_animation .pswp__preloader__donut {
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border: 2px solid #FFF;
|
||||
border-radius: 50%;
|
||||
border-left-color: transparent;
|
||||
border-bottom-color: transparent;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: none;
|
||||
margin: 0; }
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
.pswp__preloader {
|
||||
position: relative;
|
||||
left: auto;
|
||||
top: auto;
|
||||
margin: 0;
|
||||
float: right; } }
|
||||
|
||||
@-webkit-keyframes clockwise {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg); }
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
transform: rotate(360deg); } }
|
||||
|
||||
@keyframes clockwise {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg); }
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
transform: rotate(360deg); } }
|
||||
|
||||
@-webkit-keyframes donut-rotate {
|
||||
0% {
|
||||
-webkit-transform: rotate(0);
|
||||
transform: rotate(0); }
|
||||
50% {
|
||||
-webkit-transform: rotate(-140deg);
|
||||
transform: rotate(-140deg); }
|
||||
100% {
|
||||
-webkit-transform: rotate(0);
|
||||
transform: rotate(0); } }
|
||||
|
||||
@keyframes donut-rotate {
|
||||
0% {
|
||||
-webkit-transform: rotate(0);
|
||||
transform: rotate(0); }
|
||||
50% {
|
||||
-webkit-transform: rotate(-140deg);
|
||||
transform: rotate(-140deg); }
|
||||
100% {
|
||||
-webkit-transform: rotate(0);
|
||||
transform: rotate(0); } }
|
||||
|
||||
/*
|
||||
|
||||
6. Additional styles
|
||||
|
||||
*/
|
||||
/* root element of UI */
|
||||
.pswp__ui {
|
||||
-webkit-font-smoothing: auto;
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
z-index: 1550; }
|
||||
|
||||
/* top black bar with buttons and "1 of X" indicator */
|
||||
.pswp__top-bar {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 44px;
|
||||
width: 100%; }
|
||||
|
||||
.pswp__caption,
|
||||
.pswp__top-bar,
|
||||
.pswp--has_mouse .pswp__button--arrow--left,
|
||||
.pswp--has_mouse .pswp__button--arrow--right {
|
||||
-webkit-backface-visibility: hidden;
|
||||
will-change: opacity;
|
||||
-webkit-transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
|
||||
transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); }
|
||||
|
||||
/* pswp--has_mouse class is added only when two subsequent mousemove events occur */
|
||||
.pswp--has_mouse .pswp__button--arrow--left,
|
||||
.pswp--has_mouse .pswp__button--arrow--right {
|
||||
visibility: visible; }
|
||||
|
||||
.pswp__top-bar,
|
||||
.pswp__caption {
|
||||
background-color: rgba(0, 0, 0, 0.5); }
|
||||
|
||||
/* pswp__ui--fit class is added when main image "fits" between top bar and bottom bar (caption) */
|
||||
.pswp__ui--fit .pswp__top-bar,
|
||||
.pswp__ui--fit .pswp__caption {
|
||||
background-color: rgba(0, 0, 0, 0.3); }
|
||||
|
||||
/* pswp__ui--idle class is added when mouse isn't moving for several seconds (JS option timeToIdle) */
|
||||
.pswp__ui--idle .pswp__top-bar {
|
||||
opacity: 0; }
|
||||
|
||||
.pswp__ui--idle .pswp__button--arrow--left,
|
||||
.pswp__ui--idle .pswp__button--arrow--right {
|
||||
opacity: 0; }
|
||||
|
||||
/*
|
||||
pswp__ui--hidden class is added when controls are hidden
|
||||
e.g. when user taps to toggle visibility of controls
|
||||
*/
|
||||
.pswp__ui--hidden .pswp__top-bar,
|
||||
.pswp__ui--hidden .pswp__caption,
|
||||
.pswp__ui--hidden .pswp__button--arrow--left,
|
||||
.pswp__ui--hidden .pswp__button--arrow--right {
|
||||
/* Force paint & create composition layer for controls. */
|
||||
opacity: 0.001; }
|
||||
|
||||
/* pswp__ui--one-slide class is added when there is just one item in gallery */
|
||||
.pswp__ui--one-slide .pswp__button--arrow--left,
|
||||
.pswp__ui--one-slide .pswp__button--arrow--right,
|
||||
.pswp__ui--one-slide .pswp__counter {
|
||||
display: none; }
|
||||
|
||||
.pswp__element--disabled {
|
||||
display: none !important; }
|
||||
|
||||
.pswp--minimal--dark .pswp__top-bar {
|
||||
background: none; }
|
||||
|
|
@ -0,0 +1 @@
|
|||
{"version":3,"sources":["default-skin.css"],"names":[],"mappings":"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"}
|
||||
File diff suppressed because one or more lines are too long
Binary file not shown.
|
After Width: | Height: | Size: 547 B |
|
|
@ -0,0 +1 @@
|
|||
<svg width="264" height="88" viewBox="0 0 264 88" xmlns="http://www.w3.org/2000/svg"><title>default-skin 2</title><g fill="none" fill-rule="evenodd"><g><path d="M67.002 59.5v3.768c-6.307.84-9.184 5.75-10.002 9.732 2.22-2.83 5.564-5.098 10.002-5.098V71.5L73 65.585 67.002 59.5z" id="Shape" fill="#fff"/><g fill="#fff"><path d="M13 29v-5h2v3h3v2h-5zM13 15h5v2h-3v3h-2v-5zM31 15v5h-2v-3h-3v-2h5zM31 29h-5v-2h3v-3h2v5z" id="Shape"/></g><g fill="#fff"><path d="M62 24v5h-2v-3h-3v-2h5zM62 20h-5v-2h3v-3h2v5zM70 20v-5h2v3h3v2h-5zM70 24h5v2h-3v3h-2v-5z"/></g><path d="M20.586 66l-5.656-5.656 1.414-1.414L22 64.586l5.656-5.656 1.414 1.414L23.414 66l5.656 5.656-1.414 1.414L22 67.414l-5.656 5.656-1.414-1.414L20.586 66z" fill="#fff"/><path d="M111.785 65.03L110 63.5l3-3.5h-10v-2h10l-3-3.5 1.785-1.468L117 59l-5.215 6.03z" fill="#fff"/><path d="M152.215 65.03L154 63.5l-3-3.5h10v-2h-10l3-3.5-1.785-1.468L147 59l5.215 6.03z" fill="#fff"/><g><path id="Rectangle-11" fill="#fff" d="M160.957 28.543l-3.25-3.25-1.413 1.414 3.25 3.25z"/><path d="M152.5 27c3.038 0 5.5-2.462 5.5-5.5s-2.462-5.5-5.5-5.5-5.5 2.462-5.5 5.5 2.462 5.5 5.5 5.5z" id="Oval-1" stroke="#fff" stroke-width="1.5"/><path fill="#fff" d="M150 21h5v1h-5z"/></g><g><path d="M116.957 28.543l-1.414 1.414-3.25-3.25 1.414-1.414 3.25 3.25z" fill="#fff"/><path d="M108.5 27c3.038 0 5.5-2.462 5.5-5.5s-2.462-5.5-5.5-5.5-5.5 2.462-5.5 5.5 2.462 5.5 5.5 5.5z" stroke="#fff" stroke-width="1.5"/><path fill="#fff" d="M106 21h5v1h-5z"/><path fill="#fff" d="M109.043 19.008l-.085 5-1-.017.085-5z"/></g></g></g></svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 866 B |
179
themes/hugo-theme-console/static/css/3p/photoswipe.css
Normal file
179
themes/hugo-theme-console/static/css/3p/photoswipe.css
Normal file
|
|
@ -0,0 +1,179 @@
|
|||
/*! PhotoSwipe main CSS by Dmitry Semenov | photoswipe.com | MIT license */
|
||||
/*
|
||||
Styles for basic PhotoSwipe functionality (sliding area, open/close transitions)
|
||||
*/
|
||||
/* pswp = photoswipe */
|
||||
.pswp {
|
||||
display: none;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
overflow: hidden;
|
||||
-ms-touch-action: none;
|
||||
touch-action: none;
|
||||
z-index: 1500;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
/* create separate layer, to avoid paint on window.onscroll in webkit/blink */
|
||||
-webkit-backface-visibility: hidden;
|
||||
outline: none; }
|
||||
.pswp * {
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box; }
|
||||
.pswp img {
|
||||
max-width: none; }
|
||||
|
||||
/* style is added when JS option showHideOpacity is set to true */
|
||||
.pswp--animate_opacity {
|
||||
/* 0.001, because opacity:0 doesn't trigger Paint action, which causes lag at start of transition */
|
||||
opacity: 0.001;
|
||||
will-change: opacity;
|
||||
/* for open/close transition */
|
||||
-webkit-transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
|
||||
transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); }
|
||||
|
||||
.pswp--open {
|
||||
display: block; }
|
||||
|
||||
.pswp--zoom-allowed .pswp__img {
|
||||
/* autoprefixer: off */
|
||||
cursor: -webkit-zoom-in;
|
||||
cursor: -moz-zoom-in;
|
||||
cursor: zoom-in; }
|
||||
|
||||
.pswp--zoomed-in .pswp__img {
|
||||
/* autoprefixer: off */
|
||||
cursor: -webkit-grab;
|
||||
cursor: -moz-grab;
|
||||
cursor: grab; }
|
||||
|
||||
.pswp--dragging .pswp__img {
|
||||
/* autoprefixer: off */
|
||||
cursor: -webkit-grabbing;
|
||||
cursor: -moz-grabbing;
|
||||
cursor: grabbing; }
|
||||
|
||||
/*
|
||||
Background is added as a separate element.
|
||||
As animating opacity is much faster than animating rgba() background-color.
|
||||
*/
|
||||
.pswp__bg {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #000;
|
||||
opacity: 0;
|
||||
-webkit-transform: translateZ(0);
|
||||
transform: translateZ(0);
|
||||
-webkit-backface-visibility: hidden;
|
||||
will-change: opacity; }
|
||||
|
||||
.pswp__scroll-wrap {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden; }
|
||||
|
||||
.pswp__container,
|
||||
.pswp__zoom-wrap {
|
||||
-ms-touch-action: none;
|
||||
touch-action: none;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0; }
|
||||
|
||||
/* Prevent selection and tap highlights */
|
||||
.pswp__container,
|
||||
.pswp__img {
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
-webkit-touch-callout: none; }
|
||||
|
||||
.pswp__zoom-wrap {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
-webkit-transform-origin: left top;
|
||||
-ms-transform-origin: left top;
|
||||
transform-origin: left top;
|
||||
/* for open/close transition */
|
||||
-webkit-transition: -webkit-transform 333ms cubic-bezier(0.4, 0, 0.22, 1);
|
||||
transition: transform 333ms cubic-bezier(0.4, 0, 0.22, 1); }
|
||||
|
||||
.pswp__bg {
|
||||
will-change: opacity;
|
||||
/* for open/close transition */
|
||||
-webkit-transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
|
||||
transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); }
|
||||
|
||||
.pswp--animated-in .pswp__bg,
|
||||
.pswp--animated-in .pswp__zoom-wrap {
|
||||
-webkit-transition: none;
|
||||
transition: none; }
|
||||
|
||||
.pswp__container,
|
||||
.pswp__zoom-wrap {
|
||||
-webkit-backface-visibility: hidden; }
|
||||
|
||||
.pswp__item {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
overflow: hidden; }
|
||||
|
||||
.pswp__img {
|
||||
position: absolute;
|
||||
width: auto;
|
||||
height: auto;
|
||||
top: 0;
|
||||
left: 0; }
|
||||
|
||||
/*
|
||||
stretched thumbnail or div placeholder element (see below)
|
||||
style is added to avoid flickering in webkit/blink when layers overlap
|
||||
*/
|
||||
.pswp__img--placeholder {
|
||||
-webkit-backface-visibility: hidden; }
|
||||
|
||||
/*
|
||||
div element that matches size of large image
|
||||
large image loads on top of it
|
||||
*/
|
||||
.pswp__img--placeholder--blank {
|
||||
background: #222; }
|
||||
|
||||
.pswp--ie .pswp__img {
|
||||
width: 100% !important;
|
||||
height: auto !important;
|
||||
left: 0;
|
||||
top: 0; }
|
||||
|
||||
/*
|
||||
Error message appears when image is not loaded
|
||||
(JS option errorMsg controls markup)
|
||||
*/
|
||||
.pswp__error-msg {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
margin-top: -8px;
|
||||
color: #CCC; }
|
||||
|
||||
.pswp__error-msg a {
|
||||
color: #CCC;
|
||||
text-decoration: underline; }
|
||||
|
|
@ -0,0 +1 @@
|
|||
{"version":3,"sources":["photoswipe.css"],"names":[],"mappings":"AAAA,2EAKA,MACE,QAAS,KACT,SAAU,SACV,MAAO,KACP,OAAQ,KACR,KAAM,EACN,IAAK,EACL,SAAU,OACV,iBAAkB,KAClB,aAAc,KACd,QAAS,KACT,yBAA0B,KAE1B,4BAA6B,OAC7B,QAAS,EACT,QACE,mBAAoB,WACZ,WAAY,WACtB,UACE,UAAW,KAGf,uBAEE,QAAS,KACT,YAAa,QAEb,mBAAoB,QAAQ,MAAM,yBAC1B,WAAY,QAAQ,MAAM,yBAEpC,YACE,QAAS,MAEX,+BAEE,OAAQ,gBACR,OAAQ,aACR,OAAQ,QAEV,4BAEE,OAAQ,aACR,OAAQ,UACR,OAAQ,KAEV,2BAEE,OAAQ,iBACR,OAAQ,cACR,OAAQ,SAMV,UACE,SAAU,SACV,KAAM,EACN,IAAK,EACL,MAAO,KACP,OAAQ,KACR,WAAY,KACZ,QAAS,EACT,kBAAmB,cACX,UAAW,cACnB,4BAA6B,OAC7B,YAAa,QAEf,mBACE,SAAU,SACV,KAAM,EACN,IAAK,EACL,MAAO,KACP,OAAQ,KACR,SAAU,OAEZ,iBACA,iBACE,iBAAkB,KAClB,aAAc,KACd,SAAU,SACV,KAAM,EACN,MAAO,EACP,IAAK,EACL,OAAQ,EAGV,iBACA,WACE,oBAAqB,KACrB,iBAAkB,KAClB,gBAAiB,KACb,YAAa,KACjB,4BAA6B,YAC7B,sBAAuB,KAEzB,iBACE,SAAU,SACV,MAAO,KACP,yBAA0B,KAAK,IAC/B,qBAAsB,KAAK,IAC3B,iBAAkB,KAAK,IAEvB,mBAAoB,kBAAkB,MAAM,yBACpC,WAAY,UAAU,MAAM,yBAEtC,UACE,YAAa,QAEb,mBAAoB,QAAQ,MAAM,yBAC1B,WAAY,QAAQ,MAAM,yBAEpC,6BACA,oCACE,mBAAoB,KACpB,WAAY,KAEd,iBACA,iBACE,4BAA6B,OAE/B,YACE,SAAU,SACV,KAAM,EACN,MAAO,EACP,IAAK,EACL,OAAQ,EACR,SAAU,OAEZ,WACE,SAAU,SACV,MAAO,KACP,OAAQ,KACR,IAAK,EACL,KAAM,EAMR,wBACE,4BAA6B,OAM/B,+BACE,WAAY,KAEd,qBACE,MAAO,eACP,OAAQ,eACR,KAAM,EACN,IAAK,EAMP,iBACE,SAAU,SACV,KAAM,EACN,IAAK,IACL,MAAO,KACP,WAAY,OACZ,UAAW,KACX,YAAa,KACb,WAAY,KACZ,MAAO,KAET,mBACE,MAAO,KACP,gBAAiB"}
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
/*! PhotoSwipe main CSS by Dmitry Semenov | photoswipe.com | MIT license */.pswp{display:none;position:absolute;width:100%;height:100%;left:0;top:0;overflow:hidden;-ms-touch-action:none;touch-action:none;z-index:1500;-webkit-text-size-adjust:100%;-webkit-backface-visibility:hidden;outline:0}.pswp *{-webkit-box-sizing:border-box;box-sizing:border-box}.pswp img{max-width:none}.pswp--animate_opacity{opacity:.001;will-change:opacity;-webkit-transition:opacity 333ms cubic-bezier(.4,0,.22,1);transition:opacity 333ms cubic-bezier(.4,0,.22,1)}.pswp--open{display:block}.pswp--zoom-allowed .pswp__img{cursor:-webkit-zoom-in;cursor:-moz-zoom-in;cursor:zoom-in}.pswp--zoomed-in .pswp__img{cursor:-webkit-grab;cursor:-moz-grab;cursor:grab}.pswp--dragging .pswp__img{cursor:-webkit-grabbing;cursor:-moz-grabbing;cursor:grabbing}.pswp__bg{position:absolute;left:0;top:0;width:100%;height:100%;background:#000;opacity:0;-webkit-transform:translateZ(0);transform:translateZ(0);-webkit-backface-visibility:hidden;will-change:opacity}.pswp__scroll-wrap{position:absolute;left:0;top:0;width:100%;height:100%;overflow:hidden}.pswp__container,.pswp__zoom-wrap{-ms-touch-action:none;touch-action:none;position:absolute;left:0;right:0;top:0;bottom:0}.pswp__container,.pswp__img{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}.pswp__zoom-wrap{position:absolute;width:100%;-webkit-transform-origin:left top;-ms-transform-origin:left top;transform-origin:left top;-webkit-transition:-webkit-transform 333ms cubic-bezier(.4,0,.22,1);transition:transform 333ms cubic-bezier(.4,0,.22,1)}.pswp__bg{will-change:opacity;-webkit-transition:opacity 333ms cubic-bezier(.4,0,.22,1);transition:opacity 333ms cubic-bezier(.4,0,.22,1)}.pswp--animated-in .pswp__bg,.pswp--animated-in .pswp__zoom-wrap{-webkit-transition:none;transition:none}.pswp__container,.pswp__zoom-wrap{-webkit-backface-visibility:hidden}.pswp__item{position:absolute;left:0;right:0;top:0;bottom:0;overflow:hidden}.pswp__img{position:absolute;width:auto;height:auto;top:0;left:0}.pswp__img--placeholder{-webkit-backface-visibility:hidden}.pswp__img--placeholder--blank{background:#222}.pswp--ie .pswp__img{width:100%!important;height:auto!important;left:0;top:0}.pswp__error-msg{position:absolute;left:0;top:50%;width:100%;text-align:center;font-size:14px;line-height:16px;margin-top:-8px;color:#ccc}.pswp__error-msg a{color:#ccc;text-decoration:underline}
|
||||
/*# sourceMappingURL=photoswipe.min.css.map */
|
||||
179
themes/hugo-theme-console/static/css/hugo-easy-gallery.css
Normal file
179
themes/hugo-theme-console/static/css/hugo-easy-gallery.css
Normal file
|
|
@ -0,0 +1,179 @@
|
|||
/*
|
||||
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;
|
||||
}
|
||||
.gallery .box {
|
||||
float: left;
|
||||
position: relative;
|
||||
/* Default: 1 tile wide */
|
||||
width: 100%;
|
||||
padding-bottom: 100%;
|
||||
}
|
||||
@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);
|
||||
}
|
||||
|
||||
/* Force square grid (from Bootstrap v3.7.7) */
|
||||
figure {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
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 */
|
||||
}
|
||||
|
||||
figure img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
figure figcaption a {
|
||||
position: relative;
|
||||
color: #CCC;
|
||||
/* text-decoration: none; */
|
||||
}
|
||||
|
||||
/* Format figure captions and Photoswipe text (from Bootstrap v3.7.7) */
|
||||
figcaption, .pswp__caption__center, .pswp__counter, .pswp__share-tooltip {
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
|
@ -46,13 +46,13 @@
|
|||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background-color: #222225;
|
||||
--background-color: #2e3440;
|
||||
--page-width: 60em;
|
||||
--font-color: #e8e9ed;
|
||||
--invert-font-color: #222225;
|
||||
--secondary-color: #a3abba;
|
||||
--tertiary-color: #a3abba;
|
||||
--primary-color: #62c4ff;
|
||||
--font-color: #88c0d0;
|
||||
--invert-font-color: #2e3440;
|
||||
--secondary-color: #bf616a;
|
||||
--tertiary-color: #ebcb8b;
|
||||
--primary-color: #a3be8c;
|
||||
--error-color: #ff3c74;
|
||||
--progress-bar-background: #3f3f44;
|
||||
--progress-bar-fill: #62c4ff;
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Loading…
Add table
Add a link
Reference in a new issue