Merge pull request #2877 from jin-li/feature/thumbnail-aspect-ratio-global

feat: Allow configurable thumbnail aspect ratio for article cards
This commit is contained in:
Nuno C. authored and GitHub committed 2026-04-13 22:43:18 +01:00
commit 8eb1f330c5
6 files changed
+22 -7

No files matched your search

+4 -2
View File
@@ -4716,10 +4716,12 @@ pre {
}
.thumbnail_card {
min-width: 300px;
height: 200px;
aspect-ratio: var(--thumbnail-aspect-ratio, 1.5);
height: auto;
}
.thumbnail_card_related {
height: 150px;
aspect-ratio: var(--thumbnail-aspect-ratio, 1.5);
height: auto;
}
.thumbnail {
width: 300px;
+4 -2
View File
@@ -183,11 +183,13 @@ pre {
.thumbnail_card {
min-width: 300px;
height: 200px;
aspect-ratio: var(--thumbnail-aspect-ratio, 1.5);
height: auto;
}
.thumbnail_card_related {
height: 150px;
aspect-ratio: var(--thumbnail-aspect-ratio, 1.5);
height: auto;
}
.thumbnail {
+2
View File
@@ -29,6 +29,8 @@ disableTextInHeader = false
# defaultFeaturedImage = "IMAGE.jpg" # used as default for featured images in all articles
# defaultSocialImage = "/android-chrome-512x512.png" # used as default for social media sharing (Open Graph and Twitter)
hotlinkFeatureImage = false
# Thumbnail aspect ratio as a number (e.g., "1.5", "1.0", "1.777")
# thumbnailAspectRatio = "1.5"
# imagePosition = "50% 50%"
# highlightCurrentMenuArea = true
@@ -6,6 +6,9 @@
{{ $page := .Page }}
{{ $featured := "" }}
{{ $featuredURL := "" }}
{{ $thumbnailAspectRatio := site.Params.thumbnailAspectRatio | default "1.5" }}
{{ $thumbnailAspectRatio = replaceRE "[^0-9.]" "" $thumbnailAspectRatio }}
{{ if eq $thumbnailAspectRatio "" }}{{ $thumbnailAspectRatio = "1.5" }}{{ end }}
{{/* frontmatter */}}
{{ with $page }}
{{ with .Params.featureimage }}
@@ -53,7 +56,7 @@
<article
class="article-link--related relative min-h-full min-w-full overflow-hidden rounded-lg border border-neutral-300 dark:border-neutral-600">
{{ with $featuredURL }}
<div class="flex-none relative overflow-hidden thumbnail_card_related">
<div class="flex-none relative overflow-hidden thumbnail_card_related" style="--thumbnail-aspect-ratio: {{ $thumbnailAspectRatio }}">
<img
src="{{ . }}"
role="presentation"
+4 -1
View File
@@ -8,6 +8,9 @@
{{ $page := .Page }}
{{ $featured := "" }}
{{ $featuredURL := "" }}
{{ $thumbnailAspectRatio := site.Params.thumbnailAspectRatio | default "1.5" }}
{{ $thumbnailAspectRatio = replaceRE "[^0-9.]" "" $thumbnailAspectRatio }}
{{ if eq $thumbnailAspectRatio "" }}{{ $thumbnailAspectRatio = "1.5" }}{{ end }}
{{ if not .Params.hideFeatureImage }}
{{/* frontmatter */}}
{{ with $page }}
@@ -57,7 +60,7 @@
<article
class="article-link--card relative min-h-full min-w-full overflow-hidden rounded-lg border border-neutral-300 dark:border-neutral-600">
{{ with $featuredURL }}
<div class="flex-none relative overflow-hidden thumbnail_card">
<div class="flex-none relative overflow-hidden thumbnail_card" style="--thumbnail-aspect-ratio: {{ $thumbnailAspectRatio }}">
<img
src="{{ . }}"
role="presentation"
+4 -1
View File
@@ -2,6 +2,9 @@
{{ $featured := "" }}
{{ $featuredURL := "" }}
{{ $thumbnailAspectRatio := site.Params.thumbnailAspectRatio | default "1.5" }}
{{ $thumbnailAspectRatio = replaceRE "[^0-9.]" "" $thumbnailAspectRatio }}
{{ if eq $thumbnailAspectRatio "" }}{{ $thumbnailAspectRatio = "1.5" }}{{ end }}
{{ with .Page.Params.featureimage }}
{{ if or (strings.HasPrefix . "http:") (strings.HasPrefix . "https:") }}
{{ $featured = resources.GetRemote . }}
@@ -28,7 +31,7 @@
<div class="min-w-full">
<div class="border-neutral-200 dark:border-neutral-700 border-2 rounded overflow-hidden shadow-2xl relative">
{{ with $featuredURL }}
<figure class="not-prose flex-none relative overflow-hidden thumbnail_card">
<figure class="not-prose flex-none relative overflow-hidden thumbnail_card" style="--thumbnail-aspect-ratio: {{ $thumbnailAspectRatio }}">
<img
src="{{ . }}"
alt="{{ $.Page.Title }}"