Merge remote-tracking branch 'refs/remotes/halogenica/master' into conditionally-load-photoswipe
This commit is contained in:
Li-Wen Yip
commit
d8ad6de03c
96
data/beautifulhugo/social.toml
Normal file
96
data/beautifulhugo/social.toml
Normal file
@ -0,0 +1,96 @@
|
||||
[[social_icons]]
|
||||
id = "email"
|
||||
url = "mailto:%s"
|
||||
title = "Email me"
|
||||
icon = "fa-envelope"
|
||||
|
||||
[[social_icons]]
|
||||
id = "facebook"
|
||||
url = "https://www.facebook.com/%s"
|
||||
title = "Facebook"
|
||||
icon = "fa-facebook"
|
||||
|
||||
[[social_icons]]
|
||||
id = "googleplus"
|
||||
url = "https://www.plus.google.com/%s"
|
||||
title = "Google+"
|
||||
icon = "fa-google-plus"
|
||||
|
||||
[[social_icons]]
|
||||
id = "github"
|
||||
url = "https://github.com/%s"
|
||||
title = "GitHub"
|
||||
icon = "fa-github"
|
||||
|
||||
[[social_icons]]
|
||||
id = "twitter"
|
||||
url = "https://twitter.com/%s"
|
||||
title = "Twitter"
|
||||
icon = "fa-twitter"
|
||||
|
||||
[[social_icons]]
|
||||
id = "reddit"
|
||||
url = "https://reddit.com/u/%s"
|
||||
title = "Reddit"
|
||||
icon = "fa-reddit-alien"
|
||||
|
||||
[[social_icons]]
|
||||
id = "linkedin"
|
||||
url = "https://linkedin.com/in/%s"
|
||||
title = "LinkedIn"
|
||||
icon = "fa-linkedin"
|
||||
|
||||
[[social_icons]]
|
||||
id = "xing"
|
||||
url = "https://www.xing.com/profile/%s"
|
||||
title = "Xing"
|
||||
icon = "fa-xing"
|
||||
|
||||
[[social_icons]]
|
||||
id = "stackoverflow"
|
||||
url = "https://stackoverflow.com/%s"
|
||||
title = "StackOverflow"
|
||||
icon = "fa-stack-overflow"
|
||||
|
||||
[[social_icons]]
|
||||
id = "snapchat"
|
||||
url = "https://www.snapchat.com/add/%s"
|
||||
title = "Snapchat"
|
||||
icon = "fa-snapchat-ghost"
|
||||
|
||||
[[social_icons]]
|
||||
id = "instagram"
|
||||
url = "https://www.instagram.com/%s"
|
||||
title = "Instagram"
|
||||
icon = "fa-instagram"
|
||||
|
||||
[[social_icons]]
|
||||
id = "youtube"
|
||||
url = "https://www.youtube.com/%s"
|
||||
title = "Youtube"
|
||||
icon = "fa-youtube"
|
||||
|
||||
[[social_icons]]
|
||||
id = "soundcloud"
|
||||
url = "https://soundcloud.com/%s"
|
||||
title = "SoundCloud"
|
||||
icon = "fa-soundcloud"
|
||||
|
||||
[[social_icons]]
|
||||
id = "spotify"
|
||||
url = "https://open.spotify.com/user/%s"
|
||||
title = "Spotify"
|
||||
icon = "fa-spotify"
|
||||
|
||||
[[social_icons]]
|
||||
id = "bandcamp"
|
||||
url = "https://%s.bandcamp.com/"
|
||||
title = "Bandcamp"
|
||||
icon = "fa-bandcamp"
|
||||
|
||||
[[social_icons]]
|
||||
id = "itchio"
|
||||
url = "https://itch.io/profile/%s"
|
||||
title = "Itch.io"
|
||||
icon = "fa-gamepad"
|
||||
|
||||
@ -5,35 +5,35 @@ date: 2017-03-20
|
||||
tags: ["example", "photoswipe"]
|
||||
---
|
||||
|
||||
Beautiful Hugo adds a few custom shortcodes created by [Li-Wen Yip](https://www.liwen.id.au/photoswipe/) and [Gert-Jan van den Berg](https://github.com/GjjvdBurg/HugoPhotoSwipe) for making galleries with [PhotoSwipe](http://photoswipe.com) .
|
||||
Beautiful Hugo adds a few custom shortcodes created by [Li-Wen Yip](https://www.liwen.id.au/heg/) and [Gert-Jan van den Berg](https://github.com/GjjvdBurg/HugoPhotoSwipe) for making galleries with [PhotoSwipe](http://photoswipe.com) .
|
||||
|
||||
{{< gallery >}}
|
||||
{{< gallery caption-effect="fade" >}}
|
||||
{{< figure thumb="-thumb" link="/img/hexagon.jpg" >}}
|
||||
{{< figure thumb="-thumb" link="/img/sphere.jpg" alt="Sphere" >}}
|
||||
{{< figure thumb="-thumb" link="/img/triangle.jpg" alt="Triangle" caption="This is a long comment about a triangle" >}}
|
||||
{{< figure thumb="-thumb" link="/img/sphere.jpg" caption="Sphere" >}}
|
||||
{{< figure thumb="-thumb" link="/img/triangle.jpg" caption="This is a long comment about a triangle" >}}
|
||||
{{< /gallery >}}
|
||||
{{< pswp-init >}}
|
||||
{{< load-photoswipe >}}
|
||||
|
||||
<!--more-->
|
||||
## Example
|
||||
The above gallery was created using the following shortcodes:
|
||||
```
|
||||
{{</* gallery */>}}
|
||||
{{</* gallery caption-effect="fade" */>}}
|
||||
{{</* figure thumb="-thumb" link="/img/hexagon.jpg" */>}}
|
||||
{{</* figure thumb="-thumb" link="/img/sphere.jpg" alt="Sphere" */>}}
|
||||
{{</* figure thumb="-thumb" link="/img/triangle.jpg" alt="Triangle" caption="This is a long comment about a triangle" */>}}
|
||||
{{</* figure thumb="-thumb" link="/img/sphere.jpg" caption="Sphere" */>}}
|
||||
{{</* figure thumb="-thumb" link="/img/triangle.jpg" caption="This is a long comment about a triangle" */>}}
|
||||
{{</* /gallery */>}}
|
||||
{{</* pswp-init */>}}
|
||||
{{</* load-photoswipe */>}}
|
||||
```
|
||||
|
||||
## Usage
|
||||
As described on the [GitHub](https://github.com/liwenyip/hugo-pswp) page:
|
||||
For full details please see the [hugo-easy-gallery GitHub](https://github.com/liwenyip/hugo-easy-gallery/) page. Basic usages from above are:
|
||||
|
||||
* Call `{{</* pswp-init */>}}` **once** anywhere you want on each page where you want to use PhotoSwipe
|
||||
* `{{</* figure src="image.jpg" */>}}` will use `image.jpg` for thumbnail and lightbox
|
||||
* `{{</* figure src="thumb.jpg" link="image.jpg" */>}}` will use `thumb.jpg` for thumbnail and `image.jpg` for lightbox
|
||||
* `{{</* figure thumb="-small" link="image.jpg" */>}}` will use `image-small.jpg` for thumbnail and `image.jpg` for lightbox
|
||||
* `{{</* figure thumb="-small" link="image.jpg" size="1024x768 "*/>}}` will avoid needing to pre-load `image.jpg` to determine its size (optional)
|
||||
* 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
|
||||
* `{{</* figure src="image.jpg" class="pswp-ignore" */>}}` will be ignored by PhotoSwipe (if that's what you really want)
|
||||
* enclose your figures in `{{</* gallery title="title of your gallery (optional)" */>}}` and `{{</* /gallery */>}}` to arrange your thumbnails inside a box
|
||||
- Create a gallery with open and close tags `{{</* gallery */>}}` and `{{</* /gallery */>}}`
|
||||
- `{{</* figure src="image.jpg" */>}}` will use `image.jpg` for thumbnail and lightbox
|
||||
- `{{</* figure src="thumb.jpg" link="image.jpg" */>}}` will use `thumb.jpg` for thumbnail and `image.jpg` for lightbox
|
||||
- `{{</* figure thumb="-small" link="image.jpg" */>}}` will use `image-small.jpg` for thumbnail and `image.jpg` for lightbox
|
||||
- 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
|
||||
- `{{</* gallery caption-effect="fade" */>}}` will fade in captions for all figures in this gallery instead of the default slide-up behavior
|
||||
- Many gallery styles for captions and hover effects exist; view the [hugo-easy-gallery GitHub](https://github.com/liwenyip/hugo-easy-gallery/) for all options
|
||||
- Call `{{</* load-photoswipe */>}}` **once** anywhere you want on each page where you want to use PhotoSwipe
|
||||
@ -3,165 +3,17 @@
|
||||
<div class="row">
|
||||
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
|
||||
<ul class="list-inline text-center footer-links">
|
||||
{{ if .Site.Author.email }}
|
||||
{{ range .Site.Data.beautifulhugo.social.social_icons }}
|
||||
{{- if isset $.Site.Author .id }}
|
||||
<li>
|
||||
<a href="mailto:{{ .Site.Author.email }}" title="Email me">
|
||||
<a href="{{ printf .url (index $.Site.Author .id) }}" title="{{ .title }}">
|
||||
<span class="fa-stack fa-lg">
|
||||
<i class="fa fa-circle fa-stack-2x"></i>
|
||||
<i class="fa fa-envelope fa-stack-1x fa-inverse"></i>
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
{{ end }}
|
||||
{{ if .Site.Author.facebook }}
|
||||
<li>
|
||||
<a href="https://www.facebook.com/{{ .Site.Author.facebook }}" title="Facebook">
|
||||
<span class="fa-stack fa-lg">
|
||||
<i class="fa fa-circle fa-stack-2x"></i>
|
||||
<i class="fa fa-facebook fa-stack-1x fa-inverse"></i>
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
{{ end }}
|
||||
{{ if .Site.Author.googleplus }}
|
||||
<li>
|
||||
<a href="https://www.plus.google.com/{{ .Site.Author.googleplus }}" title="Google+">
|
||||
<span class="fa-stack fa-lg">
|
||||
<i class="fa fa-circle fa-stack-2x"></i>
|
||||
<i class="fa fa-google-plus fa-stack-1x fa-inverse"></i>
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
{{ end }}
|
||||
{{ if .Site.Author.github }}
|
||||
<li>
|
||||
<a href="https://github.com/{{ .Site.Author.github }}" title="GitHub">
|
||||
<span class="fa-stack fa-lg">
|
||||
<i class="fa fa-circle fa-stack-2x"></i>
|
||||
<i class="fa fa-github fa-stack-1x fa-inverse"></i>
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
{{ end }}
|
||||
{{ if .Site.Author.twitter }}
|
||||
<li>
|
||||
<a href="https://twitter.com/{{ .Site.Author.twitter }}" title="Twitter">
|
||||
<span class="fa-stack fa-lg">
|
||||
<i class="fa fa-circle fa-stack-2x"></i>
|
||||
<i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
{{ end }}
|
||||
{{ if .Site.Author.reddit }}
|
||||
<li>
|
||||
<a href="https://reddit.com/u/{{ .Site.Author.reddit }}" title="Reddit">
|
||||
<span class="fa-stack fa-lg">
|
||||
<i class="fa fa-circle fa-stack-2x"></i>
|
||||
<i class="fa fa-reddit-alien fa-stack-1x fa-inverse"></i>
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
{{ end }}
|
||||
{{ if .Site.Author.linkedin }}
|
||||
<li>
|
||||
<a href="https://linkedin.com/in/{{ .Site.Author.linkedin }}" title="LinkedIn">
|
||||
<span class="fa-stack fa-lg">
|
||||
<i class="fa fa-circle fa-stack-2x"></i>
|
||||
<i class="fa fa-linkedin fa-stack-1x fa-inverse"></i>
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
{{ end }}
|
||||
{{ if .Site.Author.xing }}
|
||||
<li>
|
||||
<a href="https://www.xing.com/profile/{{ .Site.Author.xing }}" title="Xing">
|
||||
<span class="fa-stack fa-lg">
|
||||
<i class="fa fa-circle fa-stack-2x"></i>
|
||||
<i class="fa fa-xing fa-stack-1x fa-inverse"></i>
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
{{ end }}
|
||||
{{ if .Site.Author.stackoverflow }}
|
||||
<li>
|
||||
<a href="https://stackoverflow.com/{{ .Site.Author.stackoverflow }}" title="StackOverflow">
|
||||
<span class="fa-stack fa-lg">
|
||||
<i class="fa fa-circle fa-stack-2x"></i>
|
||||
<i class="fa fa-stack-overflow fa-stack-1x fa-inverse"></i>
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
{{ end }}
|
||||
{{ if .Site.Author.snapchat }}
|
||||
<li>
|
||||
<a href="https://www.snapchat.com/add/{{ .Site.Author.snapchat }}" title="Snapchat">
|
||||
<span class="fa-stack fa-lg">
|
||||
<i class="fa fa-circle fa-stack-2x"></i>
|
||||
<i class="fa fa-snapchat-ghost fa-stack-1x fa-inverse"></i>
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
{{ end }}
|
||||
{{ if .Site.Author.instagram }}
|
||||
<li>
|
||||
<a href="https://www.instagram.com/{{ .Site.Author.instagram }}" title="Instagram">
|
||||
<span class="fa-stack fa-lg">
|
||||
<i class="fa fa-circle fa-stack-2x"></i>
|
||||
<i class="fa fa-instagram fa-stack-1x fa-inverse"></i>
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
{{ end }}
|
||||
{{ if .Site.Author.youtube }}
|
||||
<li>
|
||||
<a href="https://www.youtube.com/{{ .Site.Author.youtube }}" title="Youtube">
|
||||
<span class="fa-stack fa-lg">
|
||||
<i class="fa fa-circle fa-stack-2x"></i>
|
||||
<i class="fa fa-youtube fa-stack-1x fa-inverse"></i>
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
{{ end }}
|
||||
{{ if .Site.Author.soundcloud }}
|
||||
<li>
|
||||
<a href="https://soundcloud.com/{{ .Site.Author.soundcloud }}" title="SoundCloud">
|
||||
<span class="fa-stack fa-lg">
|
||||
<i class="fa fa-circle fa-stack-2x"></i>
|
||||
<i class="fa fa-soundcloud fa-stack-1x fa-inverse"></i>
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
{{ end }}
|
||||
{{ if .Site.Author.spotify }}
|
||||
<li>
|
||||
<a href="https://open.spotify.com/user/{{ .Site.Author.spotify }}" title="Spotify">
|
||||
<span class="fa-stack fa-lg">
|
||||
<i class="fa fa-circle fa-stack-2x"></i>
|
||||
<i class="fa fa-spotify fa-stack-1x fa-inverse"></i>
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
{{ end }}
|
||||
{{ if .Site.Author.bandcamp }}
|
||||
<li>
|
||||
<a href="https://{{ .Site.Author.bandcamp }}.bandcamp.com/" title="Bandcamp">
|
||||
<span class="fa-stack fa-lg">
|
||||
<i class="fa fa-circle fa-stack-2x"></i>
|
||||
<i class="fa fa-bandcamp fa-stack-1x fa-inverse"></i>
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
{{ end }}
|
||||
{{ if .Site.Author.itchio }}
|
||||
<li>
|
||||
<a href="https://itch.io/profile/{{ .Site.Author.itchio }}" title="Itch.io">
|
||||
<span class="fa-stack fa-lg">
|
||||
<i class="fa fa-circle fa-stack-2x"></i>
|
||||
<i class="fa fa-gamepad fa-stack-1x fa-inverse"></i>
|
||||
<i class="fa {{ .icon }} fa-stack-1x fa-inverse"></i>
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
{{- end -}}
|
||||
{{ end }}
|
||||
{{ if .Site.Params.rss }}
|
||||
<li>
|
||||
@ -196,16 +48,14 @@
|
||||
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.7.1/katex.min.js" integrity="sha384-/y1Nn9+QQAipbNQWU65krzJralCnuOasHncUFXGkdwntGeSvQicrYkiUBwsgUqc1" crossorigin="anonymous"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.7.1/contrib/auto-render.min.js" integrity="sha384-dq1/gEHSxPZQ7DdrM82ID4YVol9BYyU7GbWlIwnwyPzotpoc57wDw/guX8EaYGPx" crossorigin="anonymous"></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>
|
||||
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
|
||||
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
|
||||
<script src="{{ .Site.BaseURL }}/js/pswp-init.js"></script>
|
||||
<script src="{{ .Site.BaseURL }}/js/main.js"></script>
|
||||
<script src="{{ .Site.BaseURL }}/js/highlight.min.js"></script>
|
||||
<script> hljs.initHighlightingOnLoad(); </script>
|
||||
<script> renderMathInElement(document.body); </script>
|
||||
<!-- Google Custom Search Engine -->
|
||||
{{ if .Site.Params.gcse }}
|
||||
<script>
|
||||
(function() {
|
||||
var cx = '{{ .Site.Params.gcse }}';
|
||||
@ -217,5 +67,6 @@
|
||||
s.parentNode.insertBefore(gcse, s);
|
||||
})();
|
||||
</script>
|
||||
{{ end }}
|
||||
|
||||
{{ template "_internal/google_analytics.html" . }}
|
||||
|
||||
@ -19,9 +19,6 @@
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800" />
|
||||
<link rel="stylesheet" href="{{ .Site.BaseURL }}/css/pygment_highlights.css" />
|
||||
<link rel="stylesheet" href="{{ .Site.BaseURL }}/css/highlight.min.css" />
|
||||
<link rel="stylesheet" href="{{ .Site.BaseURL }}/css/pswp-gallery.css" />
|
||||
<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" />
|
||||
|
||||
<!-- Facebook OpenGraph tags -->
|
||||
{{ if .Site.Params.fb_app_id }}
|
||||
|
||||
@ -1,17 +1,17 @@
|
||||
{{ if .IsHome }}
|
||||
{{ $.Scratch.Add "title" .Site.Title }}
|
||||
{{ if .Site.Params.subtitle }}{{ $.Scratch.Add "subtitle" .Site.Params.subtitle }}{{ end }}
|
||||
{{ if .Site.Params.bigimg }}{{ $.Scratch.Add "bigimg" .Site.Params.bigimg }}{{ end }}
|
||||
{{ $.Scratch.Set "title" .Site.Title }}
|
||||
{{ if .Site.Params.subtitle }}{{ $.Scratch.Set "subtitle" .Site.Params.subtitle }}{{ end }}
|
||||
{{ if .Site.Params.bigimg }}{{ $.Scratch.Set "bigimg" .Site.Params.bigimg }}{{ end }}
|
||||
{{ else }}
|
||||
{{ $.Scratch.Add "title" .Title }}
|
||||
{{ if .Params.subtitle }}{{ $.Scratch.Add "subtitle" .Params.subtitle }}{{ end }}
|
||||
{{ if .Params.bigimg }}{{ $.Scratch.Add "bigimg" .Params.bigimg }}{{ end }}
|
||||
{{ $.Scratch.Set "title" .Title }}
|
||||
{{ if .Params.subtitle }}{{ $.Scratch.Set "subtitle" .Params.subtitle }}{{ end }}
|
||||
{{ if .Params.bigimg }}{{ $.Scratch.Set "bigimg" .Params.bigimg }}{{ end }}
|
||||
{{ end }}
|
||||
{{ $bigimg := $.Scratch.Get "bigimg" }}
|
||||
|
||||
{{ if or $bigimg ($.Scratch.Get "title") }}
|
||||
{{ if isset $bigimg 0 }}
|
||||
<div id="header-big-imgs" data-num-img={{len $bigimg}} {{range $i, $img := $bigimg}}data-img-src-{{add $i 1}}="{{$img.src}}" {{ if $img.desc}}data-img-desc-{{add $i 1}}="{{$img.desc}}"{{end}}{{end}}></div>
|
||||
<div id="header-big-imgs" data-num-img={{len $bigimg}} {{range $i, $img := $bigimg}}data-img-src-{{add $i 1}}="{{$img.src | absURL }}" {{ if $img.desc}}data-img-desc-{{add $i 1}}="{{$img.desc}}"{{end}}{{end}}></div>
|
||||
{{ end }}
|
||||
|
||||
<header class="header-section {{ if isset $bigimg 0 }}has-img{{ end }}">
|
||||
|
||||
@ -1,14 +1,51 @@
|
||||
<!--
|
||||
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" />
|
||||
{{ end }}
|
||||
{{ $.Page.Scratch.Add "figurecount" 1 }}
|
||||
<!-- use either src or link-thumb for thumbnail image -->
|
||||
{{ with .Get "src" }}
|
||||
{{ $.Scratch.Add "thumb" . }}
|
||||
{{ else }}
|
||||
{{ $.Scratch.Add "thumb" (printf "%s." (.Get "thumb") | replace (.Get "link") ".") }}
|
||||
{{ end }}
|
||||
<!-- use either link or src for linked image -->
|
||||
{{ with .Get "link" }}
|
||||
{{ $.Scratch.Add "link" . }}
|
||||
{{ else }}
|
||||
{{ $.Scratch.Add "link" (.Get "src") }}
|
||||
{{ end }}
|
||||
<!-- use either alt or caption for image alt -->
|
||||
{{ with .Get "alt" }}
|
||||
{{ $.Scratch.Add "alt" .}}
|
||||
{{else}}
|
||||
{{ with .Get "caption" }}
|
||||
{{ $.Scratch.Add "alt" .}}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
<style>.gallery .img{{$.Page.Scratch.Get "figurecount"}} {background-image: url('{{ $.Scratch.Get "thumb" }}');}</style>
|
||||
<!-- ^background image is applied this way to ensure it is only shown when inside a .gallery -->
|
||||
<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">
|
||||
<a class="rig-cell" href="{{ with .Get "link" }}{{.}}{{ else }}{{ .Get "src" }}{{ end }}" {{ with .Get "size" }}data-size="{{.}}"{{ end }} itemprop="contentUrl">
|
||||
<img class="rig-img" itemprop="thumbnail"
|
||||
src="{{ with .Get "src" }}{{.}}{{ else }}{{ printf "%s." (.Get "thumb") | replace (.Get "link") "." }}{{ end }}"
|
||||
{{ with .Get "alt" }}alt="{{.}}"{{ end }}
|
||||
{{ with .Get "width" }}width="{{.}}"{{ end }}/>
|
||||
<span class="rig-overlay"></span>
|
||||
<span class="rig-text">{{ .Get "alt"}}</span>
|
||||
</a>
|
||||
<figcaption itemprop="caption description">
|
||||
<div class="img img{{$.Page.Scratch.Get "figurecount"}}" {{ with .Get "size" }}data-size="{{.}}"{{ end }} >
|
||||
<img itemprop="thumbnail" src="{{ $.Scratch.Get "thumb" }}" {{ with $.Scratch.Get "alt" }}alt="{{.}}"{{ end }}/><!-- <img> hidden if in .gallery -->
|
||||
</div>
|
||||
{{ 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" }}
|
||||
<!--<span itemprop="copyrightHolder">© {{ .Get "copyright"}}</span>-->
|
||||
{{ with .Get "attrlink"}}<a href="{{.}}">{{ .Get "attr" }}</a>{{ else }}{{ .Get "attr"}}{{ end }}
|
||||
</p>
|
||||
{{ end }}
|
||||
</figcaption>
|
||||
{{ end }}
|
||||
{{ with $.Scratch.Get "link" }}<a href="{{.}}" itemprop="contentUrl"></a>{{ end }}<!-- put <a> last so it is stacked on top -->
|
||||
</figure>
|
||||
</div>
|
||||
@ -1,4 +1,7 @@
|
||||
<div class="gallery" id="rig" itemscope itemtype="http://schema.org/ImageGallery">
|
||||
<!--
|
||||
Put this file in /layouts/shortcodes/gallery.html
|
||||
Documentation and licence at https://github.com/liwenyip/hugo-easy-gallery/
|
||||
-->
|
||||
<div class="gallery caption-position-{{ with .Get "caption-position" }}{{.}}{{else}}bottom{{end}} caption-effect-{{ with .Get "caption-effect" }}{{.}}{{else}}slide{{end}} hover-effect-{{ with .Get "hover-effect" }}{{.}}{{else}}zoom{{end}} {{ if ne (.Get "hover-transition") "none" }}hover-transition{{end}}" itemscope itemtype="http://schema.org/ImageGallery">
|
||||
{{ .Inner }}
|
||||
<div class="title">{{ .Get "title" }}</div>
|
||||
</div>
|
||||
75
layouts/shortcodes/load-photoswipe.html
Normal file
75
layouts/shortcodes/load-photoswipe.html
Normal file
@ -0,0 +1,75 @@
|
||||
<!--
|
||||
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 }}
|
||||
|
||||
<!--
|
||||
*** jQuery must be loaded before load-photoswipe.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 load-photoswipe.js from the footer instead
|
||||
-->
|
||||
<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>
|
||||
|
||||
<!-- 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>
|
||||
<!-- un-minified files for debugging only
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.1/photoswipe.js" integrity="sha256-EbmvgUvj+xbVm1PBnr5mBRX0DMqlxMEweM4Plusn54s=" crossorigin="anonymous"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.1/photoswipe-ui-default.js" integrity="sha256-0rqJyt9xZaN7vkee9NhLfIydAbpVTvhTTLa0mbA+260=" 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>
|
||||
{{ end }}
|
||||
@ -1,47 +0,0 @@
|
||||
<!-- 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>
|
||||
157
static/css/hugo-easy-gallery.css
Normal file
157
static/css/hugo-easy-gallery.css
Normal file
@ -0,0 +1,157 @@
|
||||
/*
|
||||
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);
|
||||
}
|
||||
|
||||
/*
|
||||
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;
|
||||
}
|
||||
.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,103 +0,0 @@
|
||||
#rig {
|
||||
max-width:900px;
|
||||
margin:0 auto; /*center aligned*/
|
||||
padding:0;
|
||||
font-size:0; /* Remember to change it back to normal font size if have captions */
|
||||
list-style:none;
|
||||
}
|
||||
#rig figure {
|
||||
display: inline-block;
|
||||
*display:inline;/*for IE6 - IE7*/
|
||||
width:25%;
|
||||
vertical-align:middle;
|
||||
box-sizing:border-box;
|
||||
margin:0;
|
||||
padding:0;
|
||||
}
|
||||
|
||||
/* The wrapper for each item */
|
||||
.rig-cell {
|
||||
margin:0 12px 12px 0;
|
||||
|
||||
box-shadow:0 0 6px rgba(0,0,0,0.3);
|
||||
display:block;
|
||||
position: relative;
|
||||
overflow:hidden;
|
||||
}
|
||||
|
||||
/* If have the image layer */
|
||||
.rig-img {
|
||||
display:block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border:none;
|
||||
transform:scale(1);
|
||||
transition:all 1s;
|
||||
}
|
||||
|
||||
#rig figure:hover .rig-img {
|
||||
transform:scale(1.05);
|
||||
}
|
||||
|
||||
/* If have the overlay layer */
|
||||
.rig-overlay {
|
||||
position: absolute;
|
||||
display:block;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
margin: auto;
|
||||
background: #3DC0F1;
|
||||
background-size:50px 50px;
|
||||
opacity:0;
|
||||
filter:alpha(opacity=0);/*For IE6 - IE8*/
|
||||
transition:all 0.6s;
|
||||
}
|
||||
#rig figure:hover .rig-overlay {
|
||||
opacity:0.8;
|
||||
}
|
||||
|
||||
/* If have captions */
|
||||
.rig-text {
|
||||
display:block;
|
||||
padding:0 30px;
|
||||
box-sizing:border-box;
|
||||
position:absolute;
|
||||
left:0;
|
||||
width:100%;
|
||||
text-align:center;
|
||||
text-transform:capitalize;
|
||||
font-size:18px;
|
||||
font-weight:bold;
|
||||
font-family: 'Oswald', sans-serif;
|
||||
font-weight:normal!important;
|
||||
top:40%;
|
||||
color:white;
|
||||
opacity:0;
|
||||
filter:alpha(opacity=0);/*For older IE*/
|
||||
transform:translateY(-20px);
|
||||
transition:all .3s;
|
||||
}
|
||||
#rig figure:hover .rig-text {
|
||||
transform:translateY(0px);
|
||||
opacity:0.9;
|
||||
}
|
||||
|
||||
@media (max-width: 9000px) {
|
||||
#rig figure {
|
||||
width:25%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 700px) {
|
||||
#rig figure {
|
||||
width:33.33%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 550px) {
|
||||
#rig figure {
|
||||
width:50%;
|
||||
}
|
||||
}
|
||||
@ -1,11 +1,17 @@
|
||||
/*
|
||||
Put this file in /static/js/pswp-init.js
|
||||
Put this file in /static/js/load-photoswipe.js
|
||||
Documentation and licence at https://github.com/liwenyip/hugo-easy-gallery/
|
||||
*/
|
||||
|
||||
/* TODO: Make the share function work */
|
||||
$( document ).ready(function() {
|
||||
/*
|
||||
Initialise Photoswipe
|
||||
*/
|
||||
var items = []; // array of slide objects that will be passed to PhotoSwipe()
|
||||
// for every figure element on the page:
|
||||
$('figure').each( function() {
|
||||
if ($(this).attr('class') == 'pswp-ignore') return true; // ignore any figures where class="pswp-ignore"
|
||||
if ($(this).attr('class') == 'no-photoswipe') return true; // ignore any figures where class="no-photoswipe"
|
||||
// get properties from child a/img/figcaption elements,
|
||||
var $figure = $(this),
|
||||
$a = $figure.find('a'),
|
||||
@ -22,6 +28,7 @@ $( document ).ready(function() {
|
||||
title : $title,
|
||||
msrc : $msrc
|
||||
};
|
||||
console.log("Using pre-defined dimensions for " + $src);
|
||||
// if not, set temp default size then load the image to check actual size
|
||||
} else {
|
||||
var item = {
|
||||
@ -31,6 +38,7 @@ $( document ).ready(function() {
|
||||
title : $title,
|
||||
msrc : $msrc
|
||||
};
|
||||
console.log("Using default dimensions for " + $src);
|
||||
// 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();
|
||||
@ -42,6 +50,7 @@ $( document ).ready(function() {
|
||||
clearInterval(wait);
|
||||
item.w = w;
|
||||
item.h = h;
|
||||
console.log("Got actual dimensions for " + img.src);
|
||||
}
|
||||
}, 30);
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user