performer-poster-backdrop: compatibility with Stash v0.31.1

plugins/performer-poster-backdrop/.gitignore

@@ -0,0 +1,2 @@
+# Local debug saves (e.g. saved HTML); not part of the distributed plugin
+example/

plugins/performer-poster-backdrop/README.md

@@ -11,6 +11,7 @@ Adds a blurred poster-style backdrop behind performer headers using the performe
 
 - Applies only to **Performer pages**
 - Uses the performer’s **poster image** as a background layer
+- When this plugin is active, Stash’s built-in performer **background image** (Settings → Interface → **Enable performer background image**) is hidden on that header so you only get one backdrop layer and the name block is not pushed down by a second stack.
 - Adjustable:
   - Opacity
   - Blur strength

plugins/performer-poster-backdrop/performer-poster-backdrop.css

@@ -42,6 +42,15 @@
   overflow: hidden;
 }
 
+/*
+ * Stash core now renders BackgroundImage (.background-image-container) inside the same header.
+ * Our plugin replaces that behavior; leaving both causes a stacked/double header look and can
+ * push layout. Hide native backdrop whenever our hero is present.
+ */
+#performer-page .detail-header.full-width.pb-has-hero .background-image-container {
+  display: none !important;
+}
+
 /* Lift content above banner ONLY in the REAL header */
 #performer-page .detail-header.full-width > *:not(.pb-hero) {
   position: relative;

plugins/performer-poster-backdrop/performer-poster-backdrop.js

@@ -70,8 +70,11 @@
     return map;
   }
 
+  const HEADER_ACTIVE_CLASS = "pb-has-hero";
+
   function removeHero(el) {
     el?.querySelector("." + HERO_CLASS)?.remove();
+    el?.classList.remove(HEADER_ACTIVE_CLASS);
   }
 
   function upsertHero(header, url) {
@@ -81,6 +84,7 @@
       hero.className = HERO_CLASS;
       header.prepend(hero);
     }
+    header.classList.add(HEADER_ACTIVE_CLASS);
     hero.style.backgroundImage = `url("${url}")`;
     return hero;
   }
@@ -144,7 +148,10 @@
     if (!header || !isPerformerRoute()) return removeHero(header);
 
     const img = getPosterImg();
-    if (!img) return;
+    if (!img) {
+      removeHero(header);
+      return;
+    }
 
     const hero = upsertHero(header, img.currentSrc || img.src);
     apply(hero);

plugins/performer-poster-backdrop/performer-poster-backdrop.yml

@@ -1,6 +1,6 @@
 name: Performer Poster Backdrop
 description: Adds a blurred poster backdrop to performer pages.
-version: 1.0.3
+version: 1.1.0
 url: https://discourse.stashapp.cc/t/performer-poster-backdrop/4897
 
 ui: