Merge pull request #2455 from ZhenShuo2021/feat/img-background

✨ Feat: Replace all background-image CSS with <img> tags
2025-12-05 14:17:50 +08:00 · 2025-09-16 11:10:32 +01:00
parent cd93ec0708 3f0dc1d6e1
commit 6f6584e83a
9 changed files with 211 additions and 186 deletions
--- a/assets/css/compiled/main.css
+++ b/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;
  }
--- a/assets/css/main.css
+++ b/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;
  }
--- a/layouts/partials/article-link/_shortcode.html
+++ b/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" }}
-{{ if site.Params.list.showCards }}
-  {{ $articleClasses = delimit (slice $articleClasses "border border-neutral-200 dark:border-neutral-700 border-2 rounded-md overflow-hidden") " " }}
-{{ else }}
-  {{ $articleClasses = delimit (slice $articleClasses "") " " }}
-{{ end }}
+{{ $cardClasses := "flex flex-col md:flex-row relative" }}
+{{ $figureClasses := "" }}
+{{ $cardContentClasses := "" }}

-{{ $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") " " }}
-{{ end }}
-
-{{ $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") " " }}
+  {{ $cardClasses = printf "%s" $cardClasses }}
+  {{ $figureClasses = printf "%s thumbnail-shadow md:mr-7" $figureClasses }}
+  {{ $cardContentClasses = printf "%s mt-3 md:mt-0" $cardContentClasses }}
 {{ 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 }}
--- a/layouts/partials/article-link/card-related.html
+++ b/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">
--- a/layouts/partials/article-link/card.html
+++ b/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">
--- a/layouts/partials/article-link/simple.html
+++ b/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" }}
-{{ if .Site.Params.list.showCards }}
-  {{ $articleClasses = delimit (slice $articleClasses "border border-neutral-200 dark:border-neutral-700 border-2 rounded-md overflow-hidden") " " }}
+{{ $cardClasses := "flex flex-col md:flex-row relative" }}
+{{ $figureClasses := "" }}
+{{ $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 "") " " }}
-{{ end }}
-
-{{ $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") " " }}
+  {{ $cardClasses = $cardClasses }}
+  {{ $figureClasses = printf "%s thumbnail-shadow md:mr-7" $figureClasses }}
+  {{ $cardContentClasses = printf "%s mt-3 md:mt-0" $cardContentClasses }}
 {{ 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 }}
@@ -79,7 +79,7 @@
              <span class="ltr:hidden">&#8598;</span>
            </span>
          {{ end }}
-          </h2>
+        </h2>
      </a>
      {{ if and .Draft .Site.Params.article.showDraftLabel }}
        <div class="ms-2">{{ partial "badge.html" (i18n "article.draft" | emojify) }}</div>
--- a/layouts/partials/hero/basic.html
+++ b/layouts/partials/hero/basic.html
@@ -1,6 +1,7 @@
 {{ $disableImageOptimization := .Page.Site.Params.disableImageOptimization | default false }}

 {{ $featured := "" }}
+{{ $featuredURL := "" }}
 {{ if .Params.featureimage }}
  {{ $url := .Params.featureimage }}
  {{ if or (strings.HasPrefix $url "http:") (strings.HasPrefix $url "https:") }}
@@ -27,18 +28,22 @@
  {{ end }}
 {{ end }}

-{{- with $featured -}}
-  {{ if or $disableImageOptimization (strings.HasSuffix $featured ".svg") }}
-    {{ with . }}
-      <div
-        class="w-full h-36 md:h-56 lg:h-72 single_hero_basic nozoom"
-        style="background-image:url({{ .RelPermalink }});"></div>
-    {{ end }}
-  {{ else }}
-    {{ with .Resize (print ($.Site.Params.backgroundImageWidth | default "1200") "x") }}
-      <div
-        class="w-full h-36 md:h-56 lg:h-72 single_hero_basic nozoom"
-        style="background-image:url({{ .RelPermalink }});"></div>
-    {{ end }}
+{{ with $featured }}
+  {{ $featuredURL = .RelPermalink }}
+  {{ if not (or $disableImageOptimization (eq .MediaType.SubType "svg")) }}
+    {{ $size := (print ($.Site.Params.backgroundImageWidth | default "1200") "x") }}
+    {{ $featuredURL = (.Resize $size).RelPermalink }}
  {{ end }}
-{{- end -}}
+{{ end }}
+
+{{ with $featuredURL }}
+  <div class="overflow-hidden h-36 md:h-56 lg:h-72">
+    <img
+      src="{{ . }}"
+      alt="{{ $.Title }}"
+      loading="eager"
+      decoding="async"
+      fetchpriority="high"
+      class="w-full h-full nozoom object-cover">
+  </div>
+{{ end }}
--- a/layouts/partials/hero/thumbAndBackground.html
+++ b/layouts/partials/hero/thumbAndBackground.html
@@ -2,6 +2,7 @@

 {{ $images := .Resources.ByType "image" }}
 {{ $background := $images.GetMatch "*background*" }}
+{{ $backgroundURL := "" }}

 {{ if not $background }}
  {{ with .Site.Params.defaultBackgroundImage }}
@@ -17,7 +18,16 @@
  {{ if not $background }}{{ $background = $images.GetMatch . }}{{ end }}
 {{ end }}

+{{ with $background }}
+  {{ $backgroundURL = .RelPermalink }}
+  {{ if not (or $disableImageOptimization (eq .MediaType.SubType "svg")) }}
+    {{ $size := (print ($.Site.Params.backgroundImageWidth | default "1200") "x") }}
+    {{ $backgroundURL = (.Resize $size).RelPermalink }}
+  {{ end }}
+{{ end }}
+
 {{ $featured := "" }}
+{{ $featuredURL := "" }}
 {{ if .Params.featureimage }}
  {{ $url := .Params.featureimage }}
  {{ if or (strings.HasPrefix $url "http:") (strings.HasPrefix $url "https:") }}
@@ -44,6 +54,14 @@
  {{ end }}
 {{ end }}

+{{ with $featured }}
+  {{ $featuredURL = .RelPermalink }}
+  {{ if not (or $disableImageOptimization (eq .MediaType.SubType "svg")) }}
+    {{ $size := (print ($.Site.Params.backgroundImageWidth | default "1200") "x") }}
+    {{ $featuredURL = (.Resize $size).RelPermalink }}
+  {{ end }}
+{{ end }}
+
 {{ $isParentList := eq (.Scratch.Get "scope") "list" }}
 {{ $shouldBlur := $.Params.layoutBackgroundBlur | default (or
  (and ($.Site.Params.article.layoutBackgroundBlur | default true) (not $isParentList))
@@ -51,40 +69,32 @@
  )
 }}

-{{- with $featured -}}
-  {{ if or $disableImageOptimization (strings.HasSuffix . ".svg") }}
-    {{ with . }}
-      <div
-        class="w-full rounded-md h-36 md:h-56 lg:h-72 single_hero_basic nozoom"
-        style="background-image:url({{ .RelPermalink }});"></div>
-    {{ end }}
-  {{ else }}
-    {{ with .Resize (print ($.Site.Params.backgroundImageWidth | default "1200") "x") }}
-      <div
-        class="w-full rounded-md h-36 md:h-56 lg:h-72 single_hero_basic nozoom"
-        style="background-image:url({{ .RelPermalink }});"></div>
-    {{ end }}
-  {{ end }}
-{{- end -}}
-
-{{- with $background -}}
-
-  <div class="single_hero_background nozoom fixed inset-x-0 top-0 h-[800px]">
-    {{ $imageURL := .RelPermalink }}
-    {{ if not (or $disableImageOptimization (eq .MediaType.SubType "svg")) }}
-      {{ $imageURL = (.Resize (print ($.Site.Params.backgroundImageWidth | default "1200") "x")).RelPermalink }}
-    {{ end }}
+{{ with $featuredURL }}
+  <div class="overflow-hidden rounded-md h-36 md:h-56 lg:h-72 nozoom">
    <img
-      id="background-image"
-      src="{{ $imageURL }}"
+      src="{{ . }}"
+      alt="{{ $.Title }}"
+      loading="eager"
+      decoding="async"
+      fetchpriority="high"
+      class="w-full h-full nozoom object-cover">
+  </div>
+{{ end }}
+
+
+<div class="single_hero_background nozoom fixed inset-x-0 top-0 h-[800px]">
+  {{ with $backgroundURL }}
+    <img
+      id="background-image-main"
+      src="{{ . }}"
      alt="Background Image"
      class="absolute inset-0 h-full w-full object-cover">
-    <div
-      class="from-neutral absolute inset-0 bg-gradient-to-t to-transparent mix-blend-normal dark:from-neutral-800"></div>
-    <div
-      class="from-neutral to-neutral absolute inset-0 bg-gradient-to-t opacity-30 mix-blend-normal dark:from-neutral-800 dark:to-neutral-800 dark:opacity-60"></div>
-  </div>
-{{- end -}}
+  {{ end }}
+  <div
+    class="from-neutral absolute inset-0 bg-gradient-to-t to-transparent mix-blend-normal dark:from-neutral-800"></div>
+  <div
+    class="from-neutral to-neutral absolute inset-0 bg-gradient-to-t opacity-30 mix-blend-normal dark:from-neutral-800 dark:to-neutral-800 dark:opacity-60"></div>
+</div>

 {{ if $shouldBlur | default false }}
  <div
--- a/layouts/partials/term-link/card.html
+++ b/layouts/partials/term-link/card.html
@@ -1,23 +1,43 @@
-<a href="{{ .Page.RelPermalink }}" class="min-w-full">
-  <div
-    class="border-neutral-200 dark:border-neutral-700 border-2 rounded overflow-hidden shadow-2xl relative">
-    {{ $disableImageOptimization := .Page.Site.Params.disableImageOptimization | default false }}
+{{ $disableImageOptimization := .Page.Site.Params.disableImageOptimization | default false }}

-    {{- $images := .Page.Resources.ByType "image" -}}
-    {{- $featured := $images.GetMatch "*feature*" -}}
-    {{- if not $featured }}{{ $featured = $images.GetMatch "{*cover*,*thumbnail*}" }}{{ end -}}
-    {{- with $featured -}}
-      {{ if $disableImageOptimization }}
-        {{ with . }}
-          <div class="w-full thumbnail_card nozoom" style="background-image:url({{ .RelPermalink }});"></div>
-        {{ end }}
-      {{ else }}
-        {{ with .Resize "600x" }}
-          <div class="w-full thumbnail_card nozoom" style="background-image:url({{ .RelPermalink }});"></div>
-        {{ end }}
-      {{ end }}
-    {{- end -}}
+{{ $featured := "" }}
+{{ $featuredURL := "" }}
+{{ with .Page.Params.featureimage }}
+  {{ if or (strings.HasPrefix . "http:") (strings.HasPrefix . "https:") }}
+    {{ $featured = resources.GetRemote . }}
+  {{ else }}
+    {{ $featured = resources.Get . }}
+  {{ end }}
+{{ end }}

+{{ if not $featured }}
+  {{ $images := .Page.Resources.ByType "image" }}
+  {{ range slice "*feature*" "*cover*" "*thumbnail*" }}
+    {{ if not $featured }}{{ $featured = $images.GetMatch . }}{{ end }}
+  {{ end }}
+{{ end }}
+
+{{ with $featured }}
+  {{ $featuredURL = .RelPermalink }}
+  {{ if not (or $disableImageOptimization (eq .MediaType.SubType "svg")) }}
+    {{ $featuredURL = (.Resize "600x").RelPermalink }}
+  {{ end }}
+{{ end }}
+
+
+<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">
+        <img
+          src="{{ . }}"
+          alt="{{ $.Page.Title }}"
+          loading="lazy"
+          decoding="async"
+          fetchpriority="low"
+          class="not-prose absolute inset-0 w-full h-full object-cover">
+      </figure>
+    {{ end }}
    {{ if site.Params.taxonomy.showTermCount | default true }}
      <span class="absolute bottom-0 right-0 m-2">
        <span class="flex">
@@ -28,14 +48,16 @@
        </span>
      </span>
    {{ end }}
-
-
    <div class="px-6 py-4">
-      <div
-        class="font-bold text-xl text-neutral-800 decoration-primary-500 hover:underline hover:underline-offset-2 dark:text-neutral">
-        {{ .Page.Title | emojify }}
-      </div>
+      <a
+        {{ partial "article-link/_external-link.html" .Page | safeHTMLAttr }}
+        class="not-prose before:absolute before:inset-0 decoration-primary-500 dark:text-neutral text-xl font-bold text-neutral-800 hover:underline hover:underline-offset-2">
+        <div
+          class="font-bold text-xl text-neutral-800 decoration-primary-500 hover:underline hover:underline-offset-2 dark:text-neutral">
+          {{ .Page.Title | emojify }}
+        </div>
+      </a>
    </div>
    <div class="px-6 pt-4 pb-2"></div>
  </div>
-</a>
+</div>