243 lines
8.2 KiB
HTML
243 lines
8.2 KiB
HTML
{{ $image:= . }}
|
|
{{ $imagePath:= .Src }}
|
|
{{ $class:= .Class }}
|
|
{{ $size:= .Size }}
|
|
{{ $alt:= .Alt }}
|
|
{{ $displayXL:= .DisplayXL | default "1110x" }}
|
|
{{ $displayLG:= .DisplayLG | default "700x" }}
|
|
{{ $displayMD:= .DisplayMD | default "600x" }}
|
|
{{ $displaySM:= .DisplaySM | default "545x" }}
|
|
{{ $resize:= .Resize | default true }}
|
|
{{ $loading:= .Loading | default "lazy" }}
|
|
{{ $context:= .Context | default . }}
|
|
{{ $contentImage:= false }}
|
|
{{ $assetImage:= false }}
|
|
{{ $sizeValue:= index (split $size ` `) 0 }}
|
|
{{ $height:= index (split $sizeValue `x`) 1 }}
|
|
{{ $width:= index (split $sizeValue `x`) 0 }}
|
|
{{ $webp:= .Webp | default true }}
|
|
{{ $command:= .Command | default "Resize" }}
|
|
{{ $placeholder:= .Placeholder | default false }}
|
|
{{ $placeholderQuality:= "40x q20" }}
|
|
|
|
|
|
<!-- check content image -->
|
|
{{ with $context.Resources.GetMatch $imagePath }}
|
|
{{ $contentImage = true }}
|
|
{{ end }}
|
|
<!-- /check content image -->
|
|
|
|
<!-- check asset image -->
|
|
{{ if fileExists (add `assets/` (string $imagePath)) }}
|
|
{{ $assetImage = true }}
|
|
{{ end }}
|
|
<!-- /check asset image -->
|
|
|
|
<!-- image static/CDN -->
|
|
{{ if or (hasPrefix $imagePath "http") (fileExists (add `static/` (string $imagePath))) }}
|
|
<div
|
|
loading="{{ .Loading }}"
|
|
decoding="async"
|
|
style="background-image: url('{{ $imagePath | absURL }}')"
|
|
alt="{{ .Alt }}"
|
|
class="{{ $class }} img"
|
|
height="{{ $height }}"
|
|
width="{{ $width }}" />
|
|
{{ else }}
|
|
<!-- /image cdn -->
|
|
|
|
<!-- check file existence -->
|
|
{{ if or $assetImage $contentImage }}
|
|
{{ if $assetImage }}
|
|
{{ $image = resources.Get $imagePath }}
|
|
{{ else if $contentImage }}
|
|
{{ $image = $context.Resources.GetMatch $imagePath }}
|
|
{{ end }}
|
|
|
|
|
|
<!-- image extension -->
|
|
{{ $imageExt := path.Ext $image }}
|
|
|
|
|
|
<!-- image height, width (if not svg) -->
|
|
{{ if eq $imageExt `.svg` }}
|
|
{{ .Scratch.Set "image-height" "" }}
|
|
{{ .Scratch.Set "image-width" "" }}
|
|
{{ else }}
|
|
{{ .Scratch.Set "image-height" $image.Height }}
|
|
{{ .Scratch.Set "image-width" $image.Width }}
|
|
{{ end }}
|
|
{{ $imageHeight:= .Scratch.Get "image-height" }}
|
|
{{ $imageWidth:= .Scratch.Get "image-width" }}
|
|
|
|
|
|
<!-- gif/svg image -->
|
|
{{ if or (eq $imageExt `.gif`) (eq $imageExt `.svg`) }}
|
|
<div
|
|
style="background-image: url('{{ $image.RelPermalink }}')"
|
|
loading="{{ $loading }}"
|
|
decoding="async"
|
|
alt="{{ .Alt }}"
|
|
class="{{ $class }} img"
|
|
width="{{ $width }}"
|
|
height="{{ $height }}" />
|
|
{{ else }}
|
|
<!-- single image -->
|
|
{{ if $size }}
|
|
<!-- resize -->
|
|
{{ $imageFallback:= $image.Resize $size }}
|
|
{{ $imageWebp:= $image.Resize (add (string $size) " webp") }}
|
|
{{ if not $webp }}
|
|
{{ $imageWebp = $image.Resize (string $size) }}
|
|
{{ end }}
|
|
<!-- fit -->
|
|
{{ if eq $command "Fit" }}
|
|
{{ $imageFallback = $image.Fit $size }}
|
|
{{ $imageWebp = $image.Fit (add (string $size) " webp") }}
|
|
{{ if not $webp }}
|
|
{{ $imageWebp = $image.Fit (string $size) }}
|
|
{{ end }}
|
|
<!-- fill -->
|
|
{{ else if eq $command "Fill" }}
|
|
{{ $imageFallback = $image.Fill $size }}
|
|
{{ $imageWebp = $image.Fill (add (string $size) " webp") }}
|
|
{{ if not $webp }}
|
|
{{ $imageWebp = $image.Fill (string $size) }}
|
|
{{ end }}
|
|
<!-- crop -->
|
|
{{ else if eq $command "Crop" }}
|
|
{{ $imageFallback = $image.Crop $size }}
|
|
{{ $imageWebp = $image.Crop (add (string $size) " webp") }}
|
|
{{ if not $webp }}
|
|
{{ $imageWebp = $image.Crop (string $size) }}
|
|
{{ end }}
|
|
{{ end }}
|
|
|
|
|
|
<!-- placeholder -->
|
|
{{ $placeholderImage := ($imageWebp.Resize $placeholderQuality) | images.Filter (images.GaussianBlur 5) }}
|
|
|
|
|
|
<div
|
|
{{ if $placeholder }}
|
|
style="background-image: 'data:image/jpeg;base64,{{ $placeholderImage.Content | base64Encode }}'"
|
|
data-src={{ $imageWebp.RelPermalink }}
|
|
{{ else }}
|
|
src="{{ $imageWebp.RelPermalink }}" loading="{{ $loading }}"
|
|
decoding="async"
|
|
{{ end }}
|
|
|
|
alt="{{ .Alt }}"
|
|
class="{{ if $placeholder }}lazy{{ end }} {{ $class }} img"
|
|
width="{{- with $width -}}
|
|
{{- . -}}
|
|
{{- else -}}
|
|
{{- $imageWebp.Width -}}
|
|
{{- end -}}
|
|
"
|
|
height="{{- with $height -}}
|
|
{{- . -}}
|
|
{{- else -}}
|
|
{{- $imageWebp.Height -}}
|
|
{{- end -}}
|
|
"
|
|
onerror="this.onerror='null';
|
|
this.src='{{ $imageFallback.RelPermalink }}';" />
|
|
|
|
<!-- if image size less then 500x and size not defined -->
|
|
{{ else if or (lt ($image.Width) 500) (not $resize) }}
|
|
{{ $size:= add (add (string $image.Width) "x") (string $image.Height) }}
|
|
<!-- resize -->
|
|
{{ $imageWebp:= $image.Resize (add (string $size) " webp") }}
|
|
{{ if not $webp }}
|
|
{{ $imageWebp = $image.Resize (string $size) }}
|
|
{{ end }}
|
|
<!-- fit -->
|
|
{{ if eq $command "Fit" }}
|
|
{{ $imageWebp = $image.Resize (add (string $size) " webp") }}
|
|
{{ if not $webp }}
|
|
{{ $imageWebp = $image.Resize (string $size) }}
|
|
{{ end }}
|
|
<!-- fill -->
|
|
{{ else if eq $command "Fill" }}
|
|
{{ $imageWebp = $image.Resize (add (string $size) " webp") }}
|
|
{{ if not $webp }}
|
|
{{ $imageWebp = $image.Resize (string $size) }}
|
|
{{ end }}
|
|
<!-- crop -->
|
|
{{ else if eq $command "Crop" }}
|
|
{{ $imageWebp = $image.Resize (add (string $size) " webp") }}
|
|
{{ if not $webp }}
|
|
{{ $imageWebp = $image.Resize (string $size) }}
|
|
{{ end }}
|
|
{{ end }}
|
|
|
|
|
|
<!-- placeholder -->
|
|
{{ $placeholderImage := ($imageWebp.Resize $placeholderQuality) | images.Filter (images.GaussianBlur 5) }}
|
|
|
|
|
|
<div
|
|
{{ if $placeholder }}
|
|
src="data:image/jpeg;base64,{{ $placeholderImage.Content | base64Encode }}"
|
|
data-src={{ $imageWebp.RelPermalink }} alt="placeholder"
|
|
{{ else }}
|
|
src="{{ $imageWebp.RelPermalink }}" loading="{{ $loading }}"
|
|
decoding="async" alt="{{ .Alt }}"
|
|
{{ end }}
|
|
|
|
class="{{ if $placeholder }}lazy{{ end }} {{ $class }} img"
|
|
width="{{- with $width -}}
|
|
{{- . -}}
|
|
{{- else -}}
|
|
{{- $imageWebp.Width -}}
|
|
{{- end -}}
|
|
"
|
|
height="{{- with $height -}}
|
|
{{- . -}}
|
|
{{- else -}}
|
|
{{- $imageWebp.Height -}}
|
|
{{- end -}}
|
|
"
|
|
onerror="this.onerror='null';this.src='{{ $image.RelPermalink }}';" />
|
|
{{ else }}
|
|
<!-- /if image size less then 500x and size not defined -->
|
|
|
|
<!-- image processing for multiple device -->
|
|
{{ $imageFallback:= $image.Resize $displayXL }}
|
|
{{ $imageXL:= $image.Resize (add $displayXL " webp") }}
|
|
{{ $imageLG:= $image.Resize (add $displayLG " webp") }}
|
|
{{ $imageMD:= $image.Resize (add $displayMD " webp") }}
|
|
{{ $imageSM:= $image.Resize (add $displaySM " webp") }}
|
|
{{ if not $webp }}
|
|
{{ $imageXL = $image.Resize $displayXL }}
|
|
{{ $imageLG = $image.Resize $displayLG }}
|
|
{{ $imageMD = $image.Resize $displayMD }}
|
|
{{ $imageSM = $image.Resize $displaySM }}
|
|
{{ end }}
|
|
|
|
|
|
<!-- placeholder -->
|
|
{{ $placeholderImage := ($imageFallback.Resize $placeholderQuality) | images.Filter (images.GaussianBlur 5) }}
|
|
|
|
|
|
<div
|
|
{{ if $placeholder }}
|
|
src="data:image/jpeg;base64,{{ $placeholderImage.Content | base64Encode }}"
|
|
data-src={{ $imageFallback.RelPermalink }}
|
|
{{ else }}
|
|
loading="{{ $loading }}" decoding="async"
|
|
style="background: url('{{ $imageFallback.RelPermalink }}')"
|
|
{{ end }}class="{{ if $placeholder }}
|
|
lazy
|
|
{{ end }} {{ $class }} img"
|
|
alt="{{ .Alt }}" />
|
|
{{ end }}
|
|
<!-- end image processing -->
|
|
{{ end }}
|
|
<!-- end single image -->
|
|
{{ end }}
|
|
|
|
|
|
<!-- end check file existence -->
|
|
{{ end }} |