From ade00547b3d3bf137641080b65216742ac462062 Mon Sep 17 00:00:00 2001
From: ZhenShuo Leo <98386542+ZhenShuo2021@users.noreply.github.com>
Date: Tue, 5 Aug 2025 16:39:50 +0800
Subject: [PATCH] fix(a11y): disableImages not working when
 layoutBackgroundBlur is false

---
 assets/js/a11y.js                             | 12 ++++------
 layouts/partials/header/basic.html            |  9 ++++---
 layouts/partials/hero/thumbAndBackground.html | 24 +++++++------------
 layouts/partials/home/background.html         |  4 ++--
 4 files changed, 20 insertions(+), 29 deletions(-)

diff --git a/assets/js/a11y.js b/assets/js/a11y.js
index 4c375b7c..48603832 100644
--- a/assets/js/a11y.js
+++ b/assets/js/a11y.js
@@ -16,14 +16,10 @@ window.A11yPanel = (() => {
     disableImages: {
       default: false,
       apply: (enabled) => {
-        document.querySelectorAll("script[data-target-id]").forEach((script) => {
-          const image = document.getElementById(script.getAttribute("data-image-id"));
-          const imageUrl = script.getAttribute("data-image-url");
-          if (image) {
-            image.style.display = enabled ? "none" : "";
-            if (!enabled && imageUrl && !image.src) image.src = imageUrl;
-          }
-        });
+        const image = document.getElementById("background-image");
+        if (image) {
+          image.style.display = enabled ? "none" : "";
+        }
       },
     },
 
diff --git a/layouts/partials/header/basic.html b/layouts/partials/header/basic.html
index 18aab05e..328d04e0 100644
--- a/layouts/partials/header/basic.html
+++ b/layouts/partials/header/basic.html
@@ -198,14 +198,17 @@
       </div>
 
       <div class="space-y-5">
-        {{- $toggles := slice
-          (dict "id" (print $prefix "disable-blur") "label" (i18n "a11y.disable_blur"))
+        {{ $toggles := slice }}
+        {{ $shouldDisableBlur := or site.Params.homepage.layoutBackgroundBlur site.Params.article.layoutBackgroundBlur site.Params.list.layoutBackgroundBlur }}
+        {{ if $shouldDisableBlur }}
+          {{ $toggles = $toggles | append (dict "id" (print $prefix "disable-blur") "label" (i18n "a11y.disable_blur")) }}
+        {{ end }}
+        {{- $toggles = $toggles | append
           (dict "id" (print $prefix "disable-images") "label" (i18n "a11y.disable_images"))
           (dict "id" (print $prefix "underline-links") "label" (i18n "a11y.show_link_underline"))
           (dict "id" (print $prefix "zen-mode") "label" (i18n "article.zen_mode_title.enable"))
         -}}
 
-
         {{- range $toggles }}
           <div class="flex items-center justify-between">
             <label for="{{ .id }}" class="text-sm font-medium text-neutral-700 dark:text-neutral-300">
diff --git a/layouts/partials/hero/thumbAndBackground.html b/layouts/partials/hero/thumbAndBackground.html
index 6e480deb..eb143da6 100644
--- a/layouts/partials/hero/thumbAndBackground.html
+++ b/layouts/partials/hero/thumbAndBackground.html
@@ -59,23 +59,15 @@
 {{- with $background -}}
 
   <div class="single_hero_background nozoom fixed inset-x-0 top-0 h-[800px]">
-    {{ if or $disableImageOptimization (strings.HasSuffix . ".svg") }}
-      {{ with . }}
-        <img
-          id="background-image-main"
-          src="{{ .RelPermalink }}"
-          alt="Background Image"
-          class="absolute inset-0 h-full w-full object-cover">
-      {{ end }}
-    {{ else }}
-      {{ with .Resize (print ($.Site.Params.backgroundImageWidth | default "1200") "x") }}
-        <img
-          id="background-image-main"
-          src="{{ .RelPermalink }}"
-          alt="Background Image"
-          class="absolute inset-0 h-full w-full object-cover">
-      {{ end }}
+    {{ $imageURL := .RelPermalink }}
+    {{ if not (or $disableImageOptimization (eq .MediaType.SubType "svg")) }}
+      {{ $imageURL = (.Resize (print ($.Site.Params.backgroundImageWidth | default "1200") "x")).RelPermalink }}
     {{ end }}
+    <img
+      id="background-image"
+      src="{{ $imageURL }}"
+      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
diff --git a/layouts/partials/home/background.html b/layouts/partials/home/background.html
index 4e3c7534..84eea7b5 100644
--- a/layouts/partials/home/background.html
+++ b/layouts/partials/home/background.html
@@ -22,7 +22,7 @@
           {{ end }}
           {{ if $homepageImage }}
             <img
-              id="homepage-background-image"
+              id="background-image"
               class="nozoom mt-0 mr-0 mb-0 ml-0 h-[1000px] w-full object-cover"
               src="{{ $homepageImage.RelPermalink }}"
               role="presentation">
@@ -100,6 +100,6 @@
     src="{{ $backgroundBlur.RelPermalink }}"
     integrity="{{ $backgroundBlur.Data.Integrity }}"
     data-target-id="background-blur"
-    data-image-id="homepage-background-image"
+    data-image-id="background-image"
     {{ if $homepageImage }}data-image-url="{{ $homepageImage.RelPermalink }}"{{ end }}></script>
 {{ end }}