img.html 2.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566
  1. {{- $source := ($.Page.Resources.ByType "image").GetMatch (printf "%s" (.Get "name")) }}
  2. {{- $customAlt := .Get "alt" }}
  3. {{- $customSize := .Get "size" | lower }}
  4. {{- $lazyLoad := default (default true $.Site.Params.geekdocImageLazyLoading) (.Get "lazy") }}
  5. {{- $data := newScratch }}
  6. {{- with $source }}
  7. {{- $caption := default .Title $customAlt }}
  8. {{- $isSVG := (eq .MediaType.SubType "svg") }}
  9. {{- $origin := . }}
  10. {{- if $isSVG }}
  11. {{- $data.SetInMap "size" "tiny" "320" }}
  12. {{- $data.SetInMap "size" "small" "600" }}
  13. {{- $data.SetInMap "size" "medium" "1200" }}
  14. {{- $data.SetInMap "size" "large" "1800" }}
  15. {{- else }}
  16. {{- $data.SetInMap "size" "tiny" "320x"}}
  17. {{- $data.SetInMap "size" "small" "600x" }}
  18. {{- $data.SetInMap "size" "medium" "1200x" }}
  19. {{- $data.SetInMap "size" "large" "1800x" }}
  20. {{- end -}}
  21. <div class="flex justify-center">
  22. <figure class="gdoc-markdown__figure">
  23. <a class="gdoc-markdown__link--raw" href="{{ .Permalink }}">
  24. <picture>
  25. {{- $size := $data.Get "size" }}
  26. {{- if not $isSVG }}
  27. {{- if ne $customSize "origin" }}
  28. <source
  29. {{- if $customSize }}
  30. srcset="{{ ($origin.Resize (index $size $customSize)).Permalink }}"
  31. {{- else }}
  32. srcset="{{ ($origin.Resize (index $size "small")).Permalink }} 600w, {{ ($origin.Resize (index $size "medium")).Permalink }} 1200w" sizes="100vw"
  33. {{- end }}
  34. />
  35. {{- end }}
  36. {{- end }}
  37. <img
  38. {{- if $isSVG }}
  39. src="{{ $origin.Permalink }}" width="{{ index $size (default "medium" $customSize) }}"
  40. {{- else }}
  41. {{- if $lazyLoad }}{{ print " loading=\"lazy\"" | safeHTMLAttr }}{{- end }}
  42. {{- if eq $customSize "origin" }}
  43. src="{{ $origin.Permalink }}"
  44. {{- else }}
  45. src="{{ ($origin.Resize (index $size "large")).Permalink }}"
  46. {{- end }}
  47. alt="{{ $caption }}"
  48. {{- end }}
  49. />
  50. </picture>
  51. </a>
  52. {{- with $caption }}
  53. <figcaption>
  54. {{ . }}
  55. {{- with $source.Params.credits }}
  56. {{ printf " (%s)" . | $.Page.RenderString }}
  57. {{- end }}
  58. </figcaption>
  59. {{- end }}
  60. </figure>
  61. </div>
  62. {{- end }}