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:
@@ -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 }}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user