Skip to content

Commit 63ae17c

Browse files
author
Ben Zörb
authored
Merge pull request #42 from jungvonmatt/fix/responsive-image-preload
fix(media): prevents unwanted image preloads
2 parents d32e1d4 + 0c9413c commit 63ae17c

File tree

7 files changed

+249
-90
lines changed

7 files changed

+249
-90
lines changed

‎hugo-modules/core/utils/asset/image.html‎

Lines changed: 9 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -19,65 +19,17 @@
1919
{{- $options := .options | default dict -}}
2020
{{- $params := (merge $context $options) -}}
2121
{{- $mime_type := $params.mime_type -}}
22-
{{- $title := $params.title -}}
23-
{{- $url := $params.url -}}
24-
{{- $width := $params.width -}}
25-
{{- $height := $params.height -}}
26-
{{- $derivatives := $params.derivatives -}}
27-
{{- $alt := (or $params.alt $params.description) | default "" -}}
2822
{{- $class_name := $params.class_name -}}
29-
{{- $decoding := $params.decoding | default "async" -}}
30-
{{- $loading := cond (eq $params.lazy true) "lazy" ($params.loading | default false) -}}
31-
{{- $ratio := $params.ratio -}}
32-
{{- $sizes := $params.sizes -}}
33-
{{- $preload := $params.preload | default false -}}
3423

35-
{{- $image_attributes := partialCached "utils/html/attribute" (dict
36-
"loading" $loading
37-
"decoding" $decoding
38-
) $params -}}
3924
{{- if in $mime_type "image" -}}
40-
<picture{{ with $class_name }} class="{{- . -}}"{{ end }}>
41-
{{- with $derivatives -}}
42-
{{- $data := (index $derivatives "original") -}}
43-
{{- with $ratio -}}
44-
{{- $data = (or (index $derivatives $ratio) (index $derivatives "original")) -}}
45-
{{- end -}}
46-
{{- with $data -}}
47-
{{- $srcsets := .srcsets -}}
48-
{{- $local_sizes := (or $sizes .sizes) -}}
49-
{{- $src := .src -}}
50-
{{- $width := .width -}}
51-
{{- $height := .height -}}
52-
{{- range $srcsets -}}
53-
{{ $srcset := .srcset | default "" }}
54-
{{ $type := .type | default ""}}
55-
<source sizes="{{- $local_sizes -}}" srcset="{{- $srcset -}}" type="{{- $type -}}">
56-
{{- $preload_attr := (dict
57-
"as" "image"
58-
"imagesizes" $local_sizes
59-
"imagesrcset" $srcset
60-
"type" $type
61-
) -}}
62-
{{- if and $preload (eq $type "image/avif") (not (in ($globals.Scratch.Get "preload") $preload_attr)) -}}
63-
{{- $globals.Scratch.Add "preload" (slice $preload_attr) -}}
64-
{{- end -}}
65-
{{- end -}}
66-
<img src="{{- $src -}}" width="{{- $width -}}" height="{{- $height -}}" {{ $image_attributes }} alt="{{- $alt -}}"{{ with $params.preload }} fetchpriority="high"{{ end }}>
67-
{{- end -}}
68-
{{- else -}}
69-
{{- with $url -}}
70-
{{- $src := $params.src | default (cond (hasPrefix . "//") (print "https:" .) .) -}}
71-
<img src="{{- $src -}}" width="{{- $width -}}" height="{{- $height -}}" {{ $image_attributes }} alt="{{- $alt -}}"{{ with $params.preload }} fetchpriority="high"{{ end }}>
72-
{{- $preload_attr := (dict
73-
"as" "image"
74-
"href" $src
75-
"type" $mime_type
76-
) -}}
77-
{{- if and $preload (not (in ($globals.Scratch.Get "preload") $preload_attr)) -}}
78-
{{- $globals.Scratch.Add "preload" (slice $preload_attr) -}}
79-
{{- end -}}
80-
{{- end -}}
81-
{{- end -}}
25+
<picture {{- with $class_name }} class="{{- . -}}"{{ end }}>
26+
{{- partialCached "utils/asset/image/sources" (dict
27+
"globals" $globals
28+
"context" $params
29+
) $params -}}
30+
{{- partialCached "utils/asset/image/img" (dict
31+
"globals" $globals
32+
"context" $params
33+
) $params -}}
8234
</picture>
8335
{{- end -}}

