22edce91ab
* 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>
37 lines
1.5 KiB
HTML
37 lines
1.5 KiB
HTML
{{ $image := partial "helper/image" (dict "Image" .context.Params.image "Resources" .context.Resources) }}
|
|
<article class="{{ if $image }}has-image{{ end }}">
|
|
<a href="{{ .context.RelPermalink }}">
|
|
{{ if $image }}
|
|
<div class="article-image">
|
|
{{ 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 }}
|
|
|
|
<div class="article-details"
|
|
{{- if and $image (reflect.IsImageResourceProcessable $image.Resource) -}}
|
|
{{- $colors := $image.Resource.Colors -}}
|
|
{{- if $colors -}}
|
|
{{- $vibrant := index $colors 0 -}}
|
|
{{- $darkMuted := index $colors 1 | default $vibrant -}}
|
|
style="background: linear-gradient(0deg, {{ $darkMuted }}80 0%, {{ $vibrant }}C0 100%);"
|
|
{{- end -}}
|
|
{{- end -}}
|
|
>
|
|
<h2 class="article-title">
|
|
{{- .context.Title -}}
|
|
</h2>
|
|
</div>
|
|
</a>
|
|
</article> |