feat: improve feature image presentation

layouts/partials/article-link/_shortcode.html

@@ -34,6 +34,9 @@
 {{ $page := $target }}
 {{ $featured := "" }}
 {{ $featuredURL := "" }}
+{{ $featureImageHover := site.Params.list.featureImageHover | default false }}
+{{ if isset $target.Params "featureImageHover" }}{{ $featureImageHover = $target.Params.featureImageHover }}{{ end }}
+{{ $featureImagePosition := $target.Params.imagePositionFeature | default site.Params.imagePositionFeature | default site.Params.imagePosition }}
 {{ if not $target.Params.hideFeatureImage }}
   {{/* frontmatter */}}
   {{ with $page }}
@@ -86,15 +89,17 @@
 {{ end }}
 
 
-<article class="article-link--shortcode {{ $cardClasses }}">
+<article class="article-link--shortcode group {{ $cardClasses }}">
   {{ with $featuredURL }}
     <div class="flex-none relative overflow-hidden {{ $imgWrapperClasses }} thumbnail">
       <img
         src="{{ . }}"
-        role="presentation"
+        alt="{{ $target.Title }}"
         loading="lazy"
         decoding="async"
-        class="not-prose absolute inset-0 w-full h-full object-cover" />
+        fetchpriority="low"
+        class="not-prose absolute inset-0 h-full w-full object-cover transition duration-500 {{ if $featureImageHover }}group-hover:scale-105{{ end }}"
+        {{ with $featureImagePosition }}style="object-position: {{ . }};"{{ end }} />
     </div>
   {{ end }}
   <div class="{{ $cardContentClasses }}">

layouts/partials/article-link/card-related.html

@@ -9,6 +9,9 @@
 {{ $thumbnailAspectRatio := site.Params.thumbnailAspectRatio | default "1.5" }}
 {{ $thumbnailAspectRatio = replaceRE "[^0-9.]" "" $thumbnailAspectRatio }}
 {{ if eq $thumbnailAspectRatio "" }}{{ $thumbnailAspectRatio = "1.5" }}{{ end }}
+{{ $featureImageHover := site.Params.list.featureImageHover | default false }}
+{{ if isset .Params "featureImageHover" }}{{ $featureImageHover = .Params.featureImageHover }}{{ end }}
+{{ $featureImagePosition := .Params.imagePositionFeature | default site.Params.imagePositionFeature | default site.Params.imagePosition }}
 {{/* frontmatter */}}
 {{ with $page }}
   {{ $p := . }}
@@ -60,18 +63,19 @@
 
 
 <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 group 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"
       style="--thumbnail-aspect-ratio: {{ $thumbnailAspectRatio }}">
       <img
         src="{{ . }}"
-        role="presentation"
+        alt="{{ $page.Title }}"
         loading="lazy"
         decoding="async"
         fetchpriority="low"
-        class="not-prose absolute inset-0 w-full h-full object-cover" />
+        class="not-prose absolute inset-0 h-full w-full object-cover transition duration-500 {{ if $featureImageHover }}group-hover:scale-105{{ end }}"
+        {{ with $featureImagePosition }}style="object-position: {{ . }};"{{ end }} />
     </div>
   {{ end }}
   {{ if and .Draft .Site.Params.article.showDraftLabel }}

layouts/partials/article-link/card.html

@@ -11,6 +11,9 @@
 {{ $thumbnailAspectRatio := site.Params.thumbnailAspectRatio | default "1.5" }}
 {{ $thumbnailAspectRatio = replaceRE "[^0-9.]" "" $thumbnailAspectRatio }}
 {{ if eq $thumbnailAspectRatio "" }}{{ $thumbnailAspectRatio = "1.5" }}{{ end }}
+{{ $featureImageHover := site.Params.list.featureImageHover | default false }}
+{{ if isset .Params "featureImageHover" }}{{ $featureImageHover = .Params.featureImageHover }}{{ end }}
+{{ $featureImagePosition := .Params.imagePositionFeature | default site.Params.imagePositionFeature | default site.Params.imagePosition }}
 {{ if not .Params.hideFeatureImage }}
   {{/* frontmatter */}}
   {{ with $page }}