‎hugo-modules/core/utils/asset/image/img.html‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
{{/*
2+
utils/asset/image
3+
Render Contentful asset (image/...). Uses data from cssg-plugin-assets if available.
4+
5+
@example - Go Template
6+
{{- partial "utils/asset/image" (dict
7+
"context" $image
8+
"options" (dict
9+
"sizes" "(max-width: 768px) 100vw, 768px"
10+
"alt" "Alt text"
11+
"class_name" "c-image"
12+
"decoding" "auto"
13+
"lazy" true
14+
)
15+
) -}}
16+
*/}}
17+
{{- $globals := .globals -}}
18+
{{- $context := .context | default dict -}}
19+
{{- $options := .options | default dict -}}
20+
{{- $params := (merge $context $options) -}}
21+
{{- $mime_type := $params.mime_type -}}
22+
{{- $title := $params.title -}}
23+
{{- $url := $params.url -}}
24+
{{- $width := $params.width -}}
25+
{{- $height := $params.height -}}
26+
{{- $derivatives := $params.derivatives -}}
27+
{{- $alt := (or $params.alt $params.description) | default "" -}}
28+
{{- $class_name := $params.class_name -}}
29+
{{- $decoding := $params.decoding | default "async" -}}
30+
{{- $loading := cond (eq $params.lazy true) "lazy" ($params.loading | default false) -}}
31+
{{- $ratio := $params.ratio -}}
32+
{{- $sizes := $params.sizes -}}
33+
{{- $media := $params.media -}}
34+
{{- $preload := $params.preload | default false -}}
35+
36+
{{- $image_attributes := partialCached "utils/html/attribute" (dict
37+
"loading" $loading
38+
"decoding" $decoding
39+
) $params -}}
40+
41+
{{- if in $mime_type "image" -}}
42+
{{- with $derivatives -}}
43+
{{- $data := (index $derivatives "original") -}}
44+
{{- with $ratio -}}
45+
{{- $data = (or (index $derivatives $ratio) (index $derivatives "original")) -}}
46+
{{- end -}}
47+
{{- with $data -}}
48+
{{- $srcsets := .srcsets -}}
49+
{{- $local_sizes := (or $sizes .sizes) -}}
50+
{{- $src := .src -}}
51+
{{- $width := .width -}}
52+
{{- $height := .height -}}
53+
{{/* Preload hint is added in sources.html */}}
54+
<img src="{{- $src -}}" width="{{- $width -}}" height="{{- $height -}}" {{ $image_attributes }} alt="{{- $alt -}}"{{ with $params.preload }} fetchpriority="high"{{ end }}>
55+
{{- end -}}
56+
{{- else -}}
57+
{{- with $url -}}
58+
{{- $src := $params.src | default (cond (hasPrefix . "//") (print "https:" .) .) -}}
59+
<img src="{{- $src -}}" width="{{- $width -}}" height="{{- $height -}}" {{ $image_attributes }} alt="{{- $alt -}}"{{ with $params.preload }} fetchpriority="high"{{ end }}>
60+
{{/* Add preload hint here as we have no srcset available */}}
61+
{{- $preload_attr := (dict
62+
"as" "image"
63+
"href" $src
64+
"type" $mime_type
65+
"media" $media
66+
) -}}
67+
{{- if and $preload (not (in ($globals.Scratch.Get "preload") $preload_attr)) -}}
68+
{{- $globals.Scratch.Add "preload" (slice $preload_attr) -}}
69+
{{- end -}}
70+
{{- end -}}
71+
{{- end -}}
72+
{{- end -}}

‎hugo-modules/core/utils/asset/image/sources.html‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
{{/*
2+
utils/asset/image
3+
Render Contentful asset (image/...). Uses data from cssg-plugin-assets if available.
4+
5+
@example - Go Template
6+
{{- partial "utils/asset/image" (dict
7+
"context" $image
8+
"options" (dict
9+
"sizes" "(max-width: 768px) 100vw, 768px"
10+
"alt" "Alt text"
11+
"class_name" "c-image"
12+
"decoding" "auto"
13+
"lazy" true
14+
)
15+
) -}}
16+
*/}}
17+
{{- $globals := .globals -}}
18+
{{- $context := .context | default dict -}}
19+
{{- $options := .options | default dict -}}
20+
{{- $params := (merge $context $options) -}}
21+
{{- $mime_type := $params.mime_type -}}
22+
{{- $title := $params.title -}}
23+
{{- $url := $params.url -}}
24+
{{- $width := $params.width -}}
25+
{{- $height := $params.height -}}
26+
{{- $derivatives := $params.derivatives -}}
27+
{{- $alt := (or $params.alt $params.description) | default "" -}}
28+
{{- $class_name := $params.class_name -}}
29+
{{- $decoding := $params.decoding | default "async" -}}
30+
{{- $loading := cond (eq $params.lazy true) "lazy" ($params.loading | default false) -}}
31+
{{- $ratio := $params.ratio -}}
32+
{{- $sizes := $params.sizes -}}
33+
{{- $media := $params.media -}}
34+
{{- $preload := $params.preload | default false -}}
35+
36+
{{- $image_attributes := partialCached "utils/html/attribute" (dict
37+
"loading" $loading
38+
"decoding" $decoding
39+
) $params -}}
40+
41+
{{- if in $mime_type "image" -}}
42+
{{- with $derivatives -}}
43+
{{- $data := (index $derivatives "original") -}}
44+
{{- with $ratio -}}
45+
{{- $data = (or (index $derivatives $ratio) (index $derivatives "original")) -}}
46+
{{- end -}}
47+
{{- with $data -}}
48+
{{- $srcsets := .srcsets -}}
49+
{{- $local_sizes := (or $sizes .sizes) -}}
50+
{{- $src := .src -}}
51+
{{- $width := .width -}}
52+
{{- $height := .height -}}
53+
{{- range $srcsets -}}
54+
{{ $srcset := .srcset | default "" }}
55+
{{ $type := .type | default ""}}
56+
<source sizes="{{- $local_sizes -}}" srcset="{{- $srcset -}}" type="{{- $type -}}"{{ with $media}}media="{{ . }}"{{ end }}>
57+
{{- $preload_attr := (dict
58+
"as" "image"
59+
"imagesizes" $local_sizes
60+
"imagesrcset" $srcset
61+
"type" $type
62+
"media" $media
63+
) -}}
64+
{{- if and $preload (eq $type "image/avif") (not (in ($globals.Scratch.Get "preload") $preload_attr)) -}}
65+
{{- $globals.Scratch.Add "preload" (slice $preload_attr) -}}
66+
{{- end -}}
67+
{{- end -}}
68+
{{- end -}}
69+
{{- end -}}
70+
{{- end -}}

