Skip to content

Instantly share code, notes, and snippets.

@oshliaer
Forked from budparr/figure.html
Created February 5, 2019 13:51
Show Gist options
  • Save oshliaer/22cfc20b82e9336d51303f827c3354fc to your computer and use it in GitHub Desktop.
Save oshliaer/22cfc20b82e9336d51303f827c3354fc to your computer and use it in GitHub Desktop.
Hugo "figure" shortcode that works with https://github.com/aFarkas/lazysizes and uses `markdownify` for title and caption #gohugo
<!-- image -->
<figure {{ with .Get "class" }}class="{{.}}"{{ end }}>
{{ with .Get "link"}}<a href="{{.}}">{{ end }}
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="{{ .Get "src" }}" {{ if or (.Get "alt") (.Get "caption") }}alt="{{ with .Get "alt"}}{{.}}{{else}}{{ .Get "caption" }}{{ end }}" {{ end }}{{ with .Get "width" }}width="{{.}}" {{ end }} class="lazyload" />
<noscript>
<img src="{{ .Get "src" }}" {{ if or (.Get "alt") (.Get "caption") }}alt="{{ with .Get "alt"}}{{.}}{{else}}{{ .Get "caption" }}{{ end }}" {{ end }}{{ with .Get "width" }}width="{{.}}" {{ end }}/>
</noscript>
{{ if .Get "link"}}</a>{{ end }}
{{ if or (or (.Get "title") (.Get "caption")) (.Get "attr")}}
<figcaption>{{ if isset .Params "title" }}
<h4>{{ .Get "title" | markdownify }}</h4>{{ end }}
{{ if or (.Get "caption") (.Get "attr")}}<p>
{{ .Get "caption" | markdownify }}
{{ with .Get "attrlink"}}<a href="{{.}}"> {{ end }}
{{ .Get "attr" }}
{{ if .Get "attrlink"}}</a> {{ end }}
</p> {{ end }}
</figcaption>
{{ end }}
</figure>
<!-- image -->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment