From 9e5a7f9d29050aa20ecf4f0871e69d8310dcb3d2 Mon Sep 17 00:00:00 2001
From: ZhenShuo Leo <98386542+ZhenShuo2021@users.noreply.github.com>
Date: Fri, 11 Jul 2025 09:02:44 +0800
Subject: [PATCH] Revert ":recycle: Refactor: Move inline styles containing
 background-image: out of line"

This reverts commit 1736cafcf4fef8c732b23b8ad6eab348756f8c3d.
---
 .../partials/article-link/card-related.html   |  58 ++++----
 layouts/partials/article-link/card.html       |  61 ++++----
 layouts/partials/article-link/simple.html     |  54 ++++---
 layouts/partials/head.html                    |  42 ------
 layouts/partials/hero/background.html         |  97 +++++++------
 layouts/partials/hero/basic.html              |  60 ++++----
 layouts/partials/hero/thumbAndBackground.html | 135 ++++++++++--------
 layouts/partials/term-link/card.html          |  37 ++---
 8 files changed, 272 insertions(+), 272 deletions(-)

diff --git a/layouts/partials/article-link/card-related.html b/layouts/partials/article-link/card-related.html
index 11045624..288a85de 100644
--- a/layouts/partials/article-link/card-related.html
+++ b/layouts/partials/article-link/card-related.html
@@ -1,35 +1,39 @@
-<a {{ partial "article-link/_external-link.html" . | safeHTMLAttr }} class="min-w-full">
-  <div
-    class="min-h-full border border-neutral-200 dark:border-neutral-700 border-2 rounded overflow-hidden shadow-2xl relative">
-    {{- with $.Params.images -}}
+{{ $disableImageOptimization := .Page.Site.Params.disableImageOptimization | default false }}
+{{ with .Params.externalUrl }}
+<a href="{{ . }}" target="_blank" rel="external" class="min-w-full">
+  {{ else }}
+  <a href="{{ .RelPermalink }}" class="min-w-full">
+    {{ end }}
+    <div class="min-h-full border border-neutral-200 dark:border-neutral-700 border-2 rounded overflow-hidden shadow-2xl relative">
+
+      {{- with $.Params.images -}}
       {{- range first 6 . }}
-        <meta property="og:image" content="{{ . | absURL }}">
-      {{ end -}}
-    {{- else -}}
-      {{ $images := $.Resources.ByType "image" }}
-      {{ $featuredImage := $images.GetMatch "*feature*" }}
-      {{ if not $featuredImage }}
-        {{ $featuredImage = $images.GetMatch "{*cover*,*thumbnail*}" }}
+      <meta property="og:image" content="{{ . | absURL }}" />{{ end -}}
+      {{- else -}}
+      {{- $images := $.Resources.ByType "image" -}}
+      {{- $featured := $images.GetMatch "*feature*" -}}
+      {{- if not $featured }}{{ $featured = $images.GetMatch "{*cover*,*thumbnail*}" }}{{ end -}}
+      {{ if and .Params.featureimage (not $featured) }}
+      {{- $url:= .Params.featureimage -}}
+      {{ $featured = resources.GetRemote $url }}
       {{ end }}
-      {{ if and (not $featuredImage) .Params.featureimage }}
-        {{ $featuredImage = resources.GetRemote .Params.featureimage }}
-      {{ end }}
-      {{ if not $featuredImage }}
-        {{ $featuredImage = resources.Get .Site.Params.defaultFeaturedImage }}
-      {{ end }}
-      {{ $disableImageOptimization := .Page.Site.Params.disableImageOptimization | default false }}
-      {{ if and ($featuredImage) (not (or ($disableImageOptimization) (strings.HasSuffix $featuredImage.Name ".svg"))) }}
-        {{ $featuredImage = $featuredImage.Resize "600x" }}
-      {{ end }}
-      {{ with $featuredImage }}
-        {{ $className := printf "background-image-%s" (md5 .RelPermalink) }}
-        <div class="w-full thumbnail_card_related nozoom {{ $className }}"></div>
+      {{- if not $featured }}{{ with .Site.Params.defaultFeaturedImage }}{{ $featured = resources.Get . }}{{ end }}{{ end -}}
+      {{- with $featured -}}
+      {{ if or $disableImageOptimization (strings.HasSuffix $featured ".svg")}}
+        {{ with . }}
+        <div class="w-full thumbnail_card_related nozoom" style="background-image:url({{ .RelPermalink }});"></div>
+        {{ end }}
       {{ else }}
