Hugo Dark Theme Site Generator https://after-dark.habd.as
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.

figure.html 1.6KB

123456789101112131415161718192021222324252627282930313233343536373839
  1. <!--{{/*
  2. Like the Hugo built-in, but easier to grok with Lazy Loading and LQIP support.
  3. Basic usage:
  4. {{< figure src="https://i.supload.com/r1gXlwuXiZ.png" link="https://supload.com/r1gXlwuXiZ" caption="Ethereum value explosion in 2017. You do the math." >}}
  5. Internal usage reference:
  6. https://gohugo.io/content-management/shortcodes/#figure
  7. */}}-->
  8. {{ $src := .Get "src" }}
  9. {{ $lqipsrc := .Get "lqipsrc" }}
  10. {{ $caption := .Get "caption" }}
  11. {{ $link := .Get "link" }}
  12. {{ $linktarget := .Get "linktarget" }}
  13. {{ $attr := .Get "attr" }}
  14. {{ $attrlink := .Get "attrlink" }}
  15. {{ $alt := .Get "alt" }}
  16. {{ $title := .Get "title" }}
  17. {{ $class := .Get "class" }}
  18. <figure{{ with $class }} class="{{ . }}"{{ end }}>
  19. {{ with $link }}<a href="{{ . }}"{{ if $linktarget }} target="{{ $linktarget }}"{{ end }}{{ if eq $linktarget "_blank" }} rel="external noopener noreferrer"{{ end }}>{{ end }}
  20. {{ if $lqipsrc }}
  21. <img class="lazyload blur-up" src="{{ $lqipsrc }}" data-src="{{ $src }}" {{ if or $alt $caption }}alt="{{ with $alt }}{{ . }}{{ else }}{{ $caption }}{{ end }}"{{ end }} />
  22. {{ else }}
  23. <img class="lazyload" data-src="{{ $src }}" {{ if or $alt $caption }}alt="{{ with $alt }}{{ . }}{{ else }}{{ $caption }}{{ end }}"{{ end }} />
  24. {{ end }}
  25. {{ if $link }}</a>{{ end }}
  26. {{ if or (or $title $caption) $attr }}
  27. <figcaption>{{ if isset .Params "title" }}
  28. <header><b>{{ $title }}</b></header>{{ end }}
  29. {{ if or $caption $attr }}
  30. <small>{{ $caption }}
  31. {{ with $attrlink }}<a href="{{ . }}"> {{ end }}
  32. {{ $attr }}
  33. {{ if $attrlink }}</a> {{ end }}
  34. </small>{{ end }}
  35. </figcaption>
  36. {{ end }}
  37. </figure>