73 lines
3.0 KiB
HTML
73 lines
3.0 KiB
HTML
{{/*.src is the image path*/}}
|
|
{{/*.height is used for resizing*/}}
|
|
{{/*.width is used for resizing*/}}
|
|
{{/*.scale is used for resizing*/}}
|
|
{{/*.alt alternate text*/}}
|
|
{{/*.class is added to the image*/}}
|
|
{{/*.pictureclass is added to the picture*/}}
|
|
|
|
{{ $img := resources.Get .src }}
|
|
{{ if $img }}
|
|
|
|
{{- $target1 := "" -}}
|
|
{{- $target2 := "" -}}
|
|
|
|
{{- if (and .width .height) }}
|
|
{{/* {{ warnf "lazypicture.html: width and height" }}*/}}
|
|
{{ $swidth := int .width }}
|
|
{{ $sheight := int .height }}
|
|
{{- $target1 = (printf "%dx%d" $swidth $sheight) -}}
|
|
{{- $target2 = (printf "%dx%d" (mul 2 $swidth) (mul 2 $sheight)) -}}
|
|
{{- else if .width }}
|
|
{{/* {{ warnf "lazypicture.html: width" }}*/}}
|
|
{{ $swidth := int .width }}
|
|
{{- $target1 = (printf "%dx" $swidth) -}}
|
|
{{- $target2 = (printf "%dx" (mul 2 $swidth)) -}}
|
|
{{- else if .height }}
|
|
{{/* {{ warnf "lazypicture.html: height" }}*/}}
|
|
{{ $sheight := int .height }}
|
|
{{- $target1 = (printf "x%d" $sheight) -}}
|
|
{{- $target2 = (printf "x%d" (mul 2 $sheight)) -}}
|
|
{{- else if .scale }}
|
|
{{/* {{ warnf "lazypicture.html: scale" }}*/}}
|
|
{{ $swidth := int (mul (float $img.Width) (float .scale) ) }}
|
|
{{ $sheight := int (mul (float $img.Height) (float .scale) ) }}
|
|
|
|
{{- $target1 = (printf "%dx%d" $swidth $sheight) -}}
|
|
{{- $target2 = (printf "%dx%d" (mul 2 $swidth) (mul 2 $sheight)) -}}
|
|
{{ else }}
|
|
{{- $target1 = (printf "%dx%d" $img.Width $img.Height) -}}
|
|
{{ end }}
|
|
|
|
{{/* {{ warnf "lazypicture.html: target1 %s" $target1 }}*/}}
|
|
|
|
{{ $imgOri := $img.Resize (printf "%s q75 Lanczos picture" $target1) }}
|
|
{{ $imgWebp := $img.Resize (printf "%s webp q75 Lanczos picture" $target1) }}
|
|
|
|
|
|
<picture class="{{ .pictureclass }}">
|
|
{{- if $target2 }}
|
|
{{ $imgOri2 := $img.Resize (printf "%s q75 Lanczos picture" $target2) }}
|
|
{{ $imgWebp2 := $img.Resize (printf "%s webp q75 Lanczos picture" $target2) }}
|
|
|
|
<source srcset="{{ $imgWebp.RelPermalink }} 1x, {{ $imgWebp2.RelPermalink }} 2x" type="image/webp" />
|
|
<source srcset="{{ $imgOri.RelPermalink }} 1x, {{ $imgOri2.RelPermalink }} 2x" type="{{ $imgOri.MediaType.Type }}">
|
|
{{- else }}
|
|
<source srcset="{{ $imgWebp.RelPermalink }} 1x" type="image/webp" />
|
|
<source srcset="{{ $imgOri.RelPermalink }} 1x" type="{{ $imgOri.MediaType.Type }}">
|
|
{{- end }}
|
|
|
|
<img
|
|
width="{{ $imgOri.Width }}"
|
|
height="{{ $imgOri.Height }}"
|
|
class="lozad img-responsive {{ .class }}"
|
|
data-src="{{ $imgOri.RelPermalink }}"
|
|
alt='{{ .alt }}'
|
|
src="data:image/gif;base64,R0lGODlhBwACAIAAAP///wAAACH5BAEAAAEALAAAAAAHAAIAAAIDjI9YADs="
|
|
loading="lazy"
|
|
decoding="async"
|
|
/>
|
|
</picture>
|
|
{{ else }}
|
|
{{ warnf "lazypicture.html: Image src was not found: %q" .src }}
|
|
{{ end }} |