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:
@@ -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"
|
||||
|
||||
@@ -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"
|
||||
|
||||
@@ -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 }}"
|
||||
|
||||
Reference in New Issue
Block a user