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