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

feat: update image shortcodes for disabling lazyload

This commit is contained in:
Henk Verlinde 2021-09-08 14:18:18 +02:00
parent 3e0a9a4054
commit f1fdec85de
2 changed files with 10 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
layouts/shortcodes/img-simple.html
View File

@ -1,3 +1,7 @@
{{ $image := .Page.Resources.GetMatch (printf "*%s*" (.Get "src")) -}}
{{ $lqip := $image.Resize $.Site.Params.lqipWidth -}}
{{ if eq .Site.Params.options.lazySizes true -}}
<img class="img-simple img-fluid lazyload blur-up{{ with .Get "class" }} {{.}}{{ end }}" src="{{ $lqip.RelPermalink }}" data-src="{{ $image.RelPermalink }}" width="{{ $image.Width }}" height="{{ $image.Height }}" {{ with .Get "alt" }}alt="{{.}}"{{ end }}>
{{ else -}}
<img class="img-simple img-fluid{{ with .Get "class" }} {{.}}{{ end }}" src="{{ $image.RelPermalink }}" width="{{ $image.Width }}" height="{{ $image.Height }}" {{ with .Get "alt" }}alt="{{.}}"{{ end }}>
{{ end -}}

4
layouts/shortcodes/img.html
View File

@ -17,7 +17,11 @@
{{ $imgSrcSet = (delimit $imgSrcSet ",") -}}
<figure{{ with .Get "class" }} class="{{.}}"{{ end }}>
{{ if eq .Site.Params.options.lazySizes true -}}
<img class="img-fluid lazyload blur-up" data-sizes="auto" src="{{ $lqip.RelPermalink }}" data-srcset="{{ $imgSrcSet }}" width="{{ $image.Width }}" height="{{ $image.Height }}" {{ with .Get "alt" }}alt="{{.}}"{{ end }}>
{{ else -}}
<img class="img-fluid" sizes="100vw" srcset="{{ $imgSrcSet }}" src="{{ $image.RelPermalink }}" width="{{ $image.Width }}" height="{{ $image.Height }}" {{ with .Get "alt" }}alt="{{.}}"{{ end }}>
{{ end -}}
<noscript><img class="img-fluid" sizes="100vw" srcset="{{ $imgSrcSet }}" src="{{ $image.RelPermalink }}" width="{{ $image.Width }}" height="{{ $image.Height }}" {{ with .Get "alt" }}alt="{{.}}"{{ end }}></noscript>
{{ with .Get "caption" }}<figcaption class="figure-caption">{{ . | safeHTML }}</figcaption>{{ end }}
</figure>