natenom-website-dump-2024-0.../natenom.de/2022/04/verbesserungen-des-render-hooks-fuer-bilder-und-im-wiki/downloads/figure.html.txt
2024-02-01 17:43:06 +01:00

73 lines
4.7 KiB
Text

{{- $original_img := (.Page.Resources.ByType "image").GetMatch (printf "*%s" (.Get "src")) -}}
{{- $alt := "" -}}{{ if isset .Params "alt" }}{{ $alt = .Get "alt" | safeHTML }}{{ end }}
{{- $title := "" -}}{{ if isset .Params "title" }}{{ $title = .Get "title" | safeHTML }}{{ end }}
{{- $link := "" -}}{{ if isset .Params "link" }}{{ $link = (.Get "link") }}{{ end }}
{{- $caption := "" -}}{{ if isset .Params "caption" }}{{ $caption = (.Get "caption" | markdownify ) }}{{ end }}
{{- $float := "" -}}{{ if isset .Params "float" }}{{ $float = .Get "float" | default "" }}{{ end }}
{{- $width := "" -}}{{ if isset .Params "width" }}{{ $width = .Get "width" | default $original_img.Width }}{{ end }} <!-- wenn width angegeben, dann nur in der größe einbinden und kein srcset -->
{{- if and (lt $width $original_img.Width ) ( $width ) -}}
{{- $original_img = $original_img.Resize (printf "%dx webp" (int $width)) -}}
{{- end -}}
<!--{{- if and (not $original_img) .Page.File -}}
{{- $path := path.Join .Page.File.Dir .Destination -}}
{{- $original_img = resources.Get $path -}}
{{- end -}}-->
{{- with $original_img -}}
{{- $image_webp_360 := "" -}}
{{- $image_webp_500 := "" -}}
{{- $image_webp_816 := "" -}}
{{- $image_webp_1632 := "" -}}
{{- $image_webp_full := "" -}}
{{- $image_jpg_360 := "" -}}
{{- $image_jpg_500 := "" -}}
{{- $image_jpg_816 := "" -}}
{{- $image_jpg_1632 := "" -}}
{{- $image_jpg_full := "" -}}
{{- if ge $original_img.Width 816 -}}
{{- $image_jpg_360 = $original_img.Resize "360x jpg" -}}
{{- $image_jpg_500 = $original_img.Resize "500x jpg" -}}
{{- $image_jpg_816 = $original_img.Resize "816x jpg" -}}
{{- $image_webp_360 = $original_img.Resize "360x webp" -}}
{{- $image_webp_500 = $original_img.Resize "500x webp" -}}
{{- $image_webp_816 = $original_img.Resize "816x webp" -}}
{{- if gt $original_img.Width 1632 -}}
{{- $image_jpg_1632 = $original_img.Resize "1632x jpg" -}}
{{- $image_webp_1632 = $original_img.Resize "1632x webp" -}}
{{- end -}}
{{- else -}} <!-- Bilder sind kleiner als 816, die _full brauchen wir nur dann zum Direkteinbinden. -->
{{ if ne $original_img.MediaType.SubType "webp" -}}
{{- $image_webp_full = $original_img.Resize (printf "%dx webp" $original_img.Width) -}}
{{- end -}}
{{ if ne $original_img.MediaType.SubType "jpeg" -}}
{{- $image_jpg_full = $original_img.Resize (printf "%dx jpg" $original_img.Width) -}}
{{- end -}}
{{- end -}}
<figure class="image-caption {{- with $float }} float-{{.}}{{- end -}}">
{{- if ge $original_img.Width 816 -}}
{{- if ( $link ) -}}<a href="{{- $link -}}">{{- end -}}<picture>
<source type="image/webp" srcset="{{ $image_webp_360.RelPermalink }} 360w, {{- $image_webp_500.RelPermalink }} 500w, {{- $image_webp_816.RelPermalink }} 816w {{- with $image_webp_1632 -}}, {{ .RelPermalink }} 1632w{{- end -}}"
sizes="(max-width: 424px) 360px, (max-width: 596px) 500px, (min-width: 565px) 816px {{- if gt $original_img.Width 1632 -}},(min-width: 1200px) 1632px{{- end -}}" />
<img alt="{{- $alt -}}" srcset="{{ $image_jpg_360.RelPermalink }} 360w, {{ $image_jpg_500.RelPermalink }} 500w, {{ $image_jpg_816.RelPermalink }} 816w {{- with $image_jpg_1632 -}},{{ .RelPermalink }} 1632w{{- end -}}"
sizes="(max-width: 424px) 360px, (max-width: 596px) 500px, (min-width: 565px) 816px {{- if gt $original_img.Width 1632 -}},(min-width: 1200px) 1632px{{- end -}}"
src="{{ with $image_jpg_816 -}}{{ .RelPermalink }}{{- end -}}" title="{{- $title -}}" loading="lazy" width="{{- $image_jpg_816.Width -}}" height="{{- $image_jpg_816.Height -}}" />
{{- else -}}
{{- if ( $link ) -}}<a href="{{- $link -}}">{{- end -}}
<picture><source type="image/webp" srcset="{{- if eq .MediaType.SubType "webp" -}}{{ $original_img.RelPermalink }}{{- else -}}{{ $image_webp_full.RelPermalink }}{{- end -}}" />
<img alt="{{- $alt -}}" src="{{- if eq .MediaType.SubType "jpeg" -}}{{ $original_img.RelPermalink }}{{- else -}}{{ $image_jpg_full.RelPermalink }}{{- end -}}" title="{{- $title -}}" width="{{- $original_img.Width -}}" height="{{- $original_img.Height -}}" loading="lazy" />
{{- end -}}
</picture>{{- if ( $link ) -}}</a>{{- end -}}
{{- if ( $caption ) -}}<figcaption>{{- with $caption -}}{{.}}{{- end -}}</figcaption>{{- end -}}</figure>
{{- else -}}
{{- if ( $link ) -}}<a href="{{- $link -}}">{{- end -}}
<img src="{{ .Destination | safeURL }}" alt="{{ $.Text }}" title="{{- with $.Title | safeHTML }}{{ . }}{{ end -}}" loading="lazy" />
{{- if ( $link ) -}}</a>{{- end -}}
{{- end -}}