Generate galleries from image directories

Update to the latest version of hugo-easy-gallery. Use default functions
in shortcodes, surpress newlines, simplify background CSS, and generate
galleries from directories. 5c7171497ceca912cc9d61d7340f9b9cdf213f67
This commit is contained in:
Michael Romero 2017-04-03 00:50:26 -07:00
commit 0c1692e722
4 changed files with 134 additions and 40 deletions

View file

@ -4,48 +4,26 @@ 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 }}
{{- 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}}>
{{- $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 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 class="img"{{ if .Parent }} style="background-image: url('{{ $thumb }}');"{{ 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>
{{ if or (or (.Get "title") (.Get "caption")) (.Get "attr")}}
{{- if or (or (.Get "title") (.Get "caption")) (.Get "attr")}}
<figcaption>
{{ with .Get "title" }}<h4>{{.}}</h4>{{ end }}
{{ if or (.Get "caption") (.Get "attr")}}
{{- 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 }}
{{- .Get "caption" -}}
{{- with .Get "attrlink"}}<a href="{{.}}">{{ .Get "attr" }}</a>{{ else }}{{ .Get "attr"}}{{ end -}}
</p>
{{ end }}
{{- end }}
</figcaption>
{{ end }}
{{ with $.Scratch.Get "link" }}<a href="{{.}}" itemprop="contentUrl"></a>{{ end }}<!-- put <a> last so it is stacked on top -->
{{- end }}
{{ with .Get "link" | default (.Get "src") }}<a href="{{.}}" itemprop="contentUrl"></a>{{ end }}<!-- put <a> last so it is stacked on top -->
</figure>
</div>