feat(article-link): replace background div with img tag

assets/css/compiled/main.css

@@ -3019,9 +3019,9 @@ body.zen-mode-enable {
       grid-template-columns: repeat(3, minmax(0, 1fr));
     }
   }
-  .md\:flex-nowrap {
+  .md\:flex-row {
     @media (width >= 853px) {
-      flex-wrap: nowrap;
+      flex-direction: row;
     }
   }
   .md\:justify-start {
@@ -3770,24 +3770,6 @@ a {
 pre {
   text-align: left;
 }
-.thumbnail, .thumbnail_card, .thumbnail_card_related, .thumbnail_card_term, .single_hero_basic, .single_hero_background {
-  background-repeat: no-repeat;
-  background-size: cover;
-  background-position: center;
-}
-.thumbnail {
-  min-width: 300px;
-  height: 180px;
-}
-.thumbnail_card {
-  height: 200px;
-}
-.thumbnail_card_related {
-  height: 150px;
-}
-.thumbnail_card_term {
-  height: 150px;
-}
 .single_hero_round {
   max-height: 50vh;
   object-fit: cover;
@@ -3799,7 +3781,23 @@ pre {
   width: 100%;
   height: 100%;
 }
-.thumbnailshadow {
+.thumbnail--card {
+  min-width: 300px;
+  height: 200px;
+}
+.thumbnail--related {
+  height: 150px;
+}
+.thumbnail--simple {
+  width: 300px;
+  min-height: 180px;
+}
+@media (width < 853px) {
+  .thumbnail--simple {
+    width: 100%;
+  }
+}
+.thumbnail-shadow {
   box-shadow: 5px 5px 20px 1px rgba(0, 0, 0, 0.3);
 }
 .anchor {
@@ -3813,20 +3811,11 @@ pre {
   scroll-margin-top: 145px;
 }
 @media (width >= 640px) {
-  .thumbnail {
-    min-width: 100%;
-    height: 180px;
-  }
   .article {
     flex-wrap: wrap;
   }
 }
 @media (width >= 853px) {
-  .thumbnail {
-    min-width: 300px;
-    min-height: 180px;
-    height: auto;
-  }
   .article {
     flex-wrap: nowrap;
   }

assets/css/main.css

@@ -163,34 +163,6 @@ pre {
   text-align: left;
 }
 
-.thumbnail,
-.thumbnail_card,
-.thumbnail_card_related,
-.thumbnail_card_term,
-.single_hero_basic,
-.single_hero_background {
-  background-repeat: no-repeat;
-  background-size: cover;
-  background-position: center;
-}
-
-.thumbnail {
-  min-width: 300px;
-  height: 180px;
-}
-
-.thumbnail_card {
-  height: 200px;
-}
-
-.thumbnail_card_related {
-  height: 150px;
-}
-
-.thumbnail_card_term {
-  height: 150px;
-}
-
 .single_hero_round {
   max-height: 50vh;
   object-fit: cover;
@@ -205,7 +177,27 @@ pre {
   height: 100%;
 }
 
-.thumbnailshadow {
+.thumbnail--card {
+  min-width: 300px;
+  height: 200px;
+}
+
+.thumbnail--related {
+  height: 150px;
+}
+
+.thumbnail--simple {
+  width: 300px;
+  min-height: 180px;
+}
+
+@variant max-md {
+  .thumbnail--simple {
+    width: 100%;
+  }
+}
+
+.thumbnail-shadow {
   box-shadow: 5px 5px 20px 1px rgba(0, 0, 0, 0.3);
 }
 
@@ -224,21 +216,12 @@ pre {
 }
 
 @variant sm {
-  .thumbnail {
-    min-width: 100%;
-    height: 180px;
-  }
   .article {
     flex-wrap: wrap;
   }
 }
 
 @variant md {
-  .thumbnail {
-    min-width: 300px;
-    min-height: 180px;
-    height: auto;
-  }
   .article {
     flex-wrap: nowrap;
   }

layouts/partials/article-link/_shortcode.html

@@ -7,29 +7,22 @@
 {{ $constrainItemsWidth := site.Params.list.constrainItemsWidth | default false }}
 {{ $disableImageOptimization := site.Params.disableImageOptimization | default false }}
 
-{{ $articleClasses := "flex flex-wrap md:flex-nowrap article relative" }}
+{{ $cardClasses := "flex flex-col md:flex-row relative" }}
-{{ if site.Params.list.showCards }}
+{{ $figureClasses := "" }}
-  {{ $articleClasses = delimit (slice $articleClasses "border border-neutral-200 dark:border-neutral-700 border-2 rounded-md overflow-hidden") " " }}
+{{ $cardContentClasses := "" }}
-{{ else }}
-  {{ $articleClasses = delimit (slice $articleClasses "") " " }}
-{{ end }}
 
-{{ $articleImageClasses := "w-full md:w-auto h-full thumbnail nozoom" }}
 {{ if site.Params.list.showCards }}
-  {{ $articleImageClasses = delimit (slice $articleImageClasses "") " " }}
+  {{ $cardClasses = printf "%s overflow-hidden rounded-md border-2 border-neutral-200 dark:border-neutral-700" $cardClasses }}
+  {{ $figureClasses = "" }}
+  {{ $cardContentClasses = printf "%s p-2.5 pl-4 pb-0" $cardContentClasses }}
 {{ else }}
-  {{ $articleImageClasses = delimit (slice $articleImageClasses "thumbnailshadow md:mr-7") " " }}
+  {{ $cardClasses = printf "%s" $cardClasses }}
-{{ end }}
+  {{ $figureClasses = printf "%s thumbnail-shadow md:mr-7" $figureClasses }}
-
+  {{ $cardContentClasses = printf "%s mt-3 md:mt-0" $cardContentClasses }}
-{{ $articleInnerClasses := "" }}
-{{ if site.Params.list.showCards }}
-  {{ $articleInnerClasses = delimit (slice $articleInnerClasses "p-2.5 pl-4 pb-0") " " }}
-{{ else }}
-  {{ $articleInnerClasses = delimit (slice $articleInnerClasses "mt-3 md:mt-0") " " }}
 {{ end }}
 
 {{ if $constrainItemsWidth }}
-  {{ $articleClasses = delimit (slice $articleClasses "max-w-prose") " " }}
+  {{ $cardClasses = printf "%s max-w-prose" $cardClasses }}
 {{ end }}
 
 {{ $featured := "" }}
@@ -62,11 +55,18 @@
 {{ end }}
 
 
-<article class="{{ $articleClasses }}">
+<article class="{{ $cardClasses }}">
   {{ with $featuredURL }}
-    <div class="{{ $articleImageClasses }}" style="background-image:url({{ . }});"></div>
+    <figure class="not-prose flex-none relative overflow-hidden {{ $figureClasses }} thumbnail--simple">
+      <img
+        src="{{ . }}"
+        alt="{{ $.Title }}"
+        loading="lazy"
+        decoding="async"
+        class="not-prose absolute inset-0 w-full h-full object-cover">
+    </figure>
   {{ end }}
-  <div class="{{ $articleInnerClasses }}">
+  <div class="{{ $cardContentClasses }}">
     <header class="items-center text-start text-xl font-semibold">
       <a
         {{ partial "article-link/_external-link.html" . | safeHTMLAttr }}

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

@@ -34,7 +34,15 @@
 <article
   class="relative min-h-full min-w-full overflow-hidden rounded border border-2 border-neutral-200 shadow-2xl dark:border-neutral-700">
   {{ with $featuredURL }}
-    <div class="thumbnail_card_related nozoom w-full" style="background-image:url({{ . }});"></div>
+    <figure class="not-prose flex-none relative overflow-hidden thumbnail--related">
+      <img
+        src="{{ . }}"
+        alt="{{ $.Title }}"
+        loading="lazy"
+        decoding="async"
+        fetchpriority="low"
+        class="not-prose absolute inset-0 w-full h-full object-cover">
+    </figure>
   {{ end }}
   {{ if and .Draft .Site.Params.article.showDraftLabel }}
     <span class="absolute top-0 right-0 m-2">

layouts/partials/article-link/card.html

@@ -38,7 +38,15 @@
 <article
   class="relative min-h-full min-w-full overflow-hidden rounded border border-2 border-neutral-200 shadow-2xl dark:border-neutral-700">
   {{ with $featuredURL }}
-    <div class="thumbnail_card nozoom w-full" style="background-image:url({{ . }});"></div>
+    <figure class="not-prose flex-none relative overflow-hidden thumbnail--card">
+      <img
+        src="{{ . }}"
+        alt="{{ $.Title }}"
+        loading="lazy"
+        decoding="async"
+        fetchpriority="low"
+        class="not-prose absolute inset-0 w-full h-full object-cover">
+    </figure>
   {{ end }}
   {{ if and .Draft .Site.Params.article.showDraftLabel }}
     <span class="absolute top-0 right-0 m-2">

layouts/partials/article-link/simple.html

@@ -3,33 +3,25 @@
   2. Recent articles template (when the cardView option is not enabled)
   3. Shortcode list.html
 */}}
-{{ $constrainItemsWidth := .Page.Site.Params.list.constrainItemsWidth | default false }}
+{{ $constrainItemsWidth := site.Params.list.constrainItemsWidth | default false }}
+{{ $disableImageOptimization := site.Params.disableImageOptimization | default false }}
 
-{{ $articleClasses := "flex flex-wrap md:flex-nowrap article relative" }}
+{{ $cardClasses := "flex flex-col md:flex-row relative" }}
-{{ if .Site.Params.list.showCards }}
+{{ $figureClasses := "" }}
-  {{ $articleClasses = delimit (slice $articleClasses "border border-neutral-200 dark:border-neutral-700 border-2 rounded-md overflow-hidden") " " }}
+{{ $cardContentClasses := "" }}
+
+{{ if site.Params.list.showCards }}
+  {{ $cardClasses = printf "%s overflow-hidden rounded-md border-2 border-neutral-200 dark:border-neutral-700" $cardClasses }}
+  {{ $figureClasses = "" }}
+  {{ $cardContentClasses = printf "%s p-4" $cardContentClasses }}
 {{ else }}
-  {{ $articleClasses = delimit (slice $articleClasses "") " " }}
+  {{ $cardClasses = $cardClasses }}
-{{ end }}
+  {{ $figureClasses = printf "%s thumbnail-shadow md:mr-7" $figureClasses }}
-
+  {{ $cardContentClasses = printf "%s mt-3 md:mt-0" $cardContentClasses }}
-{{ $articleImageClasses := "w-full md:w-auto h-full thumbnail nozoom" }}
-{{ if .Site.Params.list.showCards }}
-  {{ $articleImageClasses = delimit (slice $articleImageClasses "") " " }}
-{{ else }}
-  {{ $articleImageClasses = delimit (slice $articleImageClasses "thumbnailshadow md:mr-7") " " }}
-{{ end }}
-
-{{ $disableImageOptimization := .Page.Site.Params.disableImageOptimization | default false }}
-
-{{ $articleInnerClasses := "" }}
-{{ if .Site.Params.list.showCards }}
-  {{ $articleInnerClasses = delimit (slice $articleInnerClasses "p-4") " " }}
-{{ else }}
-  {{ $articleInnerClasses = delimit (slice $articleInnerClasses "mt-3 md:mt-0") " " }}
 {{ end }}
 
 {{ if $constrainItemsWidth }}
-  {{ $articleClasses = delimit (slice $articleClasses "max-w-prose") " " }}
+  {{ $cardClasses = printf "%s max-w-prose" $cardClasses }}
 {{ end }}
 
 {{ $featured := "" }}
@@ -62,11 +54,19 @@
 {{ end }}
 
 
-<article class="{{ $articleClasses }}">
+<article class="{{ $cardClasses }}">
   {{ with $featuredURL }}
-    <div class="{{ $articleImageClasses }}" style="background-image:url({{ . }});"></div>
+    <figure
+      class="not-prose flex-none relative overflow-hidden {{ $figureClasses }} thumbnail--simple">
+      <img
+        src="{{ . }}"
+        alt="{{ $.Title }}"
+        loading="lazy"
+        decoding="async"
+        class="not-prose absolute inset-0 w-full h-full object-cover">
+    </figure>
   {{ end }}
-  <div class="{{ $articleInnerClasses }}">
+  <div class="{{ $cardContentClasses }}">
     <header class="items-center text-start text-xl font-semibold">
       <a
         {{ partial "article-link/_external-link.html" . | safeHTMLAttr }}