hugo-theme/layouts/partials/block/image.html
2024-10-21 13:47:30 +02:00

52 lines
1.8 KiB
HTML

{{- $alt := .Title -}}
{{- $respSizes := slice "960" "1600" -}}
{{- $hint := "photo" -}}
{{- $filter := "box" -}}
{{- if .Params.image -}}
{{- $dest := .Params.image | safeURL -}}
{{- $dest = path.Join (path.Dir $dest) (path.Base $dest) -}}
{{- with .Resources.Get $dest -}}
{{- if eq .MediaType.SubType "svg" -}}
<figure>
<img class="w-full object-cover h-36 md:h-48 xl:h-60" src="{{ .RelPermalink }}"
alt="{{ $alt }}" title="{{ $alt }}"
loading="lazy"
>
</figure>
{{- else -}}
{{- $src := . -}}
{{- $dataSzes := "(min-width: 1024px) 100vw, 50vw" -}}
{{- $actualImg := $src.Resize (print "640x jpg " $filter) -}}
<picture>
<source type="image/webp" srcset="
{{- with $respSizes -}}
{{- range $i, $e := . -}}
{{- if ge $src.Width . -}}
{{- if $i }}, {{ end -}}{{- ($src.Resize (print . "x webp " $hint " " $filter) ).RelPermalink }} {{ . }}w
{{- end -}}
{{- end -}}
{{- end -}}" sizes="{{ $dataSzes }}" />
<source type="image/jpeg" srcset="
{{- with $respSizes -}}
{{- range $i, $e := . -}}
{{- if ge $src.Width . -}}
{{- if $i }}, {{ end -}}{{- ($src.Resize (print . "x jpg " $filter) ).RelPermalink }} {{ . }}w
{{- end -}}
{{- end -}}
{{- end -}}" sizes="{{ $dataSzes }}" />
<img class="w-full object-cover h-36 md:h-48 xl:h-60" src="{{ $actualImg.RelPermalink }}" width="{{ $src.Width }}" height="{{ $src.Height }}" alt="{{ $alt }}" title="{{ $alt }}" loading="lazy" />
</picture>
{{- end -}}
<!-- or otherwise simply load the URL -->
{{- else -}}
<figure>
<img class="w-full object-cover h-36 md:h-48 xl:h-60" src="{{ .Params.image | safeURL }}"
alt="{{ $alt }}" title="{{ $alt }}"
loading="lazy"
>
</figure>
{{- end -}}
{{- end -}}