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>

layouts/_partials/article/components/header.html

@@ -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 }}