← back to 1940swallpaper
4-grid hero: drop-in script + crop CSS + initial 4 newest products
37bb7bf3e63a8d494e76d30ffc7d8e7187053b5d · 2026-05-14 08:48:47 -0700 · Steve
Files touched
A data/hero-4grid.jsonA public/hero-4grid.jsM public/index.html
Diff
commit 37bb7bf3e63a8d494e76d30ffc7d8e7187053b5d
Author: Steve <steve@designerwallcoverings.com>
Date: Thu May 14 08:48:47 2026 -0700
4-grid hero: drop-in script + crop CSS + initial 4 newest products
---
data/hero-4grid.json | 113 +++++++++++++++++++++++++++++++++++++++++++++++++++
public/hero-4grid.js | 104 +++++++++++++++++++++++++++++++++++++++++++++++
public/index.html | 12 +++++-
3 files changed, 227 insertions(+), 2 deletions(-)
diff --git a/data/hero-4grid.json b/data/hero-4grid.json
new file mode 100644
index 0000000..91c08c4
--- /dev/null
+++ b/data/hero-4grid.json
@@ -0,0 +1,113 @@
+{
+ "cells": [
+ {
+ "kind": "room",
+ "sku": "elaines-authentic-vintage-1950s-wallpapers-5-1",
+ "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/mockup-Dig-5011669_mylar_gold_b3129400-2420-4928-9d9a-99c48cb5435f.gif?v=1756868050",
+ "title": "SPRINGFIELD 1950'S BIRD BRANCHES on Gold Mylar Chinoiserie | Architectural Wallcoverings"
+ },
+ {
+ "kind": "pattern",
+ "sku": "dig_4350114_vintage_wallpaper_designer_wallcoverings-1",
+ "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/ScreenShot2023-11-01at8.38.31AM_ac0ddf5c-efbf-4c8b-a8c5-3216fd8c1d93.png?v=1756872237",
+ "title": "MOUNT VERNON PATRIOTIC AMERICANA 1940'S Traditional | Architectural Wallcoverings"
+ },
+ {
+ "kind": "room",
+ "sku": "ediths-authentic-vintage-1950s-wallpaper-1-1",
+ "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/Dig-58637_black_c423fb62-a907-46ba-85d8-ec9a201a3f2c.jpg?v=1756867882",
+ "title": "Edith's 1950's Stripe Traditional | Architectural Wallcoverings"
+ },
+ {
+ "kind": "pattern",
+ "sku": "dig_58637_vintage_wallpaper_designer_wallcoverings-1",
+ "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/Dig-58637_original_color.jpg?v=1756871267",
+ "title": "Edith's 1950's Stripe Mid-Century Modern | Architectural Wallcoverings"
+ }
+ ],
+ "rotation_pool": [
+ {
+ "sku": "elaines-authentic-vintage-1950s-wallpapers-5-1",
+ "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/mockup-Dig-5011669_mylar_gold_b3129400-2420-4928-9d9a-99c48cb5435f.gif?v=1756868050",
+ "title": "SPRINGFIELD 1950'S BIRD BRANCHES on Gold Mylar Chinoiserie | Architectural Wallcoverings"
+ },
+ {
+ "sku": "dig_4350114_vintage_wallpaper_designer_wallcoverings-1",
+ "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/ScreenShot2023-11-01at8.38.31AM_ac0ddf5c-efbf-4c8b-a8c5-3216fd8c1d93.png?v=1756872237",
+ "title": "MOUNT VERNON PATRIOTIC AMERICANA 1940'S Traditional | Architectural Wallcoverings"
+ },
+ {
+ "sku": "ediths-authentic-vintage-1950s-wallpaper-1-1",
+ "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/Dig-58637_black_c423fb62-a907-46ba-85d8-ec9a201a3f2c.jpg?v=1756867882",
+ "title": "Edith's 1950's Stripe Traditional | Architectural Wallcoverings"
+ },
+ {
+ "sku": "dig_58637_vintage_wallpaper_designer_wallcoverings-1",
+ "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/Dig-58637_original_color.jpg?v=1756871267",
+ "title": "Edith's 1950's Stripe Mid-Century Modern | Architectural Wallcoverings"
+ },
+ {
+ "sku": "dig_5211109_vintage_wallpaper_designer_wallcoverings-1",
+ "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/Vintage_Wallpaper_Reproduction1952_Dig-5211109.jpg?v=1756871453",
+ "title": "Asbury 1950's Traditional | Architectural Wallcoverings"
+ },
+ {
+ "sku": "dig_5211132_vintage_wallpaper_designer_wallcoverings-1",
+ "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/Vintage_Wallpaper_Reproduction_1952_Dig-5211132_cda5b52d-def4-4de0-b66e-334d2e3d3420.jpg?v=1756871434",
+ "title": "Alexander 1950's Bamboo Birds Mid-Century Modern | Architectural Wallcoverings"
+ },
+ {
+ "sku": "dig_435095_vintage_wallpaper_designer_wallcoverings-1",
+ "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/ScreenShot2022-04-13at9.11.38AM.png?v=1756872268",
+ "title": "Winchester 1940's Branches Traditional | Architectural Wallcoverings"
+ },
+ {
+ "sku": "dig_521178_vintage_wallpaper_designer_wallcoverings-1",
+ "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/ScreenShot2023-10-06at7.25.32AM_12d978c0-e891-4997-b981-99359cf45a54.png?v=1756871469",
+ "title": "Whitingham 1950's Scenic Mid-Century Modern | Architectural Wallcoverings"
+ },
+ {
+ "sku": "dig_5011145_vintage_wallpaper_designer_wallcoverings",
+ "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/ScreenShot2023-10-01at3.55.01PM.png?v=1756708443",
+ "title": "Waterville 1950's Bird Floral Mid-Century Modern | Architectural Wallcoverings"
+ },
+ {
+ "sku": "dig_51288_vintage_wallpaper_designer_wallcoverings-1",
+ "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/ScreenShot2023-10-04at9.18.23AM_dd52949e-76f7-486e-9548-13e7bccc8b89.png?v=1756871630",
+ "title": "Sandra's 1950's Masquerade Retro | Architectural Wallcoverings"
+ },
+ {
+ "sku": "sallys-authentic-scenic-vintage-1950s-wallpaper-2-1",
+ "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/Dig-5130217_open_0f901386-7d4e-4c6f-8840-4a9f90c44c64.png?v=1756867948",
+ "title": "Sally's Authentic Scenic Vintage 1950's Retro | Architectural Wallcoverings"
+ },
+ {
+ "sku": "dig_55330_vintage_wallpaper_designer_wallcoverings-1",
+ "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/ScreenShot2023-08-28at11.54.40AM_07ebbf0f-bad0-4248-b807-8236e0b05f25.png?v=1756871371",
+ "title": "Ramona's Peacock 1950's Chinoiserie | Architectural Wallcoverings"
+ },
+ {
+ "sku": "dig_5011150_vintage_wallpaper_designer_wallcoverings-1",
+ "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/ScreenShot2022-01-11at8.58.29PM.png?v=1756871847",
+ "title": "Pitts 1950's Peacocks Chinoiserie | Architectural Wallcoverings"
+ },
+ {
+ "sku": "dig-55330-designerwallcoverings-com-1",
+ "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/ScreenShot2023-10-04at9.38.07AM_d8261d6f-491d-4378-9651-3ddc4214a9a3.png?v=1756867594",
+ "title": "Pennsylvania 1950's Peacocks Chinoiserie | Architectural Wallcoverings"
+ },
+ {
+ "sku": "dig-55330-designerwallcoverings-com",
+ "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/ScreenShot2023-10-04at9.38.07AM.png?v=1756707574",
+ "title": "Pennsylvania 1950's Peacock Chinoiserie | Architectural Wallcoverings"
+ },
+ {
+ "sku": "dig_4350118_vintage_wallpaper_designer_wallcoverings-1",
+ "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/ScreenShot2023-10-12at6.19.07AM.png?v=1756872222",
+ "title": "Milford 1940's Toile Traditional | Architectural Wallcoverings"
+ }
+ ],
+ "autocycle_seconds": 6,
+ "updated_at": "2026-05-14T15:38:53.387Z",
+ "generated_by": "dw-4grid-fanout.js"
+}
\ No newline at end of file
diff --git a/public/hero-4grid.js b/public/hero-4grid.js
new file mode 100644
index 0000000..1bc244c
--- /dev/null
+++ b/public/hero-4grid.js
@@ -0,0 +1,104 @@
+/**
+ * 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 || '/data/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/index.html b/public/index.html
index 519819a..976b3b4 100644
--- a/public/index.html
+++ b/public/index.html
@@ -175,7 +175,14 @@ textarea:focus-visible,
<meta name="twitter:description" content="1940s Wallpaper — Atomic, cottagecore & post-war wallcoverings.">
<meta name="twitter:image" content="https://1940swallpaper.com/hero-bg.jpg">
<!-- graphics-loop pass 13: footer + fb -->
-<style id="ns-modal-fix">.ns-modal{display:none}.ns-modal.show{display:flex;align-items:center;justify-content:center;position:fixed;inset:0;background:rgba(0,0,0,0.6);z-index:1000}.ns-modal-card{background:#faf6ef;color:#1a1714;padding:32px;border-radius:12px;max-width:480px;width:90%;position:relative;box-shadow:0 20px 60px rgba(0,0,0,0.3)}.ns-modal .close-x{position:absolute;top:12px;right:16px;background:transparent;border:0;font-size:24px;cursor:pointer;color:#1a1714}.ns-modal h3{margin:0 0 8px;font-size:22px;font-weight:400}.ns-modal .sub{color:rgba(0,0,0,0.5);margin:0 0 20px;font-size:14px}.ns-actions{display:grid;gap:10px}.ns-action{display:flex;gap:14px;align-items:center;color:inherit;text-decoration:none;padding:14px 16px;border:1px solid rgba(0,0,0,0.12);border-radius:8px}.ns-action:hover{background:rgba(0,0,0,0.04)}.ns-action .ico{font-size:20px}.ns-action .txt{display:flex;flex-direction:column}.ns-action .txt b{font-weight:600}.ns-action .txt span{font-size:12px;color:rgba(0,0,0,0.5)}</style></head>
+<style id="ns-modal-fix">.ns-modal{display:none}.ns-modal.show{display:flex;align-items:center;justify-content:center;position:fixed;inset:0;background:rgba(0,0,0,0.6);z-index:1000}.ns-modal-card{background:#faf6ef;color:#1a1714;padding:32px;border-radius:12px;max-width:480px;width:90%;position:relative;box-shadow:0 20px 60px rgba(0,0,0,0.3)}.ns-modal .close-x{position:absolute;top:12px;right:16px;background:transparent;border:0;font-size:24px;cursor:pointer;color:#1a1714}.ns-modal h3{margin:0 0 8px;font-size:22px;font-weight:400}.ns-modal .sub{color:rgba(0,0,0,0.5);margin:0 0 20px;font-size:14px}.ns-actions{display:grid;gap:10px}.ns-action{display:flex;gap:14px;align-items:center;color:inherit;text-decoration:none;padding:14px 16px;border:1px solid rgba(0,0,0,0.12);border-radius:8px}.ns-action:hover{background:rgba(0,0,0,0.04)}.ns-action .ico{font-size:20px}.ns-action .txt{display:flex;flex-direction:column}.ns-action .txt b{font-weight:600}.ns-action .txt span{font-size:12px;color:rgba(0,0,0,0.5)}</style><style id="hero4-anti-header-crop">
+/* 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; }
+.card img, .product img { object-position: center 12% !important; }
+</style>
+</head>
<body>
<style id="ns-header-modal-styles">
.ns-header { position: sticky; top: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; padding: 18px 36px; background: rgba(10,10,10,0.92) !important; backdrop-filter: blur(8px); border-bottom: 1px solid rgba(245,241,232,0.06); }
@@ -598,7 +605,8 @@ loadGridPage();
</script>
<!-- ============================================================
DW UNIVERSAL CONTACT MODULE — fashion-house UX
- Inject before </body> in every DW-family sister site.
+ Inject before <script src="/hero-4grid.js" defer></script>
+</body> in every DW-family sister site.
Self-contained: CSS + 4 modals + JS submission handlers.
Uses host site's CSS vars (--bg, --fg, --gold, --rule).
============================================================ -->
← 431a07d favicon: Mag-7-inspired SVG glyph
·
back to 1940swallpaper
·
hero-4grid: relocate json from data/ to public/ for Express 51ee858 →