blog/themes/stack/layouts/_partials/article-list/tile.html
2026-07-31 15:38:57 +08:00

37 lines
1.4 KiB
HTML

{{ $image := partial "helper/image" (dict "Image" .Params.image "Resources" .Resources "Context" .) }}
<article class="{{ if $image }}has-image{{ end }}">
<a href="{{ .RelPermalink }}">
{{ if $image }}
<div class="article-image">
{{ partial "helper/thumbnail-image" (dict
"Resource" $image.Resource
"Width" 250
"Height" 150
"Resize" .Site.Params.ImageProcessing.Thumbnail.Enabled
"Attributes" (dict
"src" $image.Permalink
"alt" (printf "Featured image of post %s" .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">
{{- .Title -}}
</h2>
</div>
</a>
</article>