-        {{ with $.Site.Params.images }}
-          <meta property="og:image" content="{{ index . 0 | absURL }}">
+        {{ with .Resize "600x" }}
+        <div class="w-full thumbnail_card_related nozoom" style="background-image:url({{ .RelPermalink }});"></div>
         {{ end }}
       {{ end }}
-    {{ end }}
+      {{- else -}}
+      {{- with $.Site.Params.images }}
+      <meta property="og:image" content="{{ index . 0 | absURL }}" />{{ end -}}
+      {{- end -}}
+      {{- end -}}
+
 
     {{ if and .Draft .Site.Params.article.showDraftLabel }}
       <span class="absolute top-0 right-0 m-2">
diff --git a/layouts/partials/article-link/card.html b/layouts/partials/article-link/card.html
index 70affad0..7a565d3c 100644
--- a/layouts/partials/article-link/card.html
+++ b/layouts/partials/article-link/card.html
@@ -1,38 +1,39 @@
-<a {{ partial "article-link/_external-link.html" . | safeHTMLAttr }} class="min-w-full">
-  <div
-    class="min-h-full border border-neutral-200 dark:border-neutral-700 border-2 rounded overflow-hidden shadow-2xl relative">
-    {{- with $.Params.images -}}
+{{ $disableImageOptimization := .Page.Site.Params.disableImageOptimization | default false }}
+{{ with .Params.externalUrl }}
+<a href="{{ . }}" target="_blank" rel="external" class="min-w-full">
+  {{ else }}
+  <a href="{{ .RelPermalink }}" class="min-w-full">
+    {{ end }}
+    <div class="min-h-full border border-neutral-200 dark:border-neutral-700 border-2 rounded overflow-hidden shadow-2xl relative">
+
+      {{- with $.Params.images -}}
       {{- range first 6 . }}
-        <meta property="og:image" content="{{ . | absURL }}">
-      {{ end -}}
-    {{- else -}}
-      {{ $images := $.Resources.ByType "image" }}
-      {{ $featuredImage := $images.GetMatch "*feature*" }}
-      {{ if not $featuredImage }}
-        {{ $featuredImage = $images.GetMatch "{*cover*,*thumbnail*}" }}
+      <meta property="og:image" content="{{ . | absURL }}" />{{ end -}}
+      {{- else -}}
+      {{- $images := $.Resources.ByType "image" -}}
+      {{- $featured := $images.GetMatch "*feature*" -}}
+      {{- if not $featured }}{{ $featured = $images.GetMatch "{*cover*,*thumbnail*}" }}{{ end -}}
+      {{ if and .Params.featureimage (not $featured) }}
+      {{- $url:= .Params.featureimage -}}
+      {{ $featured = resources.GetRemote $url }}
       {{ end }}
-      {{ if and (not $featuredImage) .Params.featureimage }}
-        {{ $featuredImage = resources.GetRemote .Params.featureimage }}
-      {{ end }}
-      {{ if not $featuredImage }}
-        {{ $featuredImage = resources.Get .Site.Params.defaultFeaturedImage }}
-      {{ end }}
-      {{ $disableImageOptimization := .Page.Site.Params.disableImageOptimization | default false }}
-      {{ if and ($featuredImage) (not (or ($disableImageOptimization) (strings.HasSuffix $featuredImage.Name ".svg"))) }}
-        {{ $featuredImage = $featuredImage.Resize "600x" }}
-      {{ end }}
-      {{ if .Params.hideFeatureImage }}
-        {{ $featuredImage = false }}
-      {{ end }}
-      {{ with $featuredImage }}
-        {{ $className := printf "background-image-%s" (md5 .RelPermalink) }}
-        <div class="w-full thumbnail_card nozoom {{ $className }}"></div>
+      {{- if not $featured }}{{ with .Site.Params.defaultFeaturedImage }}{{ $featured = resources.Get . }}{{ end }}{{ end -}}
+      {{ if .Params.hideFeatureImage }}{{ $featured = false }}{{ end }}
+      {{- with $featured -}}
+      {{ if or $disableImageOptimization (strings.HasSuffix $featured ".svg")}}
+        {{ with . }}
+        <div class="w-full thumbnail_card nozoom" style="background-image:url({{ .RelPermalink }});"></div>
+        {{ end }}
       {{ else }}
-        {{ with $.Site.Params.images }}
-          <meta property="og:image" content="{{ index . 0 | absURL }}">
+        {{ with .Resize "600x" }}
+        <div class="w-full thumbnail_card nozoom" style="background-image:url({{ .RelPermalink }});"></div>
         {{ end }}
       {{ end }}
-    {{ end }}
+      {{- else -}}
+      {{- with $.Site.Params.images }}
+      <meta property="og:image" content="{{ index . 0 | absURL }}" />{{ end -}}
+      {{- end -}}
+      {{- end -}}
 
     {{ if and .Draft .Site.Params.article.showDraftLabel }}
       <span class="absolute top-0 right-0 m-2">
diff --git a/layouts/partials/article-link/simple.html b/layouts/partials/article-link/simple.html
index 9f0ab86d..bf5461fc 100644
--- a/layouts/partials/article-link/simple.html
+++ b/layouts/partials/article-link/simple.html
@@ -14,6 +14,8 @@
   {{ $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") " " }}
@@ -29,36 +31,32 @@
 <a class="{{ $articleClasses }}" {{ partial "article-link/_external-link.html" . | safeHTMLAttr }}>
   {{- with $.Params.images -}}
     {{- range first 6 . }}
-      <meta property="og:image" content="{{ . | absURL }}">
-    {{ end -}}
-  {{- else -}}
-    {{ $images := $.Resources.ByType "image" }}
-    {{ $featuredImage := $images.GetMatch "*feature*" }}
-    {{ if not $featuredImage }}
-      {{ $featuredImage = $images.GetMatch "{*cover*,*thumbnail*}" }}
+    <meta property="og:image" content="{{ . | absURL }}" />{{ end -}}
+    {{- else -}}
+    {{- $images := $.Resources.ByType "image" -}}
+    {{- $featured := $images.GetMatch "*feature*" -}}
+    {{- if not $featured }}{{ $featured = $images.GetMatch "{*cover*,*thumbnail*}" }}{{ end -}}
+    {{ if and .Params.featureimage (not $featured) }}
+    {{- $url:= .Params.featureimage -}}
+    {{ $featured = resources.GetRemote $url }}
     {{ end }}
-    {{ if and (not $featuredImage) .Params.featureimage }}
-      {{ $featuredImage = resources.GetRemote .Params.featureimage }}
-    {{ end }}
-    {{ if not $featuredImage }}
-      {{ $featuredImage = resources.Get .Site.Params.defaultFeaturedImage }}
-    {{ end }}
-    {{ $disableImageOptimization := .Page.Site.Params.disableImageOptimization | default false }}
-    {{ if and ($featuredImage) (not (or ($disableImageOptimization) (strings.HasSuffix $featuredImage.Name ".svg"))) }}
-      {{ $featuredImage = $featuredImage.Resize "600x" }}
-    {{ end }}
-    {{ if .Params.hideFeatureImage }}
-      {{ $featuredImage = false }}
-    {{ end }}
-    {{ with $featuredImage }}
-      {{ $className := printf "background-image-%s" (md5 .RelPermalink) }}
-      <div class="{{ $articleImageClasses }} {{ $className }}"></div>
-    {{ else }}
-      {{ with $.Site.Params.images }}
-        <meta property="og:image" content="{{ index . 0 | absURL }}">
+    {{- if not $featured }}{{ with .Site.Params.defaultFeaturedImage }}{{ $featured = resources.Get . }}{{ end }}{{ end -}}
+    {{ if .Params.hideFeatureImage }}{{ $featured = false }}{{ end }}
+    {{- with $featured -}}
+    {{ if or $disableImageOptimization (strings.HasSuffix $featured ".svg")}}
+        {{ with . }}
+        <div class="{{ $articleImageClasses }}" style="background-image:url({{ .RelPermalink }});"></div>
+        {{ end }}
+      {{ else }}
+        {{ with .Resize "600x"  }}
+        <div class="{{ $articleImageClasses }}" style="background-image:url({{ .RelPermalink }});"></div>
+        {{ end }}
       {{ end }}
-    {{ end }}
-  {{ end }}
+    {{- else -}}
+    {{- with $.Site.Params.images }}
+    <meta property="og:image" content="{{ index . 0 | absURL }}" />{{ end -}}
+    {{- end -}}
+    {{- end -}}
 
 
   <div class="{{ $articleInnerClasses }}">
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index 6b7aa75d..a1db6860 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -54,48 +54,6 @@
     {{ $cssZoom := resources.Get "lib/zoom/style.css" }}
     {{ $assets.Add "css" (slice $cssZoom) }}
   {{ end }}
-
-  {{ $images := slice }}
-  {{ $backgroundAndfeaturedImages := slice }}
-  {{ range .Site.Pages }}
-    {{ $images = $images | append (.Page.Resources.ByType "image") }}
-    {{ if .Params.featureimage }}
-      {{ $backgroundAndfeaturedImages = $backgroundAndfeaturedImages | append (resources.GetRemote .Params.featureimage) }}
-    {{ end }}
-  {{ end }}
-  {{ $backgroundAndfeaturedImages = $backgroundAndfeaturedImages | append ($images.Match "{*background*,*feature*,*cover*,*thumbnail*}") }}
-  {{ $siteParams := slice .Site.Params.defaultFeaturedImage .Site.Params.defaultBackgroundImage }}
-  {{ range $siteParams }}
-    {{ if or (strings.HasPrefix . "http:") (strings.HasPrefix . "https:") }}
-      {{ $backgroundAndfeaturedImages = $backgroundAndfeaturedImages | append (resources.GetRemote .) }}
-    {{ else }}
-      {{ $backgroundAndfeaturedImages = $backgroundAndfeaturedImages | append (resources.Get .) }}
-    {{ end }}
-  {{ end }}
-  {{ $disableImageOptimization := .Page.Site.Params.disableImageOptimization | default false }}
-  {{ range $backgroundAndfeaturedImages }}
-    {{ $backgroundAndfeaturedImages := . }}
-    {{ if not (or ($disableImageOptimization) (strings.HasSuffix .Name ".svg")) }}
-      {{ $backgroundAndfeaturedImages = .Resize "600x" }}
-    {{ end }}
-    {{ with $backgroundAndfeaturedImages }}
-      {{ $className := printf "background-image-%s" (md5 .RelPermalink) }}
-      {{ $cssBackgroundImage := printf ".%s { background-image: url(\"%s\"); }" $className .RelPermalink }}
-      {{ $cssBackgroundImage = $cssBackgroundImage | resources.FromString "css/background-image.css" }}
-      {{ $assets.Add "css" (slice $cssBackgroundImage) }}
-    {{ end }}
-  {{ end }}
-
-  {{ $repoLanguages := partial "functions/repo-languages.html" }}
-  {{ $repoColors := .Site.Data.repoColors }}
-  {{ range $repoLanguages }}
-    {{ $color := index $repoColors . | default "#0077b6" }}
-    {{ $className := printf "background-color-%s" (md5 .) }}
-    {{ $cssRepoColor := printf ".%s { background-color: %s; }" $className $color }}
-    {{ $cssRepoColor = $cssRepoColor | resources.FromString (printf "css/background-color.css") }}
-    {{ $assets.Add "css" (slice $cssRepoColor) }}
-  {{ end }}
-
   {{ $bundleCSS := $assets.Get "css" | resources.Concat "css/main.bundle.css" | resources.Minify | resources.Fingerprint
     (.Site.Params.fingerprintAlgorithm | default "sha512")
   }}
diff --git a/layouts/partials/hero/background.html b/layouts/partials/hero/background.html
index 674df3c8..c3adf2e0 100644
--- a/layouts/partials/hero/background.html
+++ b/layouts/partials/hero/background.html
@@ -1,55 +1,62 @@
-{{ $images := .Resources.ByType "image" }}
-{{ $backgroundImage := $images.GetMatch "*background*" }}
-{{ if not $backgroundImage }}
-  {{ $backgroundImage := $images.GetMatch "*feature*" }}
-{{ end }}
-{{ if not $backgroundImage }}
-  {{ $backgroundImage = $images.GetMatch "{*cover*,*thumbnail*}" }}
-{{ end }}
-{{ if and (not $backgroundImage) .Params.featureimage }}
-  {{ $backgroundImage = resources.GetRemote .Params.featureimage }}
-{{ end }}
-{{ if not $backgroundImage }}
-  {{ with .Site.Params.defaultBackgroundImage }}
-    {{ if or (strings.HasPrefix . "http:") (strings.HasPrefix . "https:") }}
-      {{ $backgroundImage = resources.GetRemote . }}
-    {{ else }}
-      {{ $backgroundImage = resources.Get . }}
-    {{ end }}
-  {{ end }}
-{{ end }}
 {{ $disableImageOptimization := .Page.Site.Params.disableImageOptimization | default false }}
-{{ if and ($backgroundImage) (not (or ($disableImageOptimization) (strings.HasSuffix $backgroundImage.Name ".svg"))) }}
-  {{ $backgroundImage = $backgroundImage.Resize (print ($.Site.Params.backgroundImageWidth | default "1200") "x") }}
+
+{{- $images := .Resources.ByType "image" -}}
+{{- $featured := $images.GetMatch "*background*" -}}
+{{- if not $featured }}{{ $featured = $images.GetMatch "*feature*" }}{{ end -}}
+{{- if not $featured }}{{ $featured = $images.GetMatch "{*cover*,*thumbnail*}" }}{{ end -}}
+
+{{ if and .Params.featureimage (not $featured) }}
+{{- $url:= .Params.featureimage -}}
+{{ $featured = resources.GetRemote $url }}
 {{ end }}
 
+{{- if not $featured }}
+ {{ with .Site.Params.defaultBackgroundImage }}
+  {{ if or (strings.HasPrefix . "http:") (strings.HasPrefix . "https:") }}
+   {{ $featured = resources.GetRemote . }}
+  {{ else }}
+   {{ $featured = resources.Get . }}
+  {{ end }}
+ {{ end }}
+{{ end -}}
+
 {{ $isParentList := eq (.Scratch.Get "scope") "list"  }}
-{{ $shouldBlur := $.Params.layoutBackgroundBlur | default (or
-        (and ($.Site.Params.article.layoutBackgroundBlur | default true) (not $isParentList))
+{{ $shouldBlur := $.Params.layoutBackgroundBlur | default (or 
+        (and ($.Site.Params.article.layoutBackgroundBlur | default true) (not $isParentList)) 
         (and ($.Site.Params.list.layoutBackgroundBlur | default true) ($isParentList))
     ) }}
-{{ $shouldAddHeaderSpace := $.Params.layoutBackgroundHeaderSpace | default (or
-        (and ($.Site.Params.article.layoutBackgroundHeaderSpace | default true) (not $isParentList))
+{{ $shouldAddHeaderSpace := $.Params.layoutBackgroundHeaderSpace | default (or 
+        (and ($.Site.Params.article.layoutBackgroundHeaderSpace | default true) (not $isParentList)) 
         (and ($.Site.Params.list.layoutBackgroundHeaderSpace | default true) ($isParentList))
     ) }}
+{{- with $featured -}}
 
-{{ with $backgroundImage }}
-  {{ if $shouldAddHeaderSpace | default true}}
-    <div id="hero" class="h-[150px] md:h-[200px]"></div>
-  {{ end }}
-  {{ $className := printf "background-image-%s" (md5 .RelPermalink) }}
-  <div class="fixed inset-x-0 top-0 h-[800px] single_hero_background nozoom {{ $className }}">
-    <div
-      class="absolute inset-0 bg-gradient-to-t from-neutral dark:from-neutral-800 to-transparent mix-blend-normal">
-    </div>
-    <div
-      class="absolute inset-0 opacity-60 bg-gradient-to-t from-neutral dark:from-neutral-800 to-neutral-100 dark:to-neutral-800 mix-blend-normal">
-    </div>
-  </div>
-  {{ if $shouldBlur | default false }}
-    <div id="background-blur" class="fixed opacity-0 inset-x-0 top-0 h-full single_hero_background nozoom backdrop-blur-2xl"></div>
-    {{ $backgroundBlur := resources.Get "js/background-blur.js" }}
-    {{ $backgroundBlur = $backgroundBlur | resources.Minify | resources.Fingerprint ($.Site.Params.fingerprintAlgorithm | default "sha512") }}
-    <script type="text/javascript" src="{{ $backgroundBlur.RelPermalink }}" integrity="{{ $backgroundBlur.Data.Integrity }}" data-target-id="background-blur"></script>
-  {{ end }}
+{{ if $shouldAddHeaderSpace | default true}}
+<div id="hero" class="h-[150px] md:h-[200px]"></div>
 {{ end }}
+
+{{ if or $disableImageOptimization (strings.HasSuffix $featured ".svg")}}
+    {{ with . }}
+    <div class="fixed inset-x-0 top-0 h-[800px] single_hero_background nozoom"
+    style="background-image:url({{ .RelPermalink }});">
+    {{ end }}
+{{ else }}
+    {{ with .Resize (print ($.Site.Params.backgroundImageWidth | default "1200") "x") }}
+    <div class="fixed inset-x-0 top-0 h-[800px] single_hero_background nozoom"
+    style="background-image:url({{ .RelPermalink }});">
+    {{ end }}
+{{ end }}
+
+    <div class="absolute inset-0 bg-gradient-to-t from-neutral dark:from-neutral-800 to-transparent mix-blend-normal">
+    </div>
+    <div
+        class="absolute inset-0 opacity-60 bg-gradient-to-t from-neutral dark:from-neutral-800 to-neutral-100 dark:to-neutral-800 mix-blend-normal">
+    </div>
+</div>
+{{ if $shouldBlur | default false }}
+<div id="background-blur" class="fixed opacity-0 inset-x-0 top-0 h-full single_hero_background nozoom backdrop-blur-2xl"></div>
+{{ $backgroundBlur := resources.Get "js/background-blur.js" }}
+{{ $backgroundBlur = $backgroundBlur | resources.Minify | resources.Fingerprint ($.Site.Params.fingerprintAlgorithm | default "sha512") }}
+<script type="text/javascript" src="{{ $backgroundBlur.RelPermalink }}" integrity="{{ $backgroundBlur.Data.Integrity }}" data-target-id="background-blur"></script>
+{{ end }}
+{{- end -}}
diff --git a/layouts/partials/hero/basic.html b/layouts/partials/hero/basic.html
index de8e0882..54e84ed3 100644
--- a/layouts/partials/hero/basic.html
+++ b/layouts/partials/hero/basic.html
@@ -1,29 +1,37 @@
-{{ $images := .Resources.ByType "image" }}
-{{ $backgroundImage := $images.GetMatch "*background*" }}
-{{ if not $backgroundImage }}
-  {{ $backgroundImage := $images.GetMatch "*feature*" }}
-{{ end }}
-{{ if not $backgroundImage }}
-  {{ $backgroundImage = $images.GetMatch "{*cover*,*thumbnail*}" }}
-{{ end }}
-{{ if and (not $backgroundImage) .Params.featureimage }}
-  {{ $backgroundImage = resources.GetRemote .Params.featureimage }}
-{{ end }}
-{{ if not $backgroundImage }}
-  {{ with .Site.Params.defaultBackgroundImage }}
-    {{ if or (strings.HasPrefix . "http:") (strings.HasPrefix . "https:") }}
-      {{ $backgroundImage = resources.GetRemote . }}
-    {{ else }}
-      {{ $backgroundImage = resources.Get . }}
-    {{ end }}
-  {{ end }}
-{{ end }}
 {{ $disableImageOptimization := .Page.Site.Params.disableImageOptimization | default false }}
-{{ if and ($backgroundImage) (not (or ($disableImageOptimization) (strings.HasSuffix $backgroundImage.Name ".svg"))) }}
-  {{ $backgroundImage = $backgroundImage.Resize (print ($.Site.Params.backgroundImageWidth | default "1200") "x") }}
+
+{{- $images := .Resources.ByType "image" -}}
+{{- $featured := $images.GetMatch "*background*" -}}
+{{- if not $featured }}{{ $featured = $images.GetMatch "*feature*" }}{{ end -}}
+{{- if not $featured }}{{ $featured = $images.GetMatch "{*cover*,*thumbnail*}" }}{{ end -}}
+
+{{ if and .Params.featureimage (not $featured) }}
+  {{- $url:= .Params.featureimage -}}
+  {{ $featured = resources.GetRemote $url }}
 {{ end }}
 
-{{ with $backgroundImage }}
-  {{ $className := printf "background-image-%s" (md5 .RelPermalink) }}
-  <div class="fixed inset-x-0 top-0 h-[800px] single_hero_background nozoom {{ $className }}"></div>
-{{ end }}
+{{- if not $featured }}
+  {{ with .Site.Params.defaultBackgroundImage }}
+    {{ if or (strings.HasPrefix . "http:") (strings.HasPrefix . "https:") }}
+      {{ $featured = resources.GetRemote . }}
+    {{ else }}
+      {{ $featured = resources.Get . }}
+    {{ end }}
+  {{ 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 }}
+  {{ end }}
+{{- end -}}
diff --git a/layouts/partials/hero/thumbAndBackground.html b/layouts/partials/hero/thumbAndBackground.html
index 841f83ec..2a8448cb 100644
--- a/layouts/partials/hero/thumbAndBackground.html
+++ b/layouts/partials/hero/thumbAndBackground.html
@@ -1,77 +1,98 @@
-{{ $images := .Resources.ByType "image" }}
-{{ $backgroundImage := $images.GetMatch "*background*" }}
-{{ if not $backgroundImage }}
+{{ $disableImageOptimization := .Page.Site.Params.disableImageOptimization | default false }}
+
+{{- $images := .Resources.ByType "image" -}}
+{{- $background := $images.GetMatch "*background*" -}}
+
+{{- if not $background }}
   {{ with .Site.Params.defaultBackgroundImage }}
     {{ if or (strings.HasPrefix . "http:") (strings.HasPrefix . "https:") }}
-      {{ $backgroundImage = resources.GetRemote . }}
+      {{ $background = resources.GetRemote . }}
     {{ else }}
-      {{ $backgroundImage = resources.Get . }}
+      {{ $background = resources.Get . }}
     {{ end }}
   {{ end }}
-{{ end }}
-{{ if not $backgroundImage }}
-  {{ $backgroundImage = $images.GetMatch "{*cover*,*thumbnail*}" }}
-{{ end }}
-{{ if not $backgroundImage }}
-  {{ $backgroundImage := $images.GetMatch "*feature*" }}
-{{ end }}
-{{ $disableImageOptimization := .Page.Site.Params.disableImageOptimization | default false }}
-{{ if and ($backgroundImage) (not (or ($disableImageOptimization) (strings.HasSuffix $backgroundImage.Name ".svg"))) }}
-  {{ $backgroundImage = $backgroundImage.Resize (print ($.Site.Params.backgroundImageWidth | default "1200") "x") }}
-{{ end }}
+{{ end -}}
 
-{{ $featuredImage := $images.GetMatch "*feature*" }}
-{{ if not $featuredImage }}
-  {{ $featuredImage = $images.GetMatch "{*cover*,*thumbnail*}" }}
+{{- if not $background }}{{ $background = $images.GetMatch "{*cover*,*thumbnail*}" }}{{ end -}}
+{{- if not $background }}{{ $background = $images.GetMatch "*feature*" }}{{ end -}}
+{{- $featured := $images.GetMatch "*feature*" -}}
+{{- if not $featured }}{{ $featured = $images.GetMatch "{*cover*,*thumbnail*}" }}{{ end -}}
+{{ if .Params.featureimage }}
+  {{- $url:= .Params.featureimage -}}
+  {{- if not $featured }}{{ $featured = resources.GetRemote $url }}{{ end -}}
 {{ end }}
-{{ if and (not $featuredImage) .Params.featureimage }}
-  {{ $featuredImage = resources.GetRemote .Params.featureimage }}
-{{ end }}
-{{ if not $featuredImage }}
-  {{ $featuredImage = resources.Get .Site.Params.defaultFeaturedImage }}
-{{ end }}
-{{ if not $featuredImage }}
-  {{ $featuredImage := $images.GetMatch "*background*" }}
-{{ end }}
-{{ if not $featuredImage }}
+{{- if not $featured }}{{ $featured = $images.GetMatch "*background*" }}{{ end -}}
+
+{{- if not $featured }}
   {{ with .Site.Params.defaultFeaturedImage }}
     {{ if or (strings.HasPrefix . "http:") (strings.HasPrefix . "https:") }}
-      {{ $featuredImage = resources.GetRemote . }}
+      {{ $featured = resources.GetRemote . }}
     {{ else }}
-      {{ $featuredImage = resources.Get . }}
+      {{ $featured = resources.Get . }}
     {{ end }}
   {{ end }}
-{{ end }}
-{{ if and ($featuredImage) (not (or ($disableImageOptimization) (strings.HasSuffix $featuredImage.Name ".svg"))) }}
-  {{ $featuredImage = $featuredImage.Resize "600x" }}
-{{ end }}
+{{ end -}}
 
-{{ $isParentList := eq (.Scratch.Get "scope") "list"  }}
+{{ $isParentList := eq (.Scratch.Get "scope") "list" }}
 {{ $shouldBlur := $.Params.layoutBackgroundBlur | default (or
-        (and ($.Site.Params.article.layoutBackgroundBlur | default true) (not $isParentList))
-        (and ($.Site.Params.list.layoutBackgroundBlur | default true) ($isParentList))
-    ) }}
+  (and ($.Site.Params.article.layoutBackgroundBlur | default true) (not $isParentList))
+  (and ($.Site.Params.list.layoutBackgroundBlur | default true) ($isParentList))
+  )
+}}
 
-{{ with $featuredImage }}
-  {{ $className := printf "background-image-%s" (md5 .RelPermalink) }}
-  <div class="w-full rounded-md h-36 md:h-56 lg:h-72 single_hero_basic nozoom {{ $className }}"></div>
-{{ end }}
+{{- 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 $backgroundImage }}
-  {{ $className := printf "background-image-%s" (md5 .RelPermalink) }}
-  <div class="fixed inset-x-0 top-0 h-[800px] single_hero_background nozoom {{ $className }}">
-    <div
-      class="absolute inset-0 bg-gradient-to-t from-neutral dark:from-neutral-800 to-transparent mix-blend-normal">
-    </div>
-    <div
-      class="absolute inset-0 opacity-30 dark:opacity-60 bg-gradient-to-t from-neutral dark:from-neutral-800 to-neutral dark:to-neutral-800 mix-blend-normal">
-    </div>
-  </div>
-{{ end }}
+{{- with $background -}}
+
+  {{ if or $disableImageOptimization (strings.HasSuffix . ".svg") }}
+    {{ with . }}
+      <div
+        class="fixed inset-x-0 top-0 h-[800px] single_hero_background nozoom"
+        style="background-image:url({{ .RelPermalink }});">
+        <div
+          class="absolute inset-0 bg-gradient-to-t from-neutral dark:from-neutral-800 to-transparent mix-blend-normal"></div>
+        <div
+          class="absolute inset-0 opacity-30 dark:opacity-60 bg-gradient-to-t from-neutral dark:from-neutral-800 to-neutral dark:to-neutral-800 mix-blend-normal"></div>
+      </div>
+    {{ end }}
+  {{ else }}
+    {{ with .Resize (print ($.Site.Params.backgroundImageWidth | default "1200") "x") }}
+      <div
+        class="fixed inset-x-0 top-0 h-[800px] single_hero_background nozoom"
+        style="background-image:url({{ .RelPermalink }});">
+        <div
+          class="absolute inset-0 bg-gradient-to-t from-neutral dark:from-neutral-800 to-transparent mix-blend-normal"></div>
+        <div
+          class="absolute inset-0 opacity-30 dark:opacity-60 bg-gradient-to-t from-neutral dark:from-neutral-800 to-neutral dark:to-neutral-800 mix-blend-normal"></div>
+      </div>
+    {{ end }}
+  {{ end }}
+
+{{- end -}}
 
 {{ if $shouldBlur | default false }}
-  <div id="background-blur" class="fixed opacity-0 inset-x-0 top-0 h-full single_hero_background nozoom backdrop-blur-2xl"></div>
+  <div
+    id="background-blur"
+    class="fixed opacity-0 inset-x-0 top-0 h-full single_hero_background nozoom backdrop-blur-2xl"></div>
   {{ $backgroundBlur := resources.Get "js/background-blur.js" }}
-  {{ $backgroundBlur = $backgroundBlur | resources.Minify | resources.Fingerprint ($.Site.Params.fingerprintAlgorithm | default "sha512") }}
-  <script type="text/javascript" src="{{ $backgroundBlur.RelPermalink }}" integrity="{{ $backgroundBlur.Data.Integrity }}" data-target-id="background-blur"></script>
+  {{ $backgroundBlur = $backgroundBlur | resources.Minify | resources.Fingerprint (.Site.Params.fingerprintAlgorithm | default "sha512") }}
+  <script
+    type="text/javascript"
+    src="{{ $backgroundBlur.RelPermalink }}"
+    integrity="{{ $backgroundBlur.Data.Integrity }}"
+    data-target-id="background-blur"></script>
 {{ end }}
diff --git a/layouts/partials/term-link/card.html b/layouts/partials/term-link/card.html
index 31fdc225..280a74d4 100644
--- a/layouts/partials/term-link/card.html
+++ b/layouts/partials/term-link/card.html
@@ -1,29 +1,32 @@
 <a href="{{ .Page.RelPermalink }}" class="min-w-full">
   <div
     class="border border-neutral-200 dark:border-neutral-700 border-2 rounded overflow-hidden shadow-2xl relative">
+    {{ $disableImageOptimization := .Page.Site.Params.disableImageOptimization | default false }}
+
     {{- with site.Params.images -}}
       {{- range first 6 . }}
         <meta property="og:image" content="{{ . | absURL }}">
       {{ end -}}
     {{- else -}}
-      {{ $images := .Page.Resources.ByType "image" }}
-      {{ $featuredImage := $images.GetMatch "*feature*" }}
-      {{ if not $featuredImage }}
-        {{ $featuredImage = $images.GetMatch "{*cover*,*thumbnail*}" }}
-      {{ end }}
-      {{ $disableImageOptimization := .Page.Site.Params.disableImageOptimization | default false }}
-      {{ if and ($featuredImage) (not (or ($disableImageOptimization) (strings.HasSuffix $featuredImage.Name ".svg"))) }}
-        {{ $featuredImage = $featuredImage.Resize "600x" }}
-      {{ end }}
-      {{ with $featuredImage }}
-        {{ $className := printf "background-image-%s" (md5 .RelPermalink) }}
-        <div class="w-full thumbnail_card_related nozoom {{ $className }}"></div>
-      {{ else }}
-        {{ with site.Params.images }}
-          <meta property="og:image" content="{{ index . 0 | absURL }}" />
+      {{- $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 }}
-    {{ end }}
+      {{- else -}}
+        {{- with site.Params.images }}
+          <meta property="og:image" content="{{ index . 0 | absURL }}">
+        {{ end -}}
+      {{- end -}}
+    {{- end -}}
 
     {{ if site.Params.taxonomy.showTermCount | default true }}
       <span class="absolute bottom-0 right-0 m-2">