@@ -64,17 +67,19 @@
 
 
 <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 group 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"
       style="--thumbnail-aspect-ratio: {{ $thumbnailAspectRatio }}">
       <img
         src="{{ . }}"
-        role="presentation"
+        alt="{{ $page.Title }}"
         loading="lazy"
         decoding="async"
-        class="not-prose absolute inset-0 w-full h-full object-cover" />
+        fetchpriority="low"
+        class="not-prose absolute inset-0 h-full w-full object-cover transition duration-500 {{ if $featureImageHover }}group-hover:scale-105{{ end }}"
+        {{ with $featureImagePosition }}style="object-position: {{ . }};"{{ end }} />
     </div>
   {{ end }}
   {{ if and .Draft .Site.Params.article.showDraftLabel }}

layouts/partials/article-link/simple.html

@@ -27,6 +27,9 @@
 {{ $page := .Page }}
 {{ $featured := "" }}
 {{ $featuredURL := "" }}
+{{ $featureImageHover := site.Params.list.featureImageHover | default false }}
+{{ if isset .Params "featureImageHover" }}{{ $featureImageHover = .Params.featureImageHover }}{{ end }}
+{{ $featureImagePosition := .Params.imagePositionFeature | default site.Params.imagePositionFeature | default site.Params.imagePosition }}
 {{ if not .Params.hideFeatureImage }}
   {{/* frontmatter */}}
   {{ with $page }}
@@ -79,15 +82,17 @@
 {{ end }}
 
 
-<article class="article-link--simple {{ $cardClasses }}">
+<article class="article-link--simple group {{ $cardClasses }}">
   {{ with $featuredURL }}
     <div class="flex-none relative overflow-hidden {{ $imgWrapperClasses }} thumbnail">
       <img
         src="{{ . }}"
-        role="presentation"
+        alt="{{ $page.Title }}"
         loading="lazy"
         decoding="async"
-        class="not-prose absolute inset-0 w-full h-full object-cover" />
+        fetchpriority="low"
+        class="not-prose absolute inset-0 h-full w-full object-cover transition duration-500 {{ if $featureImageHover }}group-hover:scale-105{{ end }}"
+        {{ with $featureImagePosition }}style="object-position: {{ . }};"{{ end }} />
     </div>
   {{ end }}
   <div class="{{ $cardContentClasses }}">

layouts/partials/term-link/card.html

@@ -5,6 +5,9 @@
 {{ $thumbnailAspectRatio := site.Params.thumbnailAspectRatio | default "1.5" }}
 {{ $thumbnailAspectRatio = replaceRE "[^0-9.]" "" $thumbnailAspectRatio }}
 {{ if eq $thumbnailAspectRatio "" }}{{ $thumbnailAspectRatio = "1.5" }}{{ end }}
+{{ $featureImageHover := site.Params.list.featureImageHover | default false }}
+{{ if isset .Page.Params "featureImageHover" }}{{ $featureImageHover = .Page.Params.featureImageHover }}{{ end }}
+{{ $featureImagePosition := .Page.Params.imagePositionFeature | default site.Params.imagePositionFeature | default site.Params.imagePosition }}
 {{ $p := .Page }}
 {{ with .Page.Params.featureimage }}
   {{ if or (strings.HasPrefix . "http:") (strings.HasPrefix . "https:") }}
@@ -35,7 +38,7 @@
 
 
 <div class="min-w-full">
-  <div class="border-neutral-200 dark:border-neutral-700 border-2 rounded overflow-hidden shadow-2xl relative">
+  <div class="group relative overflow-hidden rounded border-2 border-neutral-200 shadow-2xl dark:border-neutral-700">
     {{ with $featuredURL }}
       <figure
         class="not-prose flex-none relative overflow-hidden thumbnail_card"
@@ -46,7 +49,8 @@
           loading="lazy"
           decoding="async"
           fetchpriority="low"
-          class="not-prose absolute inset-0 w-full h-full object-cover" />
+          class="not-prose absolute inset-0 h-full w-full object-cover transition duration-500 {{ if $featureImageHover }}group-hover:scale-105{{ end }}"
+          {{ with $featureImagePosition }}style="object-position: {{ . }};"{{ end }} />
       </figure>
     {{ end }}
     {{ if site.Params.taxonomy.showTermCount | default true }}