Skip to content

Instantly share code, notes, and snippets.

Last active Sep 23, 2020
What would you like to do?
Hugo "figure" shortcode that works with 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" />
<img src="{{ .Get "src" }}" {{ if or (.Get "alt") (.Get "caption") }}alt="{{ with .Get "alt"}}{{.}}{{else}}{{ .Get "caption" }}{{ end }}" {{ end }}{{ with .Get "width" }}width="{{.}}" {{ end }}/>
{{ 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 }}
{{ end }}
<!-- image -->

This comment has been minimized.

Copy link
Owner Author

@budparr budparr commented Oct 6, 2017

To use this shortcode you have to have Lazysizes installed. See that repo for instructions.

To use this, put the above code into the file:

And use the shortcode as a replacement for the built-in Hugo version, like this:
{{< figure src="/media/spf13.jpg" title="Steve Francia" >}}


This comment has been minimized.

Copy link

@brennanangel brennanangel commented Nov 11, 2019

Thanks for making this!
Racking my brain, is any reason why the <noscript> doesn't have {{- with .Get "height" }} height="{{ . }}"{{ end -}}?
It shows up here:

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment