58 lines
1.8 KiB
HTML
58 lines
1.8 KiB
HTML
<!--
|
|
type: string - default empty
|
|
img: image
|
|
url: string
|
|
alt: string
|
|
caption: string
|
|
-->
|
|
{{ $img := .img }}
|
|
{{ if not $img }}
|
|
{{ $img = resources.Get .url }}
|
|
{{ if not $img }}
|
|
{{ $img := resources.GetRemote .url | resources.Copy (path.Join "images" (path.Base .url )) }}
|
|
{{ end }}
|
|
{{ end }}
|
|
|
|
{{ if $img }}
|
|
{{ $url := $img.RelPermalink }}
|
|
{{ $width := $img.Width }}
|
|
{{ $height := $img.Height }}
|
|
{{ $sizes := slice "320" "640" "960" "1280" }}
|
|
{{ $ext := path.Ext $url }}
|
|
{{ $name := path.Base (replace $url $ext "") }}
|
|
{{ $dir := path.Dir $url }}
|
|
{{ $mediaWidthControl := "(min-width: 1240px) 50vw, 70vw" }}
|
|
|
|
<a href="{{ $url }}">
|
|
<picture>
|
|
{{- if eq hugo.Environment "development" }}
|
|
<img class="{{ .type }}" width="{{ $width }}" height="{{ $height }}" src="{{ $url }}" alt="{{ .alt }}"
|
|
loading="lazy" decoding="async">
|
|
{{ else }}
|
|
<source type="image/avif" srcset="
|
|
{{ range $i, $size := $sizes }}
|
|
{{ $dir }}/{{ $name }}-{{ $size }}{{ $ext }}.avif {{ $size }}w,
|
|
{{ end }}
|
|
{{ $url }}.avif {{ $width }}w
|
|
" sizes="{{ $mediaWidthControl }}" />
|
|
<source type="image/webp" srcset="
|
|
{{ range $i, $size := $sizes }}
|
|
{{ $dir }}/{{ $name }}-{{ $size }}{{ $ext }}.webp {{ $size }}w,
|
|
{{ end }}
|
|
{{ $url }}.webp {{ $width }}w
|
|
" sizes="{{ $mediaWidthControl }}" />
|
|
<img class="{{ .type }}" width="{{ $width }}" height="{{ $height }}" srcset="
|
|
{{ range $i, $size := $sizes }}
|
|
{{ $dir }}/{{ $name }}-{{ $size }}{{ $ext }} {{ $size }}w,
|
|
{{ end }}
|
|
{{ $url }} {{ $width }}w
|
|
" src="{{ $url }}" alt="{{ .alt }}" loading="lazy" decoding="async">
|
|
{{ end }}
|
|
</picture>
|
|
</a>
|
|
{{ if .caption }}
|
|
<p class="caption">{{ .caption }}</p>
|
|
{{ end }}
|
|
{{ end }}
|
|
|
|
{{/* https://www.brycewray.com/posts/2023/05/better-code-image-processing-hugo-render-hook-edition/ */}}
|