Verbeter weergave afbeeldingen en ondersteun webp

themes/nluug/layouts/_default/_markup/render-image.html

@@ -1,8 +1,50 @@
+<picture>
+  {{ $isJPG := eq (path.Ext .Destination) ".jpg" }}
+  {{ $isPNG := eq (path.Ext .Destination) ".png" }}
+
+  {{ if ($isJPG) -}}
+    {{ $avifPath:= replaceRE "(jpg|jpeg)$i" ".avif" .Destination }}
+    {{ $avifPathStatic:= printf "static/%s" $avifPath }}
+
+    {{ if (fileExists $avifPathStatic) -}}
+      <source srcset="{{ $avifPath | safeURL }}" type="image/avif" >
+    {{- end }}
+
+    {{ $webpPath:= replace .Destination ".jpg" ".webp" }}
+    {{ $webpPathStatic:= printf "static/%s" $webpPath }}
+
+    {{ if (fileExists $webpPathStatic) -}}
+      <source srcset="{{ $webpPath | safeURL }}" type="image/webp" >
+    {{- end }}
+  {{- end }}
+
+  {{ if ($isPNG) -}}
+    {{ $avifPath:= replace .Destination ".png" ".avif" }}
+    {{ $avifPathStatic:= printf "static/%s" $avifPath }}
+
+    {{ if (fileExists $avifPathStatic) -}}
+      <source srcset="{{ $avifPath | safeURL }}" type="image/avif" >
+    {{- end }}
+
+    {{ $webpPath:= replace .Destination ".png" ".webp" }}
+    {{ $webpPathStatic:= printf "static/%s" $webpPath }}
+
+    {{ if (fileExists $webpPathStatic) -}}
+      <source srcset="{{ $webpPath | safeURL }}" type="image/webp" >
+    {{- end }}
+  {{- end }}
+
+  {{- $img := .Page.Resources.GetMatch .Destination -}}
+  {{- if and (not $img) .Page.File -}}
+      {{ $path := path.Join .Page.File.Dir .Destination }}
+      {{- $img = resources.Get $path -}}
+  {{- end -}}
   <img
     src="{{ .Destination | safeURL }}"
     alt="{{ .Text }}"
     loading="lazy"
     decoding="async"
-  class="full-width"
+    width="{{ $img.Width }}"
+    height="{{ $img.Height }}"
   />
-
+</picture>

themes/nluug/layouts/partials/show-active-members-small.html

@@ -1,20 +1,11 @@
-{{ $size_in_pixels := 150 }}
-
 <div class="grid-team-members-small-photos">
   {{ range $key,$val := .Scratch.Get "active_members" }}
     {{ with (index $.Site.Data.personen .) }}
       <div>
         {{ if .thumbnail }}
-            <figure>
+          {{ $image := replace .thumbnail "200x200" "150x150" }}
-              {{ if .profile_page }}
+          {{ $alttext := printf "Foto van %s" .name }}
-                <a href="{{ .profile_page }}"><img src="{{ .thumbnail }}" alt="Foto van {{ .name }}" height="{{ $size_in_pixels }}" width="{{ $size_in_pixels }}"></a>
+          {{ partial "show-image.html" (dict "context" . "image" $image "alt" $alttext "figcaption" .name "link" .profile_page) }}
-              {{ else }}
-                <img src="{{ .thumbnail }}" alt="Foto van {{ .name }}" height="{{ $size_in_pixels }}" width="{{ $size_in_pixels }}">
-              {{ end }}
-              <figcaption>
-                <small><strong>{{ .name }}</strong></small>
-              </figcaption>
-            </figure>
         {{ end }}
       </div>
     {{ end }}

themes/nluug/layouts/partials/show-image-of-person.html

@@ -1,19 +1,9 @@
-{{ $size_in_pixels := 150 }}
 {{ if .profile_details }}
       <div>
           {{ if .profile_details.thumbnail }}
