fix(a11y): disableImages not working when layoutBackgroundBlur is false

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("background-image");
-          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;
         }
-        });
       },
     },
 

layouts/partials/header/basic.html

@@ -198,14 +198,17 @@
       </div>
 
       <div class="space-y-5">
-        {{- $toggles := slice
+        {{ $toggles := slice }}
-          (dict "id" (print $prefix "disable-blur") "label" (i18n "a11y.disable_blur"))
+        {{ $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">

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") }}
+    {{ $imageURL := .RelPermalink }}
-      {{ with . }}
+    {{ if not (or $disableImageOptimization (eq .MediaType.SubType "svg")) }}
+      {{ $imageURL = (.Resize (print ($.Site.Params.backgroundImageWidth | default "1200") "x")).RelPermalink }}
+    {{ end }}
     <img
-          id="background-image-main"
+      id="background-image"
-          src="{{ .RelPermalink }}"
+      src="{{ $imageURL }}"
       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 }}
-    {{ end }}
     <div
       class="from-neutral absolute inset-0 bg-gradient-to-t to-transparent mix-blend-normal dark:from-neutral-800"></div>
     <div

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 }}