blog/themes/stack/layouts/_markup/render-image.html
2026-07-31 15:38:57 +08:00

30 lines
1.2 KiB
HTML

{{- $image := partial "helper/image" (dict "Resources" .Page.Resources "Image" .Destination "Context" .Page) -}}
{{- $alt := .PlainText | safeHTML -}}
{{- $title := .Title | markdownify -}}
{{/* There are some types of images that don't have width and height attributes, such as SVG */}}
{{- $galleryImage := and $image.Height $image.Width -}}
{{- $attributes := dict -}}
{{- if $galleryImage -}}
{{- $attributes = (dict
"data-flex-grow" (div (mul $image.Width 100) $image.Height)
"data-flex-basis" (printf "%dpx" (div (mul $image.Width 240) $image.Height))
) -}}
{{- end -}}
{{ partial "helper/responsive-image" (dict
"Resource" $image.Resource
"Widths" (cond .Page.Site.Params.ImageProcessing.Content.Enabled .Page.Site.Params.ImageProcessing.Content.Widths nil)
"Attributes" (merge $attributes (dict
"src" $image.Permalink
"width" $image.Width
"height" $image.Height
"alt" $alt
"title" $title
"data-title-escaped" ($title | htmlEscape)
"class" (cond $galleryImage "gallery-image" "")
"loading" "lazy"
"sizes" "(max-width: 767px) calc(100vw - 30px), (max-width: 1023px) 700px, (max-width: 1279px) 950px, 1232px"
))
) }}