tiennm99/HugoBlox-kit
1
0 Fork 0
mirror of https://github.com/tiennm99/HugoBlox-kit.git synced 2026-10-12 16:15:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: lazy load images in list items

Browse Source 
Assumes list items generally occur below the fold.

May increase Lighthouse scores.

See #1986
This commit is contained in:
George Cushen committed 2020-11-25 23:02:19 +00:00
1 parent 8c20b50361
commit 3a03b728de
4 files changed
+13 -5
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

wowchemy/layouts/partials/li_card.html
+3 -1
View File
@@ -43,9 +43,11 @@
{{ $resource := ($item.Resources.ByType "image").GetMatch "*featured*" }}
{{ $anchor := $item.Params.image.focal_point | default "Smart" }}
{{ with $resource }}
{{ $filters := slice (images.GaussianBlur 21) (images.Pixelate 8) }}
{{ $image := .Fill (printf "808x455 %s" $anchor) }}
{{ $image_lq := (.Fill (printf "808x455 %s q1" $anchor)).Filter $filters }}
<a href="{{ $item.RelPermalink }}">
<div class="img-hover-zoom"><img src="{{ $image.RelPermalink }}" class="article-banner" alt="{{ $item.Title }}"></div>
<div class="img-hover-zoom"><img src="{{ $image_lq.RelPermalink }}" data-src="{{ $image.RelPermalink }}" class="article-banner lazyload" alt="{{ $item.Title }}"></div>
</a>
{{end}}
wowchemy/layouts/partials/li_compact.html
+3 -1
View File
@@ -78,9 +78,11 @@
<div class="ml-3">
{{ $resource := ($item.Resources.ByType "image").GetMatch "*featured*" }}
{{ with $resource }}
{{ $filters := slice (images.GaussianBlur 21) (images.Pixelate 8) }}
{{ $image := .Resize "150x" }}
{{ $image_lq := (.Resize "150x q1").Filter $filters }}
<a href="{{$link}}" {{ $target | safeHTMLAttr }}>
<img src="{{ $image.RelPermalink }}" alt="{{ $item.Title }}">
<img src="{{ $image_lq.RelPermalink }}" data-src="{{ $image.RelPermalink }}" alt="{{ $item.Title }}" class="lazyload">
</a>
{{end}}
</div>
wowchemy/layouts/partials/portfolio_li_card.html
+4 -2
View File
@@ -20,9 +20,11 @@
<div class="project-card project-item isotope-item {{ $js_tag_classes | safeHTMLAttr }}">
<div class="card">
{{ with $resource }}
{{ $image := .Resize (printf "550x q90 %s") }}
{{ $filters := slice (images.GaussianBlur 21) (images.Pixelate 8) }}
{{ $image := .Resize "550x" }}
{{ $image_lq := (.Resize "550x q1").Filter $filters }}
<a href="{{ $link }}" {{ $target | safeHTMLAttr }} class="card-image hover-overlay">
<img src="{{ $image.RelPermalink }}" alt="{{ $item.Title }}" class="img-responsive">
<img src="{{ $image_lq.RelPermalink }}" data-src="{{ $image.RelPermalink }}" alt="{{ $item.Title }}" class="img-responsive lazyload">
</a>
{{ end }}
<div class="card-text">
wowchemy/layouts/partials/portfolio_li_showcase.html
+3 -1
View File
@@ -51,9 +51,11 @@
<div class="col-12 col-md-6 order-first {{$order}}">
{{ $resource := ($item.Resources.ByType "image").GetMatch "*featured*" }}
{{ with $resource }}
{{ $filters := slice (images.GaussianBlur 21) (images.Pixelate 8) }}
{{ $image := .Resize "540x" }}
{{ $image_lq := (.Resize "540x q1").Filter $filters }}
{{if $do_link}}<a href="{{ $link }}" {{ $target | safeHTMLAttr }}>{{end}}
<img src="{{ $image.RelPermalink }}" alt="{{ $item.Title }}">
<img src="{{ $image_lq.RelPermalink }}" data-src="{{ $image.RelPermalink }}" alt="{{ $item.Title }}" class="lazyload">
{{if $do_link}}</a>{{end}}
{{end}}
</div>