Update photoswipe gallery to hugo-easy-gallery
Using https://github.com/liwenyip/hugo-easy-gallery/ from @liwenyip
This commit is contained in:
parent
de52bb63ed
commit
19b620f632
10 changed files with 318 additions and 193 deletions
|
|
@ -1,14 +1,51 @@
|
|||
<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">
|
||||
{{ .Get "caption"}}
|
||||
<!--<span itemprop="copyrightHolder">© {{ .Get "copyright"}}</span>-->
|
||||
</figcaption>
|
||||
</figure>
|
||||
<!--
|
||||
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">
|
||||
<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" }}
|
||||
{{ 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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue