StartIT/web.start-it.nl
Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Init

Browse Source
This commit is contained in:
Machiel Heinen
2025-12-02 16:34:42 +01:00
commit ae16f86d5e
203 changed files with 30853 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

283
layouts/partials/image.html Normal file
View File

@@ -0,0 +1,283 @@
{{ $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" }}
{{ $fetchpriority:= .FetchPriority | default "" }}
{{ $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 and (not (strings.HasPrefix $imagePath "http")) (fileExists (add `assets/` (string $imagePath))) }}
{{ $assetImage = true }}
{{ end }}
<!-- /check asset image -->
<!-- image static/CDN -->
{{ if or (hasPrefix $imagePath "http") (fileExists (add `static/` (string $imagePath))) }}
<img
loading="{{ $loading }}"
decoding="async"
{{ if $fetchpriority }}fetchpriority="{{ $fetchpriority }}"{{ end }}
src="{{ $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`) }}
<img
src="{{ $image.RelPermalink }}"
loading="{{ $loading }}"
decoding="async"
{{ if $fetchpriority }}fetchpriority="{{ $fetchpriority }}"{{ end }}
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) }}
<img
{{ if $placeholder }}
src="data:image/jpeg;base64,{{ $placeholderImage.Content | base64Encode }}"
data-src={{ $imageWebp.RelPermalink }}
{{ else }}
src="{{ $imageWebp.RelPermalink }}" loading="{{ $loading }}"
decoding="async"
{{ end }}
{{ if $fetchpriority }}fetchpriority="{{ $fetchpriority }}"{{ 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) }}
<img
{{ 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 }}
{{ if $fetchpriority }}fetchpriority="{{ $fetchpriority }}"{{ 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) }}
<picture>
<source
{{ if $placeholder }}
src="data:image/jpeg;base64,{{ $placeholderImage.Content | base64Encode }}"
data-srcset={{ $imageFallback.RelPermalink }}
{{ else }}
srcset="{{ $imageSM.RelPermalink }}"
{{ end }}
media="(max-width: 575px)" />
<source
{{ if $placeholder }}
src="data:image/jpeg;base64,{{ $placeholderImage.Content | base64Encode }}"
data-srcset={{ $imageFallback.RelPermalink }}
{{ else }}
srcset="{{ $imageMD.RelPermalink }}"
{{ end }}
media="(max-width: 767px)" />
<source
{{ if $placeholder }}
src="data:image/jpeg;base64,{{ $placeholderImage.Content | base64Encode }}"
data-srcset={{ $imageFallback.RelPermalink }}
{{ else }}
srcset="{{ $imageLG.RelPermalink }}"
{{ end }}
media="(max-width: 991px)" />
<source
{{ if $placeholder }}
src="data:image/jpeg;base64,{{ $placeholderImage.Content | base64Encode }}"
data-srcset={{ $imageFallback.RelPermalink }}
{{ else }}
srcset="{{ $imageXL.RelPermalink }}"
{{ end }} />
<img
{{ if $placeholder }}
src="data:image/jpeg;base64,{{ $placeholderImage.Content | base64Encode }}"
data-src={{ $imageFallback.RelPermalink }}
{{ else }}
loading="{{ $loading }}" decoding="async"
src="{{ $imageFallback.RelPermalink }}"
{{ end }}
{{ if $fetchpriority }}fetchpriority="{{ $fetchpriority }}"{{ end }}
class="{{ if $placeholder }}
lazy
{{ end }} {{ $class }} img"
alt="{{ .Alt }}"
width="{{ $image.Width }}"
height="{{ $image.Height }}" />
</picture>
{{ end }}
<!-- end image processing -->
{{ end }}
<!-- end single image -->
{{ end }}
<!-- end check file existence -->
{{ end }}