-            <figure>
+            {{ $image := replace .profile_details.thumbnail "200x200" "150x150" }}
-              {{ if .profile_details.profile_page }}
+            {{ $alttext := printf "Foto van %s" .profile_details.name }}
-                <a href="{{ .profile_details.profile_page }}"><img src="{{ .profile_details.thumbnail }}" alt="Foto van {{ .profile_details.name }}" height="{{ $size_in_pixels }}" width="{{ $size_in_pixels }}"></a>
+            {{ partial "show-image.html" (dict "context" . "image" $image "alt" $alttext) }}
-              {{ else }}
-                <img src="{{ .profile_details.thumbnail }}" alt="Foto van {{ .profile_details.name }}" height="{{ $size_in_pixels }}" width="{{ $size_in_pixels }}">
-              {{ end }}
-              {{ if not .hide_figcaption }}
-              <figcaption>
-                <small><strong>{{ .profile_details.name }}</strong></small>
-              </figcaption>
-              {{ end }}
-            </figure>
           {{ end }}
       </div>
 {{ end }}

themes/nluug/layouts/partials/show-image.html

@@ -0,0 +1,33 @@
+<figure>
+<picture>
+  {{ $isJPG := eq (path.Ext .image) ".jpg" }}
+  {{ $isPNG := eq (path.Ext .image) ".png" }}
+
+  {{ if ($isJPG) -}}
+    {{ $webpPath:= replace .image ".jpg" ".webp" }}
+    {{ $webpPathStatic:= printf "static/%s" $webpPath }}
+
+    {{ if (fileExists $webpPathStatic) -}}
+      <source srcset="{{ $webpPath | safeURL }}" type="image/webp">
+    {{- end }}
+  {{- end }}
+
+  {{ if ($isPNG) -}}
+    {{ $webpPath:= replace .image ".png" ".webp" }}
+    {{ $webpPathStatic:= printf "static/%s" $webpPath }}
+
+    {{ if (fileExists $webpPathStatic) -}}
+      <source srcset="{{ $webpPath | safeURL }}" type="image/webp">
+    {{- end }}
+  {{- end }}
+  {{ $img := imageConfig (add "/static" (.image | safeURL)) }}
+  {{ if .link }}<a href="{{ .link }}">{{ end }}
+    <img src="{{ .image | safeURL }}" alt="{{ .alt }}" loading="lazy" decoding="async" width="{{ $img.Width }}" height="{{ $img.Height }}">
+  {{ if .link }}</a>{{ end }}
+</picture>
+{{ if .figcaption }}
+<figcaption>
+<small><strong>{{ .figcaption }}</strong></small>
+</figcaption>
+</figure>
+{{ end }}

themes/nluug/layouts/partials/show-related-members.html

@@ -1,20 +1,11 @@
-{{ $size_in_pixels := 150 }}
-
 <div class="grid-team-members-small-photos">
   {{ range $key,$val := .Scratch.Get "related_members" }}
     {{ with (index $.Site.Data.personen .) }}
       <div>
         {{ if .thumbnail }}
-            <figure>
+          {{ $image := replace .thumbnail "200x200" "150x150" }}
-              {{ if .profile_page }}
+          {{ $alttext := printf "Foto van %s" .name }}
-                <a href="{{ .profile_page }}"><img src="{{ .thumbnail }}" alt="Foto van {{ .name }}" height="{{ $size_in_pixels }}" width="{{ $size_in_pixels }}"></a>
+          {{ partial "show-image.html" (dict "context" . "image" $image "alt" $alttext "figcaption" .name "link" .profile_page) }}
-              {{ else }}
-                <img src="{{ .thumbnail }}" alt="Foto van {{ .name }}" height="{{ $size_in_pixels }}" width="{{ $size_in_pixels }}">
-              {{ end }}
-              <figcaption>
-                <small><strong>{{ .name }}</strong></small>
-              </figcaption>
-            </figure>
         {{ end }}
       </div>
     {{ end }}