← back to Restorationwallpaper
hero/ideas: single big full-bleed hero (remove 2x2 four-square grid + hero-4grid.js/json + inert CSS), collapse Ideas to one rail
8be4007e984f92f15b9b8e35f3bc2fd885e3e98a · 2026-06-01 14:16:31 -0700 · Steve Abrams
Files touched
D public/hero-4grid.jsD public/hero-4grid.jsonM public/index.html
Diff
commit 8be4007e984f92f15b9b8e35f3bc2fd885e3e98a
Author: Steve Abrams <steve@designerwallcoverings.com>
Date: Mon Jun 1 14:16:31 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 | 104 ---------------------------------------------
public/hero-4grid.json | 113 -------------------------------------------------
public/index.html | 2 +-
3 files changed, 1 insertion(+), 218 deletions(-)
diff --git a/public/hero-4grid.js b/public/hero-4grid.js
deleted file mode 100644
index c495e6f..0000000
--- a/public/hero-4grid.js
+++ /dev/null
@@ -1,104 +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';
- style.textContent =
- '.hero4-cell{background-size:cover !important;background-position:center 12% !important;transition:opacity 600ms ease;}' +
- '.hero4-cell.swap-out{opacity:0;}';
- 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 41d2180..0000000
--- a/public/hero-4grid.json
+++ /dev/null
@@ -1,113 +0,0 @@
-{
- "cells": [
- {
- "kind": "room",
- "sku": "eur-80217-ncw4200-designer-wallcoverings-los-angeles",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/nina_crop_7513500188723.jpg?v=1775522807",
- "title": "Keightley's Folio 02 - Cool Gray Wallcovering | Nina Campbell"
- },
- {
- "kind": "pattern",
- "sku": "dwkk-gc6272b5c",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/AMW10049_11_fecfd268-cf90-4687-8caf-ad59c4c2aa58.jpg?v=1753123151",
- "title": "Kew - Stone Grey | Kravet Couture | Andrew Martin Museum | Damask Wallcovering Print"
- },
- {
- "kind": "room",
- "sku": "eur-80291-ncw4277-designer-wallcoverings-los-angeles",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/nina_crop_7513502449715.jpg?v=1775523192",
- "title": "Meredith 01 - Off-White Wallcovering | Nina Campbell"
- },
- {
- "kind": "pattern",
- "sku": "vanessa-pink-henna-brocade-wallpaper-wallpaper-cca-82833",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/927b579247f79c1e958ee35729a65d4a.jpg?v=1572309957",
- "title": "Vanessa Pink Henna Brocade Wallcovering Wallcovering"
- }
- ],
- "rotation_pool": [
- {
- "sku": "eur-80217-ncw4200-designer-wallcoverings-los-angeles",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/nina_crop_7513500188723.jpg?v=1775522807",
- "title": "Keightley's Folio 02 - Cool Gray Wallcovering | Nina Campbell"
- },
- {
- "sku": "dwkk-gc6272b5c",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/AMW10049_11_fecfd268-cf90-4687-8caf-ad59c4c2aa58.jpg?v=1753123151",
- "title": "Kew - Stone Grey | Kravet Couture | Andrew Martin Museum | Damask Wallcovering Print"
- },
- {
- "sku": "eur-80291-ncw4277-designer-wallcoverings-los-angeles",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/nina_crop_7513502449715.jpg?v=1775523192",
- "title": "Meredith 01 - Off-White Wallcovering | Nina Campbell"
- },
- {
- "sku": "vanessa-pink-henna-brocade-wallpaper-wallpaper-cca-82833",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/927b579247f79c1e958ee35729a65d4a.jpg?v=1572309957",
- "title": "Vanessa Pink Henna Brocade Wallcovering Wallcovering"
- },
- {
- "sku": "wolfgordonwallcovering_dwwg_alc-4816-jpg",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/alc-4816.jpg?v=1762284375",
- "title": "Alchemy - Antique Gold | Wolf Gordon Wallcoverings"
- },
- {
- "sku": "dwh-67101",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/5151893-william-morris-honeysuckle-medium-by-peacoquettedesigns_4-11_04bf278a-49ba-4f0d-a206-6fe01b324209.jpg?v=1630524932",
- "title": "Saint James Growing Damask Rectangular Table Cloth on Lilly Natural Cotton"
- },
- {
- "sku": "wolfgordonwallcovering_dwwg_metm-571-jpg",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/metm-571.jpg?v=1762300912",
- "title": "Metamorphosis - Antique Gold | Wolf Gordon Wallcoverings"
- },
- {
- "sku": "bouquet-emerald-arte",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/LesTapisseries_Bouquet_97910_Mood_Web_LR-hero_fbee8df6-a478-4711-bf0f-ad3cad8d696d.jpg?v=1775599902",
- "title": "Bouquet Emerald Wallcovering | Arte International"
- },
- {
- "sku": "vanessa-black-henna-brocade-wallpaper-wallpaper-cca-82834",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/498264629730573e1f01c2fb5642e3a4.jpg?v=1572309957",
- "title": "Vanessa Black Henna Brocade Wallcovering Wallcovering"
- },
- {
- "sku": "spencer-paintable-supaglypta-wallpaper-gga-82652",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/7f5da467c7415dd1cf9614c61e0de49b.jpg?v=1750790456",
- "title": "Spencer Paintable Supaglypta | Jeffrey Stevens"
- },
- {
- "sku": "eur-80169-ncw4156-designer-wallcoverings-los-angeles",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/nina_crop_7513498222643.jpg?v=1775522542",
- "title": "Montrose 04 - Off-White Wallcovering | Nina Campbell"
- },
- {
- "sku": "dwkk-g4c183007",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/W3894_1_47d2d5d4-9e80-46ab-9a69-8ead39f962a9.jpg?v=1753120612",
- "title": "W3894-1 Beige | Kravet Design | Damask Resource Library |Damask Metallic Wallcovering Print"
- },
- {
- "sku": "charles-paintable-supaglypta-wallpaper-gga-82654",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/8c13c1069e7150edc12dd28a90799b01.jpg?v=1750790453",
- "title": "Charles Paintable Supaglypta | Jeffrey Stevens"
- },
- {
- "sku": "dwss-72691",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/809-38_image1_e36977ec-9882-4f14-82ae-6f48aa50a0b4.jpg?v=1646105091",
- "title": "Alva forest green sample Wallcovering | Sandberg"
- },
- {
- "sku": "eur-80167-ncw4156-designer-wallcoverings-los-angeles",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/nina_crop_7513498157107.jpg?v=1775522529",
- "title": "Montrose 02 - Pale Aqua Wallcovering | Nina Campbell"
- },
- {
- "sku": "dwtt-72129-designer-wallcoverings-los-angeles",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/T3643.jpg?v=1733892675",
- "title": "Akoya Pearl Antique Tobacco Pearl | Thibaut"
- }
- ],
- "autocycle_seconds": 6,
- "updated_at": "2026-05-14T15:38:53.356Z",
- "generated_by": "dw-4grid-fanout.js"
-}
\ No newline at end of file
diff --git a/public/index.html b/public/index.html
index d600948..04c0e94 100644
--- a/public/index.html
+++ b/public/index.html
@@ -211,7 +211,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) -->
← 3f14248 fleet rebuild: dw-header (hamburgers UL + centered name) + u
·
back to Restorationwallpaper
·
hero: graphic-designer-vetted clean replacement (no baked te 5ab9299 →