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>
This commit is contained in:
Jimmy
@@ -2,23 +2,29 @@
|
||||
{{- $alt := .PlainText | safeHTML -}}
|
||||
{{- $title := .Title | markdownify -}}
|
||||
|
||||
{{/* SVG and external images won't work with gallery layout, because their width and height attributes are unknown */}}
|
||||
{{/* There are some types of images that don't have width and height attributes, such as SVG */}}
|
||||
{{- $galleryImage := and $image.Height $image.Width -}}
|
||||
|
||||
<img src="{{ $image.Permalink }}"
|
||||
{{ with $image.Width }}width="{{ . }}"{{ end }}
|
||||
{{ with $image.Height }}height="{{ . }}"{{ end }}
|
||||
loading="lazy"
|
||||
{{ with $alt }}
|
||||
alt="{{ . }}"
|
||||
{{ end }}
|
||||
{{ with $title }}
|
||||
title="{{ . }}"
|
||||
data-title-escaped="{{ . | htmlEscape }}"
|
||||
{{ end }}
|
||||
{{ if $galleryImage }}
|
||||
class="gallery-image"
|
||||
data-flex-grow="{{ div (mul $image.Width 100) $image.Height }}"
|
||||
data-flex-basis="{{ div (mul $image.Width 240) $image.Height }}px"
|
||||
{{ end }}
|
||||
>
|
||||
{{- $attributes := dict -}}
|
||||
{{- if $galleryImage -}}
|
||||
{{- $attributes = (dict
|
||||
"data-flex-grow" (div (mul $image.Width 100) $image.Height)
|
||||
"data-flex-basis" (printf "%dpx" (div (mul $image.Width 240) $image.Height))
|
||||
) -}}
|
||||
{{- end -}}
|
||||
|
||||
{{ partial "helper/responsive-image" (dict
|
||||
"Resource" $image.Resource
|
||||
"Widths" (cond .Page.Site.Params.ImageProcessing.Content.Enabled .Page.Site.Params.ImageProcessing.Content.Widths nil)
|
||||
"Attributes" (merge $attributes (dict
|
||||
"src" $image.Permalink
|
||||
"width" $image.Width
|
||||
"height" $image.Height
|
||||
"alt" $alt
|
||||
"title" $title
|
||||
"data-title-escaped" ($title | htmlEscape)
|
||||
"class" (cond $galleryImage "gallery-image" "")
|
||||
"loading" "lazy"
|
||||
"sizes" "(max-width: 767px) calc(100vw - 30px), (max-width: 1023px) 700px, (max-width: 1279px) 950px, 1232px"
|
||||
))
|
||||
) }}
|
||||
@@ -14,8 +14,19 @@
|
||||
{{- $image := partial "helper/image" (dict "Image" .Params.image "Resources" .Resources) -}}
|
||||
{{ if $image }}
|
||||
<div class="article-image">
|
||||
<img src="{{ $image.Permalink }}" width="{{ $image.Width }}" height="{{ $image.Height }}" alt="{{ .Title }}"
|
||||
loading="lazy">
|
||||
{{ partial "helper/thumbnail-image" (dict
|
||||
"Resource" $image.Resource
|
||||
"Width" 60
|
||||
"Height" 60
|
||||
"Resize" .Site.Params.ImageProcessing.Thumbnail.Enabled
|
||||
"Attributes" (dict
|
||||
"src" $image.Permalink
|
||||
"alt" .Title
|
||||
"loading" "lazy"
|
||||
"width" $image.Width
|
||||
"height" $image.Height
|
||||
)
|
||||
) }}
|
||||
</div>
|
||||
{{ end }}
|
||||
</a>
|
||||
|
||||
@@ -3,8 +3,19 @@
|
||||
<a href="{{ .context.RelPermalink }}">
|
||||
{{ if $image }}
|
||||
<div class="article-image">
|
||||
<img src="{{ $image.Permalink }}" width="{{ $image.Width }}" height="{{ $image.Height }}" loading="lazy"
|
||||
alt="Featured image of post {{ .context.Title }}">
|
||||
{{ partial "helper/thumbnail-image" (dict
|
||||
"Resource" $image.Resource
|
||||
"Width" 250
|
||||
"Height" 150
|
||||
"Resize" .context.Site.Params.ImageProcessing.Thumbnail.Enabled
|
||||
"Attributes" (dict
|
||||
"src" $image.Permalink
|
||||
"alt" (printf "Featured image of post %s" .context.Title)
|
||||
"loading" "lazy"
|
||||
"width" $image.Width
|
||||
"height" $image.Height
|
||||
)
|
||||
) }}
|
||||
</div>
|
||||
{{ end }}
|
||||
|
||||
|
||||
@@ -5,8 +5,18 @@
|
||||
{{ if $image }}
|
||||
<div class="article-image">
|
||||
<a href="{{ $Page.RelPermalink }}">
|
||||
<img src="{{ $image.Permalink }}" width="{{ $image.Width }}" height="{{ $image.Height }}" loading="lazy"
|
||||
alt="Featured image of post {{ $Page.Title }}" />
|
||||
{{ partial "helper/responsive-image" (dict
|
||||
"Resource" $image.Resource
|
||||
"Widths" (cond $Page.Site.Params.ImageProcessing.Content.Enabled $Page.Site.Params.ImageProcessing.Content.Widths nil)
|
||||
"Attributes" (dict
|
||||
"src" $image.Permalink
|
||||
"width" $image.Width
|
||||
"height" $image.Height
|
||||
"alt" (printf "Featured image of post %s" $Page.Title)
|
||||
"loading" "lazy"
|
||||
"sizes" "(max-width: 767px) calc(100vw - 30px), (max-width: 1023px) 700px, (max-width: 1279px) 950px, 1232px"
|
||||
)
|
||||
) }}
|
||||
</a>
|
||||
</div>
|
||||
{{ end }}
|
||||
|
||||
@@ -0,0 +1,33 @@
|
||||
{{- /*
|
||||
Params:
|
||||
Resource: Hugo image resource object (Optional, for processing)
|
||||
Widths: Slice of widths to generate for srcset
|
||||
Attributes: Map of HTML attributes for the <img> tag
|
||||
*/ -}}
|
||||
|
||||
{{- $resource := .Resource -}}
|
||||
{{- $widths := .Widths -}}
|
||||
{{- $attributes := .Attributes | default dict -}}
|
||||
|
||||
{{/* Generate srcset if Resource and Widths are provided */}}
|
||||
{{- if and $widths $resource (reflect.IsImageResourceProcessable $resource) -}}
|
||||
{{- $srcset := slice -}}
|
||||
{{- range $widths -}}
|
||||
{{- if lt . $resource.Width -}}
|
||||
{{- $resized := $resource.Resize (printf "%dx" .) -}}
|
||||
{{- $srcset = $srcset | append (printf "%s %dw" $resized.RelPermalink .) -}}
|
||||
{{- end -}}
|
||||
{{- end -}}
|
||||
|
||||
{{- if gt (len $srcset) 0 -}}
|
||||
{{- $permalink := default $resource.RelPermalink (index $attributes "src") -}}
|
||||
{{- $srcset = $srcset | append (printf "%s %dw" $permalink $resource.Width) -}}
|
||||
{{- $attributes = merge $attributes (dict "srcset" (delimit $srcset ", ")) -}}
|
||||
{{- end -}}
|
||||
{{- end -}}
|
||||
|
||||
<img {{- range $k, $v := $attributes -}}
|
||||
{{- if $v -}}
|
||||
{{- printf " %s=%q" (lower $k) (printf "%v" $v) | safeHTMLAttr -}}
|
||||
{{- end -}}
|
||||
{{- end -}}>
|
||||
@@ -0,0 +1,41 @@
|
||||
{{- /*
|
||||
Params:
|
||||
Resource: Hugo image resource object (Optional, for processing)
|
||||
Width: Image width (Required)
|
||||
Height: Image height (Required)
|
||||
Resize: Whether to perform resize (Optional, default: false)
|
||||
Attributes: Map of HTML attributes for the <img> tag
|
||||
*/ -}}
|
||||
|
||||
{{- $resource := .Resource -}}
|
||||
{{- $width := .Width -}}
|
||||
{{- $height := .Height -}}
|
||||
{{- $resize := .Resize -}}
|
||||
{{- $attributes := .Attributes | default dict -}}
|
||||
|
||||
{{- if and $resize $resource (reflect.IsImageResourceProcessable $resource) $width $height -}}
|
||||
{{/* Create thumbnail with 1x/2x descriptors */}}
|
||||
{{- $srcset := slice -}}
|
||||
{{- range (slice 1 2) -}}
|
||||
{{- $w := mul $width . -}}
|
||||
{{- $h := mul $height . -}}
|
||||
{{- if and (le $w $resource.Width) (le $h $resource.Height) -}}
|
||||
{{- $resized := $resource.Fill (printf "%dx%d" $w $h) -}}
|
||||
{{- $srcset = $srcset | append (printf "%s %dx" $resized.RelPermalink .) -}}
|
||||
|
||||
{{- if eq . 1 -}}
|
||||
{{- $attributes = merge $attributes (dict "src" $resized.RelPermalink) -}}
|
||||
{{- end -}}
|
||||
{{- end -}}
|
||||
{{- end -}}
|
||||
|
||||
{{- if gt (len $srcset) 0 -}}
|
||||
{{- $attributes = merge $attributes (dict "width" $width "height" $height "srcset" (delimit $srcset ", ")) -}}
|
||||
{{- end -}}
|
||||
{{- end -}}
|
||||
|
||||
<img {{- range $k, $v := $attributes -}}
|
||||
{{- if $v -}}
|
||||
{{- printf " %s=%q" (lower $k) (printf "%v" $v) | safeHTMLAttr -}}
|
||||
{{- end -}}
|
||||
{{- end -}}>
|
||||
Reference in New Issue
Block a user