avatar.html 2.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758
  1. {{- $source := ($.Page.Resources.ByType "image").GetMatch (printf "%s" (.Get "name")) }}
  2. {{- $customAlt := .Get "alt" }}
  3. {{- $customSize := .Get "size" | lower }}
  4. {{- $customAnchor := default "smart" (.Get "anchor") | title }}
  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" "160" }}
  12. {{- $data.SetInMap "size" "small" "300" }}
  13. {{- $data.SetInMap "size" "medium" "600" }}
  14. {{- $data.SetInMap "size" "large" "900" }}
  15. {{- else }}
  16. {{- $data.SetInMap "size" "tiny" (printf "160x160 %s" $customAnchor) }}
  17. {{- $data.SetInMap "size" "small" (printf "300x300 %s" $customAnchor) }}
  18. {{- $data.SetInMap "size" "medium" (printf "600x600 %s" $customAnchor) }}
  19. {{- $data.SetInMap "size" "large" (printf "900x900 %s" $customAnchor) }}
  20. {{- end -}}
  21. <div class="flex justify-center">
  22. <figure
  23. class="gdoc-markdown__figure gdoc-markdown__figure--round">
  24. <a class="gdoc-markdown__link--raw" href="{{ .Permalink }}">
  25. <picture>
  26. {{- $size := $data.Get "size" }}
  27. {{- if not $isSVG }}
  28. {{- if ne $customSize "origin" }}
  29. <source
  30. {{- if $customSize }}
  31. srcset="{{ ($origin.Fill (index $size $customSize)).Permalink }}"
  32. {{- else }}
  33. srcset="{{ ($origin.Fill (index $size "small")).Permalink }} 600w, {{ ($origin.Fill (index $size "medium")).Permalink }} 1200w" sizes="100vw"
  34. {{- end }}
  35. />
  36. {{- end }}
  37. {{- end }}
  38. <img
  39. {{- if $isSVG }}
  40. src="{{ $origin.Permalink }}" width="{{ index $size (default "medium" $customSize) }}"
  41. {{- else }}
  42. {{- if eq $customSize "origin" }}
  43. src="{{ $origin.Permalink }}"
  44. {{- else }}
  45. src="{{ ($origin.Fill (index $size "large")).Permalink }}"
  46. {{- end }}
  47. alt="{{ $caption }}"
  48. {{- end }}
  49. />
  50. </picture>
  51. </a>
  52. </figure>
  53. </div>
  54. {{- end }}