render-image.html 1.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041
  1. {{- $image := .Page.Resources.GetMatch (printf "%s" (.Destination | safeURL)) -}}
  2. {{- $Permalink := .Destination | relURL | safeURL -}}
  3. {{- $alt := .PlainText | safeHTML -}}
  4. {{- $Width := 0 -}}
  5. {{- $Height := 0 -}}
  6. {{- $Srcset := "" -}}
  7. {{/* SVG and external images won't work with gallery layout, because their width and height attributes are unknown */}}
  8. {{- $galleryImage := false -}}
  9. {{- if $image -}}
  10. {{- $notSVG := ne (path.Ext .Destination) ".svg" -}}
  11. {{- $Permalink = $image.RelPermalink -}}
  12. {{- if $notSVG -}}
  13. {{- $Width = $image.Width -}}
  14. {{- $Height = $image.Height -}}
  15. {{- $galleryImage = true -}}
  16. {{- if (default true .Page.Site.Params.imageProcessing.content.enabled) -}}
  17. {{- $small := $image.Resize `480x` -}}
  18. {{- $big := $image.Resize `1024x` -}}
  19. {{- $Srcset = printf `%s 480w, %s 1024w` $small.RelPermalink $big.RelPermalink -}}
  20. {{- end -}}
  21. {{- end -}}
  22. {{- end -}}
  23. <img src="{{ $Permalink }}"
  24. {{ with $Width }}width="{{ . }}"{{ end }}
  25. {{ with $Height }}height="{{ . }}"{{ end }}
  26. {{ with $Srcset }}srcset="{{ . }}"{{ end }}
  27. loading="lazy"
  28. {{ with $alt }}
  29. alt="{{ . }}"
  30. {{ end }}
  31. {{ if $galleryImage }}
  32. class="gallery-image"
  33. data-flex-grow="{{ div (mul $image.Width 100) $image.Height }}"
  34. data-flex-basis="{{ div (mul $image.Width 240) $image.Height }}px"
  35. {{ end }}
  36. >