public/website
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Verbeter weergave afbeeldingen en ondersteun webp

Browse source
This commit is contained in:
Michael Boelen 2023-05-24 02:26:08 +02:00
parent 6659fc3378
commit 4efe0a3612
50 changed files with 95 additions and 48 deletions
Download patch file Download diff file Expand all files Collapse all files

56
themes/nluug/layouts/_default/_markup/render-image.html
View file

@ -1,8 +1,50 @@
<img
src="{{ .Destination | safeURL }}"
alt="{{ .Text }}"
loading="lazy"
decoding="async"
class="full-width"
/>
<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"
width="{{ $img.Width }}"
height="{{ $img.Height }}"
/>
</picture>

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

@ -1,21 +1,12 @@
{{ $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>
{{ if .profile_page }}
<a href="{{ .profile_page }}"><img src="{{ .thumbnail }}" alt="Foto van {{ .name }}" height="{{ $size_in_pixels }}" width="{{ $size_in_pixels }}"></a>
{{ 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 }}
{{ if .thumbnail }}
{{ $image := replace .thumbnail "200x200" "150x150" }}
{{ $alttext := printf "Foto van %s" .name }}
{{ partial "show-image.html" (dict "context" . "image" $image "alt" $alttext "figcaption" .name "link" .profile_page) }}
{{ end }}
</div>
{{ end }}
{{ end }}

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

@ -1,19 +1,9 @@
{{ $size_in_pixels := 150 }}
{{ if .profile_details }}
<div>
{{ if .profile_details.thumbnail }}
<figure>
{{ if .profile_details.profile_page }}
<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>
{{ 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>
{{ $image := replace .profile_details.thumbnail "200x200" "150x150" }}
{{ $alttext := printf "Foto van %s" .profile_details.name }}
{{ partial "show-image.html" (dict "context" . "image" $image "alt" $alttext) }}
{{ end }}
</div>
{{ end }}

33
themes/nluug/layouts/partials/show-image.html Normal file
View file

@ -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 }}

19
themes/nluug/layouts/partials/show-related-members.html
View file

@ -1,21 +1,12 @@
{{ $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>
{{ if .profile_page }}
<a href="{{ .profile_page }}"><img src="{{ .thumbnail }}" alt="Foto van {{ .name }}" height="{{ $size_in_pixels }}" width="{{ $size_in_pixels }}"></a>
{{ 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 }}
{{ if .thumbnail }}
{{ $image := replace .thumbnail "200x200" "150x150" }}
{{ $alttext := printf "Foto van %s" .name }}
{{ partial "show-image.html" (dict "context" . "image" $image "alt" $alttext "figcaption" .name "link" .profile_page) }}
{{ end }}
</div>
{{ end }}
{{ end }}