blag/layouts/shortcodes/figure.html
2020-05-02 12:27:07 -04:00

72 lines
3.3 KiB
HTML

<!--
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 -}}
<!-- if 'resource' is given, look for a page resource by that name. -->
<!-- if 'page' is given, find the page resource there. -->
<!-- if not, find the page resource in the current page. -->
<!-- (yes, my description is probably at least 50% wrong) -->
<!-- Thumbnail image size/type -->
{{- $resize_opts := "600x jpg" -}}
<!-- TODO: This isn't generating a JPEG on my configuration. Not sure
why. Hugo version issue? -->
{{- $thumb := "" -}}
{{- $href := "" -}}
{{- if .Get "resource" -}}
{{- $page := $.Page -}}
{{- with .Get "page" -}}
{{- $page = $.Site.GetPage . -}}
{{- end -}}
{{- if not $page -}}
{{- errorf "Error: Can't find page %s" (.Get "page") -}}
{{- end -}}
{{- $resource := (.Get "resource") -}}
{{- $original := $page.Resources.GetMatch (printf "*%s*" $resource) -}}
{{- if eq $original nil -}}
{{- errorf "Error: Can't find resource %s on page %s" $resource (.Get "page") -}}
{{- end -}}
{{- if .Get "noresize" -}}
{{- .Scratch.Set "image" $original -}}
{{- else -}}
{{- .Scratch.Set "image" ($original.Resize $resize_opts) -}}
{{- end -}}
{{- $image := .Scratch.Get "image" -}}
{{- $thumb = $image.RelPermalink -}}
{{- $href = $original.RelPermalink -}}
{{- else -}}
<!-- use either src or link-thumb for thumbnail image -->
{{- $thumb = .Get "src" | default (printf "%s." (.Get "thumb") | replace (.Get "link") ".") -}}
{{- $href = .Get "link" | default (.Get "src") -}}
{{- end -}}
<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">
<!-- Prepending ../.. below is a hack to get around
https://github.com/gohugoio/hugo/issues/2744 when I don't
feel like setting baseURL and using absolute URLs. -->
<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" | markdownify) }}alt="{{.}}"{{ end }}/><!-- <img> hidden if in .gallery -->
</div>
<a href="{{ $href }}" itemprop="contentUrl"></a>
{{- if or (or (.Get "title") (.Get "caption" | markdownify)) (.Get "attr") -}}
<figcaption>
{{- with .Get "title" -}}<h4>{{.}}</h4>{{ end }}
{{- if or (.Get "caption" | markdownify) (.Get "attr")}}
<p>
{{- .Get "caption" -}}
{{- with .Get "attrlink"}}<a href="{{.}}">{{ .Get "attr" }}</a>{{ else }}{{ .Get "attr"}}{{ end -}}
</p>
{{- end -}}
</figcaption>
{{- end -}}
</figure>
</div>