Skip to content

Commit 22edce9

Browse files
CaiJimmyCopilot
CaiJimmy
and
Copilot
authored
feat: add responsive image support (#1283)
* feat: create responsive-image helper * feat: new responsive-image helper * feat: Implement responsive image rendering in page content using a new partial and configure image processing widths. * feat: add `sizes` attribute for enhanced image responsiveness * feat: add responsive image to page header too * Check for `.Enabled` before processing image * style: remove wrong article-list--tile width and height * feat: add `helper/thumbnail-image` for responsive thumbnails * feat: enable content image processing and update responsive image `sizes` attributes for improved display. * fix: get src from the attributes so external image can work correctly * fix: add missing data-title-escaped * Update layouts/_partials/article/components/header.html Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * feat: remove default `true` for thumbnail resize parameter. * Update layouts/_markup/render-image.html Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * Update layouts/_partials/helper/thumbnail-image.html Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * add original width and height to thumbnail pictures, for case that resize is not enabled * Update layouts/_partials/helper/thumbnail-image.html Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> --------- Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
1 parent 78800c7 commit 22edce9

10 files changed

Lines changed: 143 additions & 33 deletions

File tree

‎assets/scss/partials/article.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -207,8 +207,8 @@
207207
border-radius: var(--card-border-radius);
208208
overflow: hidden;
209209
position: relative;
210-
height: 350px;
211210
width: 250px;
211+
height: 150px;
212212
box-shadow: var(--shadow-l1);
213213
transition: box-shadow 0.3s ease;
214214
background-color: var(--card-background);

‎assets/scss/partials/layout/article.scss‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -242,8 +242,6 @@
242242
margin-right: 15px;
243243
flex-shrink: 0;
244244
overflow: hidden;
245-
width: 250px;
246-
height: 150px;
247245

248246
.article-title {
249247
font-size: 1.8rem;

‎assets/scss/partials/layout/list.scss‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -56,8 +56,6 @@
5656
width: max-content;
5757

5858
article {
59-
width: 250px;
60-
height: 150px;
6159
margin-right: 20px;
6260
flex-shrink: 0;
6361

‎config/_default/params.toml‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -75,11 +75,13 @@ SortBy = "default"
7575
toggle = true
7676
default = "auto"
7777

78-
[imageProcessing.cover]
79-
enabled = true
78+
[imageProcessing]
79+
[imageProcessing.content]
80+
widths = [800, 1600, 2400]
81+
enabled = true
8082

81-
[imageProcessing.content]
82-
enabled = true
83+
[imageProcessing.thumbnail]
84+
enabled = true
8385

8486
# GDPR Cookie Consent Configuration
8587
# When enabled, analytics and functional cookies require user consent

‎layouts/_markup/render-image.html‎

Lines changed: 24 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -2,23 +2,29 @@
22
{{- $alt := .PlainText | safeHTML -}}
33
{{- $title := .Title | markdownify -}}
44

5-
{{/* SVG and external images won't work with gallery layout, because their width and height attributes are unknown */}}
5+
{{/* There are some types of images that don't have width and height attributes, such as SVG */}}
66
{{- $galleryImage := and $image.Height $image.Width -}}
77

8-
<img src="{{ $image.Permalink }}"
9-
{{ with $image.Width }}width="{{ . }}"{{ end }}
10-
{{ with $image.Height }}height="{{ . }}"{{ end }}
11-
loading="lazy"
12-
{{ with $alt }}
13-
alt="{{ . }}"
14-
{{ end }}
15-
{{ with $title }}
16-
title="{{ . }}"
17-
data-title-escaped="{{ . | htmlEscape }}"
18-
{{ end }}
19-
{{ if $galleryImage }}
20-
class="gallery-image"
21-
data-flex-grow="{{ div (mul $image.Width 100) $image.Height }}"
22-
data-flex-basis="{{ div (mul $image.Width 240) $image.Height }}px"
23-
{{ end }}
24-
>
8+
{{- $attributes := dict -}}
9+
{{- if $galleryImage -}}
10+
{{- $attributes = (dict
11+
"data-flex-grow" (div (mul $image.Width 100) $image.Height)
12+
"data-flex-basis" (printf "%dpx" (div (mul $image.Width 240) $image.Height))
13+
) -}}
14+
{{- end -}}
15+
16+
{{ partial "helper/responsive-image" (dict
17+
"Resource" $image.Resource
18+
"Widths" (cond .Page.Site.Params.ImageProcessing.Content.Enabled .Page.Site.Params.ImageProcessing.Content.Widths nil)
19+
"Attributes" (merge $attributes (dict
20+
"src" $image.Permalink
21+
"width" $image.Width
22+
"height" $image.Height
23+
"alt" $alt
24+
"title" $title
25+
"data-title-escaped" ($title | htmlEscape)
26+
"class" (cond $galleryImage "gallery-image" "")
27+
"loading" "lazy"
28+
"sizes" "(max-width: 767px) calc(100vw - 30px), (max-width: 1023px) 700px, (max-width: 1279px) 950px, 1232px"
29+
))
30+
) }}

‎layouts/_partials/article-list/compact.html‎

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,19 @@ <h2 class="article-title">
1414
{{- $image := partial "helper/image" (dict "Image" .Params.image "Resources" .Resources) -}}
1515
{{ if $image }}
1616
<div class="article-image">
17-
<img src="{{ $image.Permalink }}" width="{{ $image.Width }}" height="{{ $image.Height }}" alt="{{ .Title }}"
18-
loading="lazy">
17+
{{ partial "helper/thumbnail-image" (dict
18+
"Resource" $image.Resource
19+
"Width" 60
20+
"Height" 60
21+
"Resize" .Site.Params.ImageProcessing.Thumbnail.Enabled
22+
"Attributes" (dict
23+
"src" $image.Permalink
24+
"alt" .Title
25+
"loading" "lazy"
26+
"width" $image.Width
27+
"height" $image.Height
28+
)
29+
) }}
1930
</div>
2031
{{ end }}
2132
</a>

‎layouts/_partials/article-list/tile.html‎

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,19 @@
33
<a href="{{ .context.RelPermalink }}">
44
{{ if $image }}
55
<div class="article-image">
6-
<img src="{{ $image.Permalink }}" width="{{ $image.Width }}" height="{{ $image.Height }}" loading="lazy"
7-
alt="Featured image of post {{ .context.Title }}">
6+
{{ partial "helper/thumbnail-image" (dict
7+
"Resource" $image.Resource
8+
"Width" 250
9+
"Height" 150
10+
"Resize" .context.Site.Params.ImageProcessing.Thumbnail.Enabled
11+
"Attributes" (dict
12+
"src" $image.Permalink
13+
"alt" (printf "Featured image of post %s" .context.Title)
14+
"loading" "lazy"
15+
"width" $image.Width
16+
"height" $image.Height
17+
)
18+
) }}
819
</div>
920
{{ end }}
1021

‎layouts/_partials/article/components/header.html‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,18 @@
55
{{ if $image }}
66
<div class="article-image">
77
<a href="{{ $Page.RelPermalink }}">
8-
<img src="{{ $image.Permalink }}" width="{{ $image.Width }}" height="{{ $image.Height }}" loading="lazy"
9-
alt="Featured image of post {{ $Page.Title }}" />
8+
{{ partial "helper/responsive-image" (dict
9+
"Resource" $image.Resource
10+
"Widths" (cond $Page.Site.Params.ImageProcessing.Content.Enabled $Page.Site.Params.ImageProcessing.Content.Widths nil)
11+
"Attributes" (dict
12+
"src" $image.Permalink
13+
"width" $image.Width
14+
"height" $image.Height
15+
"alt" (printf "Featured image of post %s" $Page.Title)
16+
"loading" "lazy"
17+
"sizes" "(max-width: 767px) calc(100vw - 30px), (max-width: 1023px) 700px, (max-width: 1279px) 950px, 1232px"
18+
)
19+
) }}
1020
</a>
1121
</div>
1222
{{ end }}

‎layouts/_partials/helper/responsive-image.html‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
{{- /*
2+
Params:
3+
Resource: Hugo image resource object (Optional, for processing)
4+
Widths: Slice of widths to generate for srcset
5+
Attributes: Map of HTML attributes for the <img> tag
6+
*/ -}}
7+
8+
{{- $resource := .Resource -}}
9+
{{- $widths := .Widths -}}
10+
{{- $attributes := .Attributes | default dict -}}
11+
12+
{{/* Generate srcset if Resource and Widths are provided */}}
13+
{{- if and $widths $resource (reflect.IsImageResourceProcessable $resource) -}}
14+
{{- $srcset := slice -}}
15+
{{- range $widths -}}
16+
{{- if lt . $resource.Width -}}
17+
{{- $resized := $resource.Resize (printf "%dx" .) -}}
18+
{{- $srcset = $srcset | append (printf "%s %dw" $resized.RelPermalink .) -}}
19+
{{- end -}}
20+
{{- end -}}
21+
22+
{{- if gt (len $srcset) 0 -}}
23+
{{- $permalink := default $resource.RelPermalink (index $attributes "src") -}}
24+
{{- $srcset = $srcset | append (printf "%s %dw" $permalink $resource.Width) -}}
25+
{{- $attributes = merge $attributes (dict "srcset" (delimit $srcset ", ")) -}}
26+
{{- end -}}
27+
{{- end -}}
28+
29+
<img {{- range $k, $v := $attributes -}}
30+
{{- if $v -}}
31+
{{- printf " %s=%q" (lower $k) (printf "%v" $v) | safeHTMLAttr -}}
32+
{{- end -}}
33+
{{- end -}}>

‎layouts/_partials/helper/thumbnail-image.html‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
{{- /*
2+
Params:
3+
Resource: Hugo image resource object (Optional, for processing)
4+
Width: Image width (Required)
5+
Height: Image height (Required)
6+
Resize: Whether to perform resize (Optional, default: false)
7+
Attributes: Map of HTML attributes for the <img> tag
8+
*/ -}}
9+
10+
{{- $resource := .Resource -}}
11+
{{- $width := .Width -}}
12+
{{- $height := .Height -}}
13+
{{- $resize := .Resize -}}
14+
{{- $attributes := .Attributes | default dict -}}
15+
16+
{{- if and $resize $resource (reflect.IsImageResourceProcessable $resource) $width $height -}}
17+
{{/* Create thumbnail with 1x/2x descriptors */}}
18+
{{- $srcset := slice -}}
19+
{{- range (slice 1 2) -}}
20+
{{- $w := mul $width . -}}
21+
{{- $h := mul $height . -}}
22+
{{- if and (le $w $resource.Width) (le $h $resource.Height) -}}
23+
{{- $resized := $resource.Fill (printf "%dx%d" $w $h) -}}
24+
{{- $srcset = $srcset | append (printf "%s %dx" $resized.RelPermalink .) -}}
25+
26+
{{- if eq . 1 -}}
27+
{{- $attributes = merge $attributes (dict "src" $resized.RelPermalink) -}}
28+
{{- end -}}
29+
{{- end -}}
30+
{{- end -}}
31+
32+
{{- if gt (len $srcset) 0 -}}
33+
{{- $attributes = merge $attributes (dict "width" $width "height" $height "srcset" (delimit $srcset ", ")) -}}
34+
{{- end -}}
35+
{{- end -}}
36+
37+
<img {{- range $k, $v := $attributes -}}
38+
{{- if $v -}}
39+
{{- printf " %s=%q" (lower $k) (printf "%v" $v) | safeHTMLAttr -}}
40+
{{- end -}}
41+
{{- end -}}>

0 commit comments

Comments
 (0)