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>
2026-03-04 23:32:33 +01:00
parent 78800c7379
commit 22edce91ab
10 changed files with 143 additions and 33 deletions
@@ -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 -}}>