‎hugo-modules/core/utils/asset/video.html‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,8 +28,9 @@
2828
{{- $controls := $params.controls | default false -}}
2929
{{- $poster := $params.poster | default false -}}
3030
{{- $muted := (or $autoplay $params.muted) -}}
31-
{{- $loading := cond (eq $params.lazy true) "lazy" ($params.loading | default false) -}}
32-
{{- $preload := $params.preload | default false -}}
31+
{{- $loading := cond (eq $params.lazy true) "lazy" ($params.loading | default false) -}}
32+
{{- $preload := $params.preload | default false -}}
33+
{{- $media := $params.media -}}
3334

3435
{{- $attributes := partialCached "utils/html/attribute" (dict
3536
"loop" $loop
@@ -44,6 +45,7 @@
4445
{{- $preload_attr := (dict
4546
"as" "image"
4647
"href" $poster
48+
"media" $media
4749
) -}}
4850
{{- if and $preload $poster (not (in ($globals.Scratch.Get "preload") $preload)) -}}
4951
{{- $globals.Scratch.Add "preload" (slice $preload) -}}

‎templates/app/go.mod‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,3 +5,8 @@ go 1.17
55
replace github.com/jungvonmatt/wekit/templates/theme-default => ../../templates/theme-default
66

77
replace github.com/jungvonmatt/wekit/hugo-modules/core => ../../hugo-modules/core
8+
9+
require (
10+
github.com/jungvonmatt/wekit/hugo-modules/core v0.0.0-20220817063049-5415a6ed80a1 // indirect
11+
github.com/jungvonmatt/wekit/templates/theme-default v0.0.0-20220817063049-5415a6ed80a1 // indirect
12+
)

‎templates/theme-default/layouts/partials/components/c-image.html‎

Lines changed: 44 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -21,24 +21,51 @@
2121
{{- end -}}
2222
{{- end -}}
2323

24+
{{- $different_images := and $has_mobile $has_desktop -}}
25+
26+
2427
<figure class="c-image{{ range $modifier }} c-image--{{ . }}{{ end }}{{ with $class_name }} {{ . }}{{end}}">
25-
{{- with $image_mobile -}}
26-
{{- partial "utils/asset" (dict
27-
"globals" $globals
28-
"context" .
29-
"options" (merge $params (dict
30-
"class_name" (print "c-image__asset" (cond $has_desktop " md:u-hidden" "") )
31-
))
32-
) -}}
33-
{{- end -}}
34-
{{- with $image_desktop -}}
35-
{{- partial "utils/asset" (dict
36-
"globals" $globals
37-
"context" .
38-
"options" (merge $params (dict
39-
"class_name" (print "c-image__asset" (cond $has_mobile " -md:u-hidden" "") )
40-
))
41-
) -}}
28+
{{ if $different_images }}
29+
<picture class="c-image__asset">
30+
{{- partial "utils/asset/image/sources" (dict
31+
"globals" $globals
32+
"context" $image_mobile
33+
"options" (merge $params (dict
34+
"media" "(max-width: 767px)"
35+
))
36+
) -}}
37+
{{- partial "utils/asset/image/sources" (dict
38+
"globals" $globals
39+
"context" $image_desktop
40+
"options" (merge $params (dict
41+
"media" "(min-width: 768px)"
42+
))
43+
) -}}
44+
{{- partial "utils/asset/image/img" (dict
45+
"globals" $globals
46+
"context" $image_desktop
47+
"options" $params
48+
) -}}
49+
</picture>
50+
{{ else }}
51+
{{- with $image_mobile -}}
52+
{{- partial "utils/asset" (dict
53+
"globals" $globals
54+
"context" .
55+
"options" (merge $params (dict
56+
"class_name" (print "c-image__asset" (cond $has_desktop " md:u-hidden" "") )
57+
))
58+
) -}}
59+
{{- end -}}
60+
{{- with $image_desktop -}}
61+
{{- partial "utils/asset" (dict
62+
"globals" $globals
63+
"context" .
64+
"options" (merge $params (dict
65+
"class_name" (print "c-image__asset" (cond $has_mobile " -md:u-hidden" "") )
66+
))
67+
) -}}
68+
{{- end -}}
4269
{{- end -}}
4370
{{- with $caption -}}
4471
<figcaption>{{ . }}</figcaption>

‎templates/theme-default/layouts/partials/components/c-media.html‎

Lines changed: 45 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -10,31 +10,62 @@
1010
{{- $media := $params.media -}}
1111
{{- $caption := $params.caption -}}
1212

13-
{{- $media_mobile := or (index $params (print "media_" $mobile_ratio)) $media -}}
14-
{{- $media_desktop := or (index $params (print "media_" $desktop_ratio)) $media -}}
13+
{{- $media_mobile := or (index $params (print "media_" $mobile_ratio)) $media -}}
14+
{{- $media_desktop := or (index $params (print "media_" $desktop_ratio)) $media -}}
1515

1616
{{- $different_ratios := (ne $mobile_ratio $desktop_ratio) -}}
17+
{{- $only_img := and (hasPrefix ($media_mobile.mime_type | default "") "image") (hasPrefix ($media_desktop.mime_type | default "") "image") -}}
1718

1819
{{- with $media -}}
1920
<figure class="c-media{{ with $focus_area }} c-media-{{ . }}{{ end }}{{ range $modifier }} c-media--{{ . }}{{ end }}{{ with $class_name }} {{ . }}{{end}}">
20-
{{- partial "utils/asset" (dict
21-
"globals" $globals
22-
"context" $media_mobile
23-
"options" (merge $params (dict
24-
"class_name" (print "c-media__asset" (cond $different_ratios " md:u-hidden" "") )
25-
"ratio" $mobile_ratio
26-
))
27-
) -}}
28-
{{- if $different_ratios -}}
21+
{{- if or (not $only_img) (not $different_ratios) -}}
2922
{{- partial "utils/asset" (dict
3023
"globals" $globals
31-
"context" $media_desktop
24+
"context" $media_mobile
3225
"options" (merge $params (dict
33-
"class_name" (print "c-media__asset" (cond $different_ratios " -md:u-hidden" "") )
34-
"ratio" $desktop_ratio
26+
"class_name" (print "c-media__asset" (cond $different_ratios " md:u-hidden" "") )
27+
"ratio" $mobile_ratio
28+
"media" (cond $different_ratios "(max-width: 767px)" "")
3529
))
3630
) -}}
3731
{{- end -}}
32+
{{- if $different_ratios -}}
33+
{{- if $only_img -}}
34+
<picture class="c-media__asset">
35+
{{- partial "utils/asset/image/sources" (dict
36+
"globals" $globals
37+
"context" $media_mobile
38+
"options" (merge $params (dict
39+
"ratio" $mobile_ratio
40+
"media" "(max-width: 767px)"
41+
))
42+
) -}}
43+
{{- partial "utils/asset/image/sources" (dict
44+
"globals" $globals
45+
"context" $media_desktop
46+
"options" (merge $params (dict
47+
"ratio" $desktop_ratio
48+
"media" "(min-width: 768px)"
49+
))
50+
) -}}
51+
{{- partial "utils/asset/image/img" (dict
52+
"globals" $globals
53+
"context" $media_desktop
54+
"options" (merge $params (dict "ratio" $desktop_ratio))
55+
) -}}
56+
</picture>
57+
{{- else -}}
58+
{{- partial "utils/asset" (dict
59+
"globals" $globals
60+
"context" $media_desktop
61+
"options" (merge $params (dict
62+
"class_name" "c-media__asset -md:u-hidden" ""
63+
"ratio" $desktop_ratio
64+
"media" "(min-width: 768px)"
65+
))
66+
) -}}
67+
{{- end -}}
68+
{{- end -}}
3869
{{- with $caption -}}
3970
<figcaption>{{ . }}</figcaption>
4071
{{- end -}}

0 commit comments

Comments
 (0)