← back to Linenwallpaper
hero/ideas: single big full-bleed hero (remove 2x2 four-square grid + hero-4grid.js/json + inert CSS), collapse Ideas to one rail
59e319133b8ebb248e86256e8f7a0b1497bf0d6f · 2026-06-01 14:16:29 -0700 · Steve Abrams
Files touched
D public/hero-4grid.jsD public/hero-4grid.jsonM public/index.html
Diff
commit 59e319133b8ebb248e86256e8f7a0b1497bf0d6f
Author: Steve Abrams <steve@designerwallcoverings.com>
Date: Mon Jun 1 14:16:29 2026 -0700
hero/ideas: single big full-bleed hero (remove 2x2 four-square grid + hero-4grid.js/json + inert CSS), collapse Ideas to one rail
---
public/hero-4grid.js | 112 ------------------------------------------------
public/hero-4grid.json | 113 -------------------------------------------------
public/index.html | 12 +-----
3 files changed, 2 insertions(+), 235 deletions(-)
diff --git a/public/hero-4grid.js b/public/hero-4grid.js
deleted file mode 100644
index 54a9cbb..0000000
--- a/public/hero-4grid.js
+++ /dev/null
@@ -1,112 +0,0 @@
-/**
- * hero-4grid.js — universal 2×2 rotating hero for DW-family sites.
- *
- * What it does:
- * - Fetches /data/hero-4grid.json on load
- * - Switches the hero to 4-square mode (data-hero-mode="four-square")
- * - Paints 4 cells with the configured images
- * - Auto-cycles each cell every N seconds, rotating through the pool
- * - Applies object-fit: cover; object-position: center 12% to ENFORCE
- * the "never show image with header" rule
- *
- * Drop-in: <script src="/hero-4grid.js" defer></script>
- *
- * Per-site override: set window.Hero4GridConfig = { url, autocycle } before load.
- */
-(function () {
- 'use strict';
- if (window.__hero4GridLoaded) return;
- window.__hero4GridLoaded = true;
-
- var CFG = window.Hero4GridConfig || {};
- var URL = CFG.url || '/hero-4grid.json';
-
- function inject(cellEls, grid) {
- // Switch hero mode
- document.documentElement.dataset.heroMode = 'four-square';
- var cinema = document.querySelector('.cinema');
- if (!cinema) return;
- // Build .cinema-grid if absent
- var gridEl = cinema.querySelector('.cinema-grid');
- if (!gridEl) {
- gridEl = document.createElement('div');
- gridEl.className = 'cinema-grid';
- cinema.appendChild(gridEl);
- }
- gridEl.innerHTML = '';
- for (var i = 0; i < 4; i++) {
- var cell = document.createElement('div');
- cell.className = 'cell hero4-cell';
- cell.dataset.idx = i;
- gridEl.appendChild(cell);
- }
- // Anti-header crop CSS — applied via inline so it ALWAYS wins
- var style = document.createElement('style');
- style.id = 'hero4-crop';
- // Self-contained: inject the 2×2 LAYOUT too (not just the crop), so the grid
- // works on any site that has the <script> tag even if its index.html never
- // shipped .cinema-grid CSS. Hides the single .cinema-bg only once four-square
- // mode is actually active (set in inject()), so a fetch failure keeps the
- // static hero. Appended last → wins over any per-site .cinema-grid at equal
- // specificity; identical values so sites that DO define it are unaffected.
- style.textContent =
- '.cinema-grid{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:0;z-index:0;}' +
- '.hero4-cell{width:100%;height:100%;background-size:cover !important;background-position:center 12% !important;background-repeat:no-repeat;transition:opacity 600ms ease;}' +
- '.hero4-cell.swap-out{opacity:0;}' +
- '[data-hero-mode="four-square"] .cinema-bg{display:none !important;}';
- document.head.appendChild(style);
-
- paint(grid);
- if (grid.rotation_pool && grid.rotation_pool.length > 4) {
- startRotation(grid);
- }
- }
-
- function paint(grid) {
- var cells = document.querySelectorAll('.hero4-cell');
- for (var i = 0; i < cells.length; i++) {
- var c = grid.cells[i];
- if (c && c.image_url) {
- cells[i].style.backgroundImage = "url('" + c.image_url + "')";
- cells[i].title = c.title || '';
- }
- }
- }
-
- function startRotation(grid) {
- var sec = Number(grid.autocycle_seconds) || 6;
- var pool = grid.rotation_pool.slice();
- // Index per cell — start with the next image after the initial 4
- var nextIdx = [4 % pool.length, 5 % pool.length, 6 % pool.length, 7 % pool.length];
- var cellIdx = 0;
- setInterval(function () {
- if (document.hidden) return; // pause when tab hidden
- var cells = document.querySelectorAll('.hero4-cell');
- var cell = cells[cellIdx];
- if (!cell) return;
- var next = pool[nextIdx[cellIdx] % pool.length];
- if (!next || !next.image_url) { cellIdx = (cellIdx + 1) % 4; return; }
- // Preload then swap
- var pre = new Image();
- pre.onload = function () {
- cell.classList.add('swap-out');
- setTimeout(function () {
- cell.style.backgroundImage = "url('" + next.image_url + "')";
- cell.title = next.title || '';
- cell.classList.remove('swap-out');
- }, 600);
- };
- pre.src = next.image_url;
- nextIdx[cellIdx] = (nextIdx[cellIdx] + 4) % pool.length;
- cellIdx = (cellIdx + 1) % 4;
- }, sec * 1000);
- }
-
- fetch(URL, { credentials: 'same-origin' })
- .then(function (r) { return r.ok ? r.json() : null; })
- .then(function (grid) {
- if (!grid || !grid.cells || !Array.isArray(grid.cells)) return;
- inject(null, grid);
- })
- .catch(function (e) { console.warn('[hero-4grid] fetch failed:', e); });
-})();
diff --git a/public/hero-4grid.json b/public/hero-4grid.json
deleted file mode 100644
index fbdf8b2..0000000
--- a/public/hero-4grid.json
+++ /dev/null
@@ -1,113 +0,0 @@
-{
- "cells": [
- {
- "kind": "room",
- "sku": "vaticano-durable-vinyl-dur-72384",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/DUR-72384-sample-clean.jpg?v=1774485305",
- "title": "Vaticano Durable Vinyl | Hollywood Wallcoverings"
- },
- {
- "kind": "pattern",
- "sku": "paddock-type-ii-vinyl-wallcovering-xpd-48174",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/xpd-48174-sample-paddock-type-ii-vinyl-hollywood-wallcoverings.jpg?v=1775728569",
- "title": "Paddock Type II Vinyl | Hollywood Wallcoverings"
- },
- {
- "kind": "room",
- "sku": "milbanks-metallic-grasscloth-vinyl-dwx-58162",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/dwx-58162-sample-milbanks-metallic-grasscloth-vinyl-hollywood-wallcoverings.jpg?v=1775725617",
- "title": "Milbanks Metallic Grasscloth Vinyl | Hollywood Wallcoverings"
- },
- {
- "kind": "pattern",
- "sku": "la-voltere-durable-vinyl-dur-72293",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/DUR-72293-sample-clean.jpg?v=1774485070",
- "title": "la Voltere Durable Vinyl | Hollywood Wallcoverings"
- }
- ],
- "rotation_pool": [
- {
- "sku": "vaticano-durable-vinyl-dur-72384",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/DUR-72384-sample-clean.jpg?v=1774485305",
- "title": "Vaticano Durable Vinyl | Hollywood Wallcoverings"
- },
- {
- "sku": "paddock-type-ii-vinyl-wallcovering-xpd-48174",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/xpd-48174-sample-paddock-type-ii-vinyl-hollywood-wallcoverings.jpg?v=1775728569",
- "title": "Paddock Type II Vinyl | Hollywood Wallcoverings"
- },
- {
- "sku": "milbanks-metallic-grasscloth-vinyl-dwx-58162",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/dwx-58162-sample-milbanks-metallic-grasscloth-vinyl-hollywood-wallcoverings.jpg?v=1775725617",
- "title": "Milbanks Metallic Grasscloth Vinyl | Hollywood Wallcoverings"
- },
- {
- "sku": "la-voltere-durable-vinyl-dur-72293",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/DUR-72293-sample-clean.jpg?v=1774485070",
- "title": "la Voltere Durable Vinyl | Hollywood Wallcoverings"
- },
- {
- "sku": "dwtt-71264-designer-wallcoverings-los-angeles",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/T83044_e31f0cfb-374f-4066-a45d-f56991489743.jpg?v=1733894336",
- "title": "Metal Linen Metallic Grey | Thibaut"
- },
- {
- "sku": "lovela-faux-vertical-durable-walls-xwo-53619",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/tableau-terra_cotta.jpg?v=1777480910",
- "title": "Pippy's Peacock - Silver Room Setting Commercial Wallcovering | Hollywood Wallcoverings"
- },
- {
- "sku": "bellaire-faux-finish-durable-walls-xww-53062",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/xww-53062-sample-bellaire-faux-finish-durable-hollywood-wallcoverings.jpg?v=1775703542",
- "title": "Bellaire Faux Finish Durable | Hollywood Wallcoverings"
- },
- {
- "sku": "bellaire-faux-finish-durable-walls-xww-53063",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/xww-53063-sample-bellaire-faux-finish-durable-hollywood-wallcoverings.jpg?v=1775703545",
- "title": "Bellaire Faux Finish Durable | Hollywood Wallcoverings"
- },
- {
- "sku": "paddock-type-ii-vinyl-wallcovering-xpd-48163",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/xpd-48163-sample-paddock-type-ii-vinyl-hollywood-wallcoverings.jpg?v=1775728337",
- "title": "Paddock Type II Vinyl | Hollywood Wallcoverings"
- },
- {
- "sku": "eatonville-faux-linen-durable-walls-xwt-53320",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/xwt-53320-sample-eatonville-faux-linen-durable-hollywood-wallcoverings.jpg?v=1775710834",
- "title": "Eatonville Faux Linen Durable | Hollywood Wallcoverings"
- },
- {
- "sku": "hawthorne-faux-vertical-silk-durable-walls-xwo-53625",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/xwo-53625-sample-hawthorne-faux-vertical-silk-durable-hollywood-wallcoverings.jpg?v=1775716645",
- "title": "Hawthorne Faux Vertical Silk Durable | Hollywood Wallcoverings"
- },
- {
- "sku": "la-roche-durable-vinyl-dur-72066",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/DUR-72066-sample-clean.jpg?v=1774484242",
- "title": "La Roche Durable Vinyl | Hollywood Wallcoverings"
- },
- {
- "sku": "berkeley-type-ii-vinyl-wallcovering-xju-47331",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/xju-47331-sample-berkeley-type-ii-vinyl-hollywood-wallcoverings.jpg?v=1775704900",
- "title": "Berkeley Type II Vinyl | Hollywood Wallcoverings"
- },
- {
- "sku": "barocco-linen-cream-wallcovering-versace-1",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/667726f3e15a08df98b645c2abdab5a7.jpg?v=1773710515",
- "title": "Barocco Linen Cream Wallcovering | Versace"
- },
- {
- "sku": "wolfgordonwallcovering_dwwg_obt-9460_8-jpg",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/obt-9460_8.jpg?v=1762302571",
- "title": "Orbit - Linen | Wolf Gordon Wallcoverings"
- },
- {
- "sku": "hanover-faux-embossed-faux-linen-walls-xwy-53158",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/loom-flax.jpg?v=1777480768",
- "title": "Hanover Faux Embossed Faux Linen | Hollywood Wallcoverings"
- }
- ],
- "autocycle_seconds": 6,
- "updated_at": "2026-05-14T15:38:53.382Z",
- "generated_by": "dw-4grid-fanout.js"
-}
\ No newline at end of file
diff --git a/public/index.html b/public/index.html
index ee0663b..8525179 100644
--- a/public/index.html
+++ b/public/index.html
@@ -67,10 +67,6 @@ header { position:fixed; top:0; left:0; right:0; display:flex; justify-content:s
.cinema-bg { position:absolute; inset:0; background-size:cover; background-position:center; background-image:url('/hero-bg.jpg') }
.cinema-bg::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0.20) 0%, rgba(0,0,0,0) 35%, rgba(0,0,0,0) 65%, rgba(0,0,0,0.55) 100%) }
/* Hero-mode hooks (R4): both modes share the same min-height — CLS-free */
-[data-hero-mode="four-square"] .cinema-bg { display:none }
-[data-hero-mode="four-square"] .cinema-grid { display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; position:absolute; inset:0 }
-[data-hero-mode="four-square"] .cinema-grid .cell { background-size:cover; background-position:center; border:1px solid rgba(0,0,0,0.4) }
-.cinema-grid { display:none }
.cinema-logo { position:absolute; top:22px; left:32px; font-family: ui-serif, Georgia, serif; font-size:18px; font-weight:500; letter-spacing:0.02em; color:#fff; text-decoration:none; z-index:6; text-shadow:0 1px 4px rgba(0,0,0,0.5) }
/* Below-photo wordmark (R2): brand display lives below the hero, not painted on it */
.hero-wordmark-block { position:relative; padding:38px 32px 24px; text-align:center; background:var(--bg) }
@@ -224,7 +220,7 @@ textarea:focus-visible,
/* Never-show-images-with-headers rule (2026-05-14): every hero image
is cropped to center 12% from the top to defeat vendor watermarks /
scraped-site chrome / banner overlays. */
-.cinema-bg, .hero4-cell, .cell { background-position: center 12% !important; }
+.cinema-bg, .cell { background-position: center 12% !important; }
.card img, .product img { object-position: center 12% !important; }
</style>
<!-- Meta Pixel — INERT until set-fb-pixel.sh is run (does NOT load fbevents.js or hit Meta until flipped) -->
@@ -535,10 +531,7 @@ textarea:focus-visible,
<h2 class="rail-title">New this week</h2>
<div class="rail" id="railNewest"></div>
</div>
- <div class="rail-block">
- <h2 class="rail-title">Curated picks</h2>
- <div class="rail" id="railCurated"></div>
- </div>
+
</section>
<section class="section" id="shop">
@@ -1409,7 +1402,6 @@ async function renderRailSections(){
<!-- corner-nav disabled (UL-hamburger rebuild) -->
<script src="/sku-redact.js" defer></script>
-<!-- hero4-fix: activate 2x2 hero (self-contained; was commented placeholder) -->
<!-- hero-4grid grid DISABLED so the single high-res hero shows full-bleed --><!-- <script src="/hero-4grid.js" defer></script> -->
<!-- Big Red customer chat — lower-left, woman-avatar, vendor-redacted retail persona. -->
<script data-bigred-widget src="https://chat.designerwallcoverings.com/widget.js"
← eea55af disable hero-4grid overlay so the unique high-res room/patte
·
back to Linenwallpaper
·
hero: huge 2520px clean hero from dw_unified (graphic-design 1c3f847 →