feat: global thumbnail aspect ratio configuration

- Add thumbnailAspectRatio site parameter (default '1.5')
- Use decimal values instead of fractions for Hugo compatibility
- Sanitize user input to extract only numeric characters
- Apply to article cards, related cards, and term cards
- Update both source and compiled CSS

Closes #2839
This commit is contained in:
jin-li committed 2026-03-29 14:27:09 +02:00
1 parent faea1bb046
commit a308a86365
6 files changed
+22 -7

No files matched your search

+4 -2
View File
@@ -4676,10 +4676,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 }}"