diff --git a/plugins/performer-poster-backdrop/README.md b/plugins/performer-poster-backdrop/README.md index ca22e5c1..81e08344 100644 --- a/plugins/performer-poster-backdrop/README.md +++ b/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 diff --git a/plugins/performer-poster-backdrop/performer-poster-backdrop.css b/plugins/performer-poster-backdrop/performer-poster-backdrop.css index f2d5f99d..3d23432c 100644 --- a/plugins/performer-poster-backdrop/performer-poster-backdrop.css +++ b/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; diff --git a/plugins/performer-poster-backdrop/performer-poster-backdrop.js b/plugins/performer-poster-backdrop/performer-poster-backdrop.js index 322532de..c559006a 100644 --- a/plugins/performer-poster-backdrop/performer-poster-backdrop.js +++ b/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); diff --git a/plugins/performer-poster-backdrop/performer-poster-backdrop.yml b/plugins/performer-poster-backdrop/performer-poster-backdrop.yml index b17721e9..f9e52ea5 100644 --- a/plugins/performer-poster-backdrop/performer-poster-backdrop.yml +++ b/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: