make hugo-snap-gallery a submodule
This commit is contained in:
3
.gitmodules
vendored
3
.gitmodules
vendored
@@ -1,3 +1,6 @@
|
|||||||
[submodule "themes/hugo-cloak-email"]
|
[submodule "themes/hugo-cloak-email"]
|
||||||
path = themes/hugo-cloak-email
|
path = themes/hugo-cloak-email
|
||||||
url = https://github.com/martignoni/hugo-cloak-email.git
|
url = https://github.com/martignoni/hugo-cloak-email.git
|
||||||
|
[submodule "themes/hugo-snap-gallery"]
|
||||||
|
path = themes/hugo-snap-gallery
|
||||||
|
url = https://src.mehl.mx/mxmehl/hugo-snap-gallery
|
||||||
|
|||||||
1
themes/hugo-snap-gallery
Submodule
1
themes/hugo-snap-gallery
Submodule
Submodule themes/hugo-snap-gallery added at 51e757b527
@@ -1,181 +0,0 @@
|
|||||||
# hugo-easy-gallery
|
|
||||||
|
|
||||||
**2019-01-20: I'm looking for people to help maintain this project - e.g. review and approve pull requests, which I no longer have time to do. Please contact me if you are interested. Thanks!**
|
|
||||||
|
|
||||||
Automagical css image gallery in [Hugo](https://gohugo.io/) using shortcodes, with optional lightbox/carousel gadget using [PhotoSwipe](http://photoswipe.com/) and jQuery.
|
|
||||||
|
|
||||||
**New:** Create a gallery of all images in a directory with just one line of shortcode, see [demo](https://www.liwen.id.au/heg/#gallery-usage).
|
|
||||||
|
|
||||||
**Need help?**
|
|
||||||
- Post your question at https://github.com/liwenyip/hugo-easy-gallery/issues.
|
|
||||||
- Include a link to a test page that demonstrates the issue you are having
|
|
||||||
- Include your source code for the test page
|
|
||||||
- Please be patient (I have a busy day job as that has nothing to do with web development or computer science, so every time I look at issues/PRs it takes me a while to get back up to speed); I will respond eventually. Please DO NOT email me asking for help, you are very unlikely to get a response from me this way.
|
|
||||||
|
|
||||||
**Fixed an issue or made an improvement?**
|
|
||||||
- Please submit a pull request
|
|
||||||
- Include a link to a test page
|
|
||||||
- Include your source code for the test page
|
|
||||||
- Let me know if you are in Sydney and I will thank you with beer :-)
|
|
||||||
|
|
||||||
## Demo
|
|
||||||
|
|
||||||
- Feature demonstration at https://www.liwen.id.au/heg/
|
|
||||||
- Real-life example at https://www.liwen.id.au/arduino-rf-codes/
|
|
||||||
|
|
||||||
## Image Gallery Features
|
|
||||||
|
|
||||||
- Custom `{{< figure >}}` shortcode that enables new features but is backwards-compatible with Hugo's built-in `{{< figure >}}`shortcode
|
|
||||||
- Use the `{{< figure >}}` shortcode by itself to enable pretty captions
|
|
||||||
- Put multiple `{{< figure >}}` shortcodes inside a `{{< gallery >}}` to create a pretty image gallery
|
|
||||||
- **Point `{{< gallery >}}` at a directory to generate a gallery of all images in that directory**
|
|
||||||
- Gallery is responsive, images are scaled/cropped to fill square (or other evenly-sized) tiles
|
|
||||||
- Pretty captions appear/slide/fade upon hovering over the image
|
|
||||||
- Optionally make gallery images zoom, grow, shrink, slide up, or slide down upon hover
|
|
||||||
- Only requires 3.6kB of CSS (unminified; you can minify it if you want)
|
|
||||||
- CSS is automatically loaded the first time you use the `{{< figure >}}` shortcode on each page
|
|
||||||
|
|
||||||
## PhotoSwipe Features
|
|
||||||
|
|
||||||
- Load PhotoSwipe by calling the `{{< load-photoswipe >}}` shortcode anywhere in your post
|
|
||||||
- Loads all of the `<figure>` elements in your post, regardless of where in your post they appear, into a lightbox/carousel style image gallery
|
|
||||||
- Works with any existing `<figure>` elements/shortcodes in your posts
|
|
||||||
- Does not require you to [pre-define the image sizes](http://photoswipe.com/documentation/faq.html#image-size) (the initialisation script pre-loads the image to determine its size; you can optionally pre-define the image size if you want to avoid this pre-loading)
|
|
||||||
- Loads PhotoSwipe js and css libraries from `cdnjs.cloudflare.com`
|
|
||||||
|
|
||||||
## Installation
|
|
||||||
Put files in following places:
|
|
||||||
|
|
||||||
- /layouts/shortcodes/figure.html
|
|
||||||
- /layouts/shortcodes/gallery.html
|
|
||||||
- /layouts/shortcodes/load-photoswipe.html
|
|
||||||
- /static/js/load-photoswipe.js
|
|
||||||
- /static/css/hugo-easy-gallery.css
|
|
||||||
|
|
||||||
**NB `load-photoswipe.html` loads jQuery from `cdnjs.cloudflare.com`.**
|
|
||||||
|
|
||||||
- If your template already loads jQuery in the header, you can delete the jQuery link in `load-photoswipe.html`.
|
|
||||||
- If your template already loads jQuery in the footer, you should `load-photoswipe.js` from the footer instead of in `load-photoswipe.html`.
|
|
||||||
|
|
||||||
If you want, you could (depending on a front matter param) conditionally load `load-photoswipe.html` or its contents from the footer of your template. But I've consciously chosen to load PhotoSwipe using a shortcode so that you don't have to modify your template if you don't want to.
|
|
||||||
|
|
||||||
## Theme integration
|
|
||||||
|
|
||||||
Put files in the relevant folders within your theme.
|
|
||||||
|
|
||||||
Delete `/layouts/shortcodes/load-photoswipe.html`.
|
|
||||||
|
|
||||||
Rename `/layouts/shortcodes/load-photoswipe-theme.html` to `/layouts/shortcodes/load-photoswipe.html`.
|
|
||||||
|
|
||||||
Add the following lines to the footer of your template, just before `</body>`:
|
|
||||||
|
|
||||||
(Omit the jQuery line if jQuery is already loaded elsewhere in your template; just make sure that jQuery is loaded **before** this code.)
|
|
||||||
|
|
||||||
```html
|
|
||||||
<!-- Load PhotoSwipe js if the load-photoswipe shortcode has been used -->
|
|
||||||
{{ if ($.Scratch.Get "photoswipeloaded") }}
|
|
||||||
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
|
|
||||||
<script src="/js/load-photoswipe.js"></script>
|
|
||||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.1/photoswipe.min.js" integrity="sha256-UplRCs9v4KXVJvVY+p+RSo5Q4ilAUXh7kpjyIP5odyc=" crossorigin="anonymous"></script>
|
|
||||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.1/photoswipe-ui-default.min.js" integrity="sha256-PWHOlUzc96pMc8ThwRIXPn8yH4NOLu42RQ0b9SpnpFk=" crossorigin="anonymous"></script>
|
|
||||||
{{ end }}
|
|
||||||
```
|
|
||||||
|
|
||||||
## `{{< figure >}}` shortcode usage
|
|
||||||
|
|
||||||
Specifying your image files:
|
|
||||||
|
|
||||||
- `{{< figure src="thumb.jpg" link="image.jpg" >}}` will use `thumb.jpg` for thumbnail and `image.jpg` for lightbox
|
|
||||||
- `{{< figure src="image.jpg" >}}` or `{{< figure link="image.jpg" >}}` will use `image.jpg` for both thumbnail and lightbox
|
|
||||||
- `{{< figure link="image.jpg" thumb="-small" >}}` will use `image-small.jpg` for thumbnail and `image.jpg` for lightbox
|
|
||||||
|
|
||||||
Optional parameters:
|
|
||||||
|
|
||||||
- All the [features/parameters](https://gohugo.io/extras/shortcodes) of Hugo's built-in `figure` shortcode work as normal, i.e. src, link, title, caption, class, attr (attribution), attrlink, alt
|
|
||||||
- `size` (e.g. `size="1024x768"`) pre-defines the image size for PhotoSwipe. Use this option if you don't want to pre-load the linked image to determine its size.
|
|
||||||
- `class` allows you to set any custom classes you want on the `<figure>` tag.
|
|
||||||
|
|
||||||
Optional parameters for standalone `{{< figure >}}` shortcodes only (i.e. don't use on `{{< figure >}}` inside `{{< gallery >}}` - strange things may happen if you do):
|
|
||||||
|
|
||||||
- `caption-position` and `caption-effect` work the same as for the `{{< gallery >}}` shortcode (see below).
|
|
||||||
- `width` defines the [`max-width`](https://www.w3schools.com/cssref/pr_dim_max-width.asp) of the image displayed on the page. If using a thumbnail for a standalone figure, set this equal to your thumbnail's native width to make the captions behave properly (or feel free to come up with a better solution and submit a pull request :-)). Also use this option if you don't have a thumbnail and you don't want the hi-res image to take up the entire width of the screen/container.
|
|
||||||
- `class="no-photoswipe"` prevents a `<figure>` from being loaded into PhotoSwipe. If you click on the figure you'll instead a good ol' fashioned hyperlink to a bigger image (or - if you haven't specified a bigger image - the same one).
|
|
||||||
|
|
||||||
## `{{< gallery >}}` shortcode usage
|
|
||||||
|
|
||||||
To specify a directory of image files:
|
|
||||||
|
|
||||||
```
|
|
||||||
{{< gallery dir="/img/your-directory-of-images/" />}}`
|
|
||||||
```
|
|
||||||
|
|
||||||
- The images are automatically captioned with the file name.
|
|
||||||
- `[image].jpg` is used for the hi-res image, and `[image]-thumb.jpg` is used for the thumbnails.
|
|
||||||
- If `[image]-thumb.jpg` doesn't exist, then `[image].jpg` will be used for both hi-res and thumbnail images.
|
|
||||||
- The default thumbnail suffix is `-thumb`, but you can specify a different one e.g. `thumb="-small"` or `thumb="_150x150"`.
|
|
||||||
|
|
||||||
To specify individual image files:
|
|
||||||
|
|
||||||
```
|
|
||||||
{{< gallery >}}
|
|
||||||
{{< figure src="image1.jpg" >}}
|
|
||||||
{{< figure src="image2.jpg" >}}
|
|
||||||
{{< figure src="image3.jpg" >}}
|
|
||||||
{{< /gallery >}}
|
|
||||||
```
|
|
||||||
|
|
||||||
Optional parameters:
|
|
||||||
|
|
||||||
- `caption-position` - determines the captions' position over the image. Options:
|
|
||||||
- `bottom` (default)
|
|
||||||
- `center`
|
|
||||||
- `none` hides captions on the page (they will only show in PhotoSwipe)
|
|
||||||
- `caption-effect` - determines if/how captions appear upon hover. Options:
|
|
||||||
- `slide` (default)
|
|
||||||
- `fade`
|
|
||||||
- `none` (captions always visible)
|
|
||||||
- `hover-effect` - determines if/how images change upon hover. Options:
|
|
||||||
- `zoom` (default)
|
|
||||||
- `grow`
|
|
||||||
- `shrink`
|
|
||||||
- `slideup`
|
|
||||||
- `slidedown`
|
|
||||||
- `none`
|
|
||||||
- `hover-transition` - determines if/how images change upon hover. Options:
|
|
||||||
- not set - smooth transition (default)
|
|
||||||
- `none` - hard transition
|
|
||||||
|
|
||||||
## PhotoSwipe usage
|
|
||||||
|
|
||||||
- Call `{{< load-photoswipe >}}` **once** on each page where you want to use PhotoSwipe.
|
|
||||||
- It doesn't matter where on the page.
|
|
||||||
- If you don't load PhotoSwipe, each figure will instead have a good ol' fashioned hyperlink to a bigger image (or - if you haven't specified a bigger image - the same one).
|
|
||||||
|
|
||||||
You can optionally have different captions on page vs in PhotoSwipe:
|
|
||||||
|
|
||||||
- `{{< figure src="image.jpg" alt="This is a caption">}}` or `{{< figure src="image.jpg" caption="This is a caption">}}` will use the same caption both on the page and in PhotoSwipe.
|
|
||||||
- `{{< figure src="image.jpg" caption="A short caption" alt="This is a much longer, verbose, comprehensive caption that will be used in PhotoSwipe">}}` will use a different caption in PhotoSwipe.
|
|
||||||
|
|
||||||
## CSS Hackers
|
|
||||||
|
|
||||||
`hugo-easy-gallery.css` is designed to provide square tiles in a container with `max-width: 768px`.
|
|
||||||
|
|
||||||
Here are some pointers if you want to adapt the CSS:
|
|
||||||
|
|
||||||
- Change `.gallery {max-width: 768px;}` if you want a gallery wider than 768px.
|
|
||||||
- Change `min-width` in the `@media` styles to change the screen widths at which the layout changes
|
|
||||||
- Change `min-width: 9999px` in the last `@media` style to something sensible if you want to use a 4-tile layout
|
|
||||||
- If you want more than 4 tiles per row, set `width` = 100% / number of tiles per row
|
|
||||||
- `padding-bottom` = `width` gives square tiles. Change padding-bottom if you want some other aspect ratio, e.g. `width: 33.3%; padding-bottom: 25%` gives a 4:3 aspect ratio.
|
|
||||||
|
|
||||||
## Issues
|
|
||||||
|
|
||||||
I've tested this with the [beautifulhugo](https://github.com/halogenica/beautifulhugo) theme. If things don't work properly with other themes, raise an issue on GitHub, or even better fix the issue and submit a pull request :-)
|
|
||||||
|
|
||||||
## Credits
|
|
||||||
|
|
||||||
These blog posts helped me immensely:
|
|
||||||
|
|
||||||
- http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/
|
|
||||||
- http://www.thehome.dk/article/photoswipe-gallery-hugo/
|
|
||||||
- https://webdesign.tutsplus.com/tutorials/the-perfect-lightbox-using-photoswipe-with-jquery--cms-23587
|
|
||||||
@@ -1,32 +0,0 @@
|
|||||||
<!--
|
|
||||||
SPDX-FileCopyrightText: 2019 Li-Wen Yip <liwen.yip@gmail.com>
|
|
||||||
SPDX-License-Identifier: MIT
|
|
||||||
|
|
||||||
Put this file in /layouts/shortcodes/figure.html
|
|
||||||
NB this overrides Hugo's built-in "figure" shortcode but is backwards compatible
|
|
||||||
Documentation and licence at https://github.com/liwenyip/hugo-easy-gallery/
|
|
||||||
-->
|
|
||||||
<!-- count how many times we've called this shortcode; load the css if it's the first time -->
|
|
||||||
{{- if not ($.Page.Scratch.Get "figurecount") }}<link rel="stylesheet" href="/css/snap-gallery.css" />{{ end }}
|
|
||||||
{{- $.Page.Scratch.Add "figurecount" 1 -}}
|
|
||||||
<!-- use either src or link-thumb for thumbnail image -->
|
|
||||||
{{- $thumb := .Get "src" | default (printf "%s." (.Get "thumb") | replace (.Get "link") ".") }}
|
|
||||||
<div class="box{{ with .Get "caption-position" }} fancy-figure caption-position-{{.}}{{end}}{{ with .Get "caption-effect" }} caption-effect-{{.}}{{end}}" {{ with .Get "width" }}style="max-width:{{.}}"{{end}}>
|
|
||||||
<figure {{ with .Get "class" }}class="{{.}}"{{ end }} itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
|
|
||||||
<div class="img"{{ if .Parent }} style="background-image: url('{{ $thumb | relURL }}');"{{ end }}{{ with .Get "size" }} data-size="{{.}}"{{ end }}>
|
|
||||||
<img itemprop="thumbnail" src="{{ $thumb | relURL }}" {{ with .Get "alt" | default (.Get "caption") }}alt="{{.}}"{{ end }}/><!-- <img> hidden if in .gallery -->
|
|
||||||
</div>
|
|
||||||
{{ with .Get "link" | default (.Get "src") }}<a href="{{.}}" itemprop="contentUrl"></a>{{ end }}
|
|
||||||
{{- if or (or (.Get "title") (.Get "caption")) (.Get "attr")}}
|
|
||||||
<figcaption>
|
|
||||||
{{- with .Get "title" }}<h4>{{.}}</h4>{{ end }}
|
|
||||||
{{- if or (.Get "caption") (.Get "attr")}}
|
|
||||||
<p>
|
|
||||||
{{- .Get "caption" -}}
|
|
||||||
{{- with .Get "attrlink"}}<a href="{{.}}">{{ .Get "attr" }}</a>{{ else }}{{ .Get "attr"}}{{ end -}}
|
|
||||||
</p>
|
|
||||||
{{- end }}
|
|
||||||
</figcaption>
|
|
||||||
{{- end }}
|
|
||||||
</figure>
|
|
||||||
</div>
|
|
||||||
@@ -1,44 +0,0 @@
|
|||||||
<!--
|
|
||||||
SPDX-FileCopyrightText: 2019 Li-Wen Yip <liwen.yip@gmail.com>
|
|
||||||
SPDX-License-Identifier: MIT
|
|
||||||
|
|
||||||
Put this file in /layouts/shortcodes/gallery.html
|
|
||||||
Documentation and licence at https://github.com/liwenyip/hugo-easy-gallery/
|
|
||||||
-->
|
|
||||||
<!-- count how many times we've called this shortcode; load the css if it's the first time -->
|
|
||||||
<link rel="stylesheet" href="/css/snap-gallery.css" />
|
|
||||||
{{- $.Page.Scratch.Add "figurecount" 1 }}
|
|
||||||
{{ $baseURL := .Site.BaseURL }}
|
|
||||||
<div class="gallery caption-position-{{ with .Get "caption-position" | default "bottom" }}{{.}}{{end}} caption-effect-{{ with .Get "caption-effect" | default "slide" }}{{.}}{{end}} hover-effect-{{ with .Get "hover-effect" | default "zoom" }}{{.}}{{end}} {{ if ne (.Get "hover-transition") "none" }}hover-transition{{end}}" itemscope itemtype="http://schema.org/ImageGallery">
|
|
||||||
{{- with (.Get "dir") -}}
|
|
||||||
<!-- If a directory was specified, generate figures for all of the images in the directory -->
|
|
||||||
{{- $files := readDir (print "/static/" .) }}
|
|
||||||
{{- range $files -}}
|
|
||||||
<!-- skip files that aren't images, or that inlcude the thumb suffix in their name -->
|
|
||||||
{{- $thumbext := $.Get "thumb" | default "-thumb" }}
|
|
||||||
{{- $isthumb := .Name | findRE ($thumbext | printf "%s\\.") }}<!-- is the current file a thumbnail image? -->
|
|
||||||
{{- $isimg := lower .Name | findRE "\\.(gif|jpg|jpeg|tiff|png|bmp)" }}<!-- is the current file an image? -->
|
|
||||||
{{- if and $isimg (not $isthumb) }}
|
|
||||||
{{- $caption := .Name | replaceRE "\\..*" "" | humanize }}<!-- humanized filename without extension -->
|
|
||||||
{{- $linkURL := print $baseURL ($.Get "dir") "" .Name | absURL }}<!-- absolute URL to hi-res image -->
|
|
||||||
{{- $thumb := .Name | replaceRE "(\\.)" ($thumbext | printf "%s.") }}<!-- filename of thumbnail image -->
|
|
||||||
{{- $thumbexists := where $files "Name" $thumb }}<!-- does a thumbnail image exist? -->
|
|
||||||
{{- $thumbURL := print $baseURL ($.Get "dir") "/" $thumb | absURL }}<!-- absolute URL to thumbnail image -->
|
|
||||||
<div class="box">
|
|
||||||
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
|
|
||||||
<div class="img" style="background-image: url('{{ if $thumbexists }}{{ $thumbURL }}{{ else }}{{ $linkURL }}{{ end }}');" >
|
|
||||||
<img itemprop="thumbnail" src="{{ if $thumbexists }}{{ $thumbURL }}{{ else }}{{ $linkURL }}{{ end }}" alt="{{ $caption }}" /><!-- <img> hidden if in .gallery -->
|
|
||||||
</div>
|
|
||||||
<figcaption>
|
|
||||||
<p>{{ $caption }}</p>
|
|
||||||
</figcaption>
|
|
||||||
<a href="{{ $linkURL }}" itemprop="contentUrl" class="hiddenlink" target="_blank"></a><!-- put <a> last so it is stacked on top -->
|
|
||||||
</figure>
|
|
||||||
</div>
|
|
||||||
{{- end }}
|
|
||||||
{{- end }}
|
|
||||||
{{- else -}}
|
|
||||||
<!-- If no directory was specified, include any figure shortcodes called within the gallery -->
|
|
||||||
{{ .Inner }}
|
|
||||||
{{- end }}
|
|
||||||
</div>
|
|
||||||
@@ -1,164 +0,0 @@
|
|||||||
/*
|
|
||||||
SPDX-FileCopyrightText: 2019 Li-Wen Yip <liwen.yip@gmail.com>
|
|
||||||
SPDX-License-Identifier: MIT
|
|
||||||
|
|
||||||
Put this file in /static/css/hugo-easy-gallery.css
|
|
||||||
Documentation and licence at https://github.com/liwenyip/hugo-easy-gallery/
|
|
||||||
*/
|
|
||||||
|
|
||||||
|
|
||||||
/*
|
|
||||||
Grid Layout Styles
|
|
||||||
*/
|
|
||||||
.gallery {
|
|
||||||
overflow: hidden;
|
|
||||||
margin: 10px;
|
|
||||||
max-width: 768px;
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
|
||||||
.gallery .box {
|
|
||||||
float: left;
|
|
||||||
position: relative;
|
|
||||||
/* Default: 1 tile wide */
|
|
||||||
width: 100%;
|
|
||||||
padding-bottom: 100%;
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
@media only screen and (min-width : 365px) {
|
|
||||||
/* Tablet view: 2 tiles */
|
|
||||||
.gallery .box {
|
|
||||||
width: 50%;
|
|
||||||
padding-bottom: 50%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media only screen and (min-width : 480px) {
|
|
||||||
/* Small desktop / ipad view: 3 tiles */
|
|
||||||
.gallery .box {
|
|
||||||
width: 33.3%;
|
|
||||||
padding-bottom: 33.3%; /* */
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media only screen and (min-width : 9999px) {
|
|
||||||
/* Medium desktop: 4 tiles */
|
|
||||||
.box {
|
|
||||||
width: 25%;
|
|
||||||
padding-bottom: 25%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
Transition styles
|
|
||||||
*/
|
|
||||||
.gallery.hover-transition figure,
|
|
||||||
.gallery.hover-effect-zoom .img,
|
|
||||||
.gallery:not(.caption-effect-appear) figcaption,
|
|
||||||
.fancy-figure:not(.caption-effect-appear) figcaption {
|
|
||||||
-webkit-transition: all 0.3s ease-in-out;
|
|
||||||
-moz-transition: all 0.3s ease-in-out;
|
|
||||||
-o-transition: all 0.3s ease-in-out;
|
|
||||||
transition: all 0.3s ease-in-out;
|
|
||||||
}
|
|
||||||
/*
|
|
||||||
figure styles
|
|
||||||
*/
|
|
||||||
figure {
|
|
||||||
position:relative; /* purely to allow absolution positioning of figcaption */
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
.gallery figure {
|
|
||||||
position: absolute;
|
|
||||||
left: 5px;
|
|
||||||
right: 5px;
|
|
||||||
top: 5px;
|
|
||||||
bottom: 5px;
|
|
||||||
}
|
|
||||||
.gallery.hover-effect-grow figure:hover {
|
|
||||||
transform: scale(1.05);
|
|
||||||
}
|
|
||||||
.gallery.hover-effect-shrink figure:hover {
|
|
||||||
transform: scale(0.95);
|
|
||||||
}
|
|
||||||
.gallery.hover-effect-slidedown figure:hover {
|
|
||||||
transform: translateY(5px);
|
|
||||||
}
|
|
||||||
.gallery.hover-effect-slideup figure:hover {
|
|
||||||
transform: translateY(-5px);
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
img / a styles
|
|
||||||
*/
|
|
||||||
|
|
||||||
.gallery .img {
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
top: 0;
|
|
||||||
bottom: 0;
|
|
||||||
background-size: cover;
|
|
||||||
background-position: 50% 50%;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
}
|
|
||||||
.gallery.hover-effect-zoom figure:hover .img {
|
|
||||||
transform: scale(1.05);
|
|
||||||
}
|
|
||||||
.gallery img {
|
|
||||||
display: none; /* only show the img if not inside a gallery */
|
|
||||||
}
|
|
||||||
figure a {
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
top: 0;
|
|
||||||
bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
figcaption styles
|
|
||||||
*/
|
|
||||||
.gallery figcaption,
|
|
||||||
.fancy-figure figcaption {
|
|
||||||
position: absolute;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
background: #000;
|
|
||||||
color: #FFF;
|
|
||||||
text-align: center;
|
|
||||||
font-size: 75%; /* change this if you want bigger text */
|
|
||||||
background: rgba(0, 0, 0, 0.5);
|
|
||||||
opacity: 1;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
.gallery.caption-position-none figcaption,
|
|
||||||
.fancy-figure.caption-position-none figcaption {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.gallery.caption-position-center figcaption,
|
|
||||||
.fancy-figure.caption-position-center figcaption {
|
|
||||||
top: 0;
|
|
||||||
padding: 40% 5px;
|
|
||||||
}
|
|
||||||
.gallery.caption-position-bottom figcaption,
|
|
||||||
.fancy-figure.caption-position-bottom figcaption {
|
|
||||||
padding: 5px;
|
|
||||||
}
|
|
||||||
.gallery.caption-effect-fade figure:not(:hover) figcaption,
|
|
||||||
.gallery.caption-effect-appear figure:not(:hover) figcaption,
|
|
||||||
.fancy-figure.caption-effect-fade figure:not(:hover) figcaption,
|
|
||||||
.fancy-figure.caption-effect-appear figure:not(:hover) figcaption {
|
|
||||||
background: rgba(0, 0, 0, 0);
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
.gallery.caption-effect-slide.caption-position-bottom figure:not(:hover) figcaption,
|
|
||||||
.fancy-figure.caption-effect-slide.caption-position-bottom figure:not(:hover) figcaption {
|
|
||||||
margin-bottom: -100%;
|
|
||||||
}
|
|
||||||
.gallery.caption-effect-slide.caption-position-center figure:not(:hover) figcaption,
|
|
||||||
.fancy-figure.caption-effect-slide.caption-position-center figure:not(:hover) figcaption {
|
|
||||||
top: 100%;
|
|
||||||
}
|
|
||||||
figcaption p {
|
|
||||||
margin: auto; /* override style in theme */
|
|
||||||
}
|
|
||||||
@@ -1,14 +0,0 @@
|
|||||||
name: Snap Gallery
|
|
||||||
license: MIT
|
|
||||||
licenselink:
|
|
||||||
description: Automagical css image gallery in Hugo using shortcodes. Fork of https://github.com/liwenyip/hugo-easy-gallery
|
|
||||||
homepage:
|
|
||||||
tags:
|
|
||||||
- component
|
|
||||||
features:
|
|
||||||
- comments
|
|
||||||
min_version: 0.40.0
|
|
||||||
|
|
||||||
author:
|
|
||||||
name: Li-Wen Yip, Max Mehl
|
|
||||||
homepage:
|
|
||||||
Reference in New Issue
Block a user