You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
39 lines
1.6 KiB
39 lines
1.6 KiB
<!--{{/*
|
|
Like the Hugo built-in, but easier to grok with Lazy Loading and LQIP support.
|
|
|
|
Basic usage:
|
|
{{< figure src="https://i.supload.com/r1gXlwuXiZ.png" link="https://supload.com/r1gXlwuXiZ" caption="Ethereum value explosion in 2017. You do the math." >}}
|
|
|
|
Internal usage reference:
|
|
https://gohugo.io/content-management/shortcodes/#figure
|
|
*/}}-->
|
|
{{ $src := .Get "src" }}
|
|
{{ $lqipsrc := .Get "lqipsrc" }}
|
|
{{ $caption := .Get "caption" }}
|
|
{{ $link := .Get "link" }}
|
|
{{ $linktarget := .Get "linktarget" }}
|
|
{{ $attr := .Get "attr" }}
|
|
{{ $attrlink := .Get "attrlink" }}
|
|
{{ $alt := .Get "alt" }}
|
|
{{ $title := .Get "title" }}
|
|
{{ $class := .Get "class" }}
|
|
<figure{{ with $class }} class="{{ . }}"{{ end }}>
|
|
{{ with $link }}<a href="{{ . }}"{{ if $linktarget }} target="{{ $linktarget }}"{{ end }}{{ if eq $linktarget "_blank" }} rel="external noopener noreferrer"{{ end }}>{{ end }}
|
|
{{ if $lqipsrc }}
|
|
<img class="lazyload blur-up" src="{{ $lqipsrc }}" data-src="{{ $src }}" {{ if or $alt $caption }}alt="{{ with $alt }}{{ . }}{{ else }}{{ $caption }}{{ end }}"{{ end }} />
|
|
{{ else }}
|
|
<img class="lazyload" data-src="{{ $src }}" {{ if or $alt $caption }}alt="{{ with $alt }}{{ . }}{{ else }}{{ $caption }}{{ end }}"{{ end }} />
|
|
{{ end }}
|
|
{{ if $link }}</a>{{ end }}
|
|
{{ if or (or $title $caption) $attr }}
|
|
<figcaption>{{ if isset .Params "title" }}
|
|
<header><b>{{ $title }}</b></header>{{ end }}
|
|
{{ if or $caption $attr }}
|
|
<small>{{ $caption }}
|
|
{{ with $attrlink }}<a href="{{ . }}"> {{ end }}
|
|
{{ $attr }}
|
|
{{ if $attrlink }}</a> {{ end }}
|
|
</small>{{ end }}
|
|
</figcaption>
|
|
{{ end }}
|
|
</figure> |