ResiLien
/
portails
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

ux: add error handling image not found

This commit is contained in:
Henk Verlinde 2022-01-14 10:42:40 +01:00
parent f6d3a754c2
commit 96ec7cbcf4
1 changed files with 25 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
layouts/_default/_markup/render-image.html
View File

@ -1,27 +1,31 @@
{{ $image := .Page.Resources.GetMatch .Destination -}} {{ $image := .Page.Resources.GetMatch .Destination -}}
{{ $lqip := $image.Resize site.Params.lqipWidth -}} {{ with $image -}}
{{ $lqip := $image.Resize site.Params.lqipWidth -}}
{{ $imgSrc := "" -}} {{ $imgSrc := "" -}}
{{ $imgSrcSet := slice -}} {{ $imgSrcSet := slice -}}
{{ $widths := site.Params.landscapePhotoWidths -}} {{ $widths := site.Params.landscapePhotoWidths -}}
{{ if gt $image.Height $image.Width -}} {{ if gt $image.Height $image.Width -}}
{{ $widths = site.Params.portraitPhotoWidths -}} {{ $widths = site.Params.portraitPhotoWidths -}}
{{ end -}} {{ end -}}
{{ range $widths -}} {{ range $widths -}}
{{ $srcUrl := (printf "%dx" . | $image.Resize).Permalink -}} {{ $srcUrl := (printf "%dx" . | $image.Resize).Permalink -}}
{{ if eq $imgSrc "" -}}{{ $imgSrc = $srcUrl -}}{{ end -}} {{ if eq $imgSrc "" -}}{{ $imgSrc = $srcUrl -}}{{ end -}}
{{ $imgSrcSet = $imgSrcSet | append (printf "%s %dw" $srcUrl .) -}} {{ $imgSrcSet = $imgSrcSet | append (printf "%s %dw" $srcUrl .) -}}
{{ end -}} {{ end -}}
{{ $imgSrcSet = (delimit $imgSrcSet ",") -}} {{ $imgSrcSet = (delimit $imgSrcSet ",") -}}
{{ if gt $image.Width site.Params.smallLimit -}} {{ if gt $image.Width site.Params.smallLimit -}}
<figure class="figure"> <figure class="figure">
<img class="figure-img img-fluid lazyload blur-up" data-sizes="auto" src="{{ $lqip.Permalink }}" data-srcset="{{ $imgSrcSet }}" width="{{ $image.Width }}" height="{{ $image.Height }}" alt="{{ $.Text }}"> <img class="figure-img img-fluid lazyload blur-up" data-sizes="auto" src="{{ $lqip.Permalink }}" data-srcset="{{ $imgSrcSet }}" width="{{ $image.Width }}" height="{{ $image.Height }}" alt="{{ $.Text }}">
<noscript><img class="figure-img img-fluid" sizes="100vw" srcset="{{ $imgSrcSet }}" src="{{ $image.Permalink }}" width="{{ $image.Width }}" height="{{ $image.Height }}" alt="{{ $.Text }}"></noscript> <noscript><img class="figure-img img-fluid" sizes="100vw" srcset="{{ $imgSrcSet }}" src="{{ $image.Permalink }}" width="{{ $image.Width }}" height="{{ $image.Height }}" alt="{{ $.Text }}"></noscript>
{{ with $.Title }}<figcaption class="figure-caption">{{ . | safeHTML }}</figcaption>{{ end -}} {{ with $.Title }}<figcaption class="figure-caption">{{ . | safeHTML }}</figcaption>{{ end -}}
</figure> </figure>
{{ else -}}
<img class="img-fluid lazyload blur-up" src="{{ $lqip.Permalink }}" data-src="{{ $image.Permalink }}" width="{{ $image.Width }}" height="{{ $image.Height }}" alt="{{ $.Text }}">
{{ end -}}
{{ else -}} {{ else -}}
<img class="img-fluid lazyload blur-up" src="{{ $lqip.Permalink }}" data-src="{{ $image.Permalink }}" width="{{ $image.Width }}" height="{{ $image.Height }}" alt="{{ $.Text }}"> {{ erroridf "image-not-found" "Image not found" -}}
{{ end -}} {{ end -}}