← back to Glitterwalls
4-grid hero: drop-in script + crop CSS + initial 4 newest products
534f8aa8f9e49ce2a61ee01eb92ffcd3b4dab539 · 2026-05-14 08:48:49 -0700 · Steve
Files touched
A data/hero-4grid.jsonA public/hero-4grid.jsM public/index.html
Diff
commit 534f8aa8f9e49ce2a61ee01eb92ffcd3b4dab539
Author: Steve <steve@designerwallcoverings.com>
Date: Thu May 14 08:48:49 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 | 10 ++++-
3 files changed, 226 insertions(+), 1 deletion(-)
diff --git a/data/hero-4grid.json b/data/hero-4grid.json
new file mode 100644
index 0000000..257c5fa
--- /dev/null
+++ b/data/hero-4grid.json
@@ -0,0 +1,113 @@
+{
+ "cells": [
+ {
+ "kind": "room",
+ "sku": "GLM-53049--SAMPLE",
+ "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/52ed79611cebe53c7b9e4785f4e1e293_5be138b3-2fb9-4205-889a-d4fccea4facb.jpg?v=1748367002",
+ "title": "Sting Ray Sequin - Black Knight | Glitter Walls"
+ },
+ {
+ "kind": "pattern",
+ "sku": "GLM-53047--SAMPLE",
+ "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/65cb3a9dcddd4dc6d2b2acd12b10e289_c469c983-72a4-4d7d-b0f4-10facbf925a9.jpg?v=1748367005",
+ "title": "Sting Ray Sequin - Honeycomb Gleam | Glitter Walls"
+ },
+ {
+ "kind": "room",
+ "sku": "GLM-53048--SAMPLE",
+ "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/f9600bc969bad4349f77ff4182b6fec9_6bb79739-726b-4865-946b-d6bbd9f18b37.jpg?v=1748367003",
+ "title": "Sting Ray Sequin - Starlight | Glitter Walls"
+ },
+ {
+ "kind": "pattern",
+ "sku": "GLM-53044--SAMPLE",
+ "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/05105c8deca50f93d832fb76cf0faf98_804050f9-d54e-4e27-99d8-0446543d0477.jpg?v=1748367011",
+ "title": "Sting Ray Sequin - Deep Fuschia Pink Purple | Glitter Walls"
+ }
+ ],
+ "rotation_pool": [
+ {
+ "sku": "GLM-53049--SAMPLE",
+ "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/52ed79611cebe53c7b9e4785f4e1e293_5be138b3-2fb9-4205-889a-d4fccea4facb.jpg?v=1748367002",
+ "title": "Sting Ray Sequin - Black Knight | Glitter Walls"
+ },
+ {
+ "sku": "GLM-53047--SAMPLE",
+ "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/65cb3a9dcddd4dc6d2b2acd12b10e289_c469c983-72a4-4d7d-b0f4-10facbf925a9.jpg?v=1748367005",
+ "title": "Sting Ray Sequin - Honeycomb Gleam | Glitter Walls"
+ },
+ {
+ "sku": "GLM-53048--SAMPLE",
+ "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/f9600bc969bad4349f77ff4182b6fec9_6bb79739-726b-4865-946b-d6bbd9f18b37.jpg?v=1748367003",
+ "title": "Sting Ray Sequin - Starlight | Glitter Walls"
+ },
+ {
+ "sku": "GLM-53044--SAMPLE",
+ "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/05105c8deca50f93d832fb76cf0faf98_804050f9-d54e-4e27-99d8-0446543d0477.jpg?v=1748367011",
+ "title": "Sting Ray Sequin - Deep Fuschia Pink Purple | Glitter Walls"
+ },
+ {
+ "sku": "GLM-53046--SAMPLE",
+ "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/e6ec26c09d76c550c6001190e02867eb_42d044b3-7202-4bdb-81bc-8e8a2a7c49a7.jpg?v=1748367008",
+ "title": "Sting Ray Sequin - Vintage Gold | Glitter Walls"
+ },
+ {
+ "sku": "GLM-53042--SAMPLE",
+ "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/e8b777f437a175b4059a6651d9593413_edef852e-4192-4429-bfb6-d419589036c5.jpg?v=1748367015",
+ "title": "Sting Ray Sequin - Aqua Blue | Glitter Walls"
+ },
+ {
+ "sku": "GLM-53043--SAMPLE",
+ "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/09640b4f22204b6d383be8235d2b88d0_7110a804-3c45-4818-8983-195e5915f509.jpg?v=1748367013",
+ "title": "Sting Ray Sequin - Fuschia Pink | Glitter Walls"
+ },
+ {
+ "sku": "GLM-53039--SAMPLE",
+ "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/91f628bad19a629ce69f0a1e8dfc1fd5_c58e83c8-0f80-491f-8ae6-7f322dfc7883.jpg?v=1748367020",
+ "title": "Sting Ray Sequin - Silver Glaze | Glitter Walls"
+ },
+ {
+ "sku": "GLM-53040--SAMPLE",
+ "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/4fb27594303720cb52239481f385b1db_00efce13-e2bd-4821-a47d-70c32ad2cb8d.jpg?v=1748367018",
+ "title": "Sting Ray Sequin - Black Knight | Glitter Walls"
+ },
+ {
+ "sku": "GLM-53041--SAMPLE",
+ "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/278dc6104b1e3816c202fa0cd8d3e758_58a30ba1-bb10-4152-9a33-11912bb14d61.jpg?v=1748367017",
+ "title": "Sting Ray Sequin - Bronze Multi | Glitter Walls"
+ },
+ {
+ "sku": "GLM-53037--SAMPLE",
+ "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/73a925891f9edb8af9f914ca1f8ddb1a_9a043bc9-a44c-40c4-a4f7-b31aa3722cc2.jpg?v=1748367024",
+ "title": "Sting Ray Sequin - Multi Color | Glitter Walls"
+ },
+ {
+ "sku": "GLM-53038--SAMPLE",
+ "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/9bd1f46d8b87de42e168f639746df6a0_21ac11f6-a0a6-4654-8c6b-2481115b6200.jpg?v=1748367022",
+ "title": "Sting Ray Sequin - Gilded Sand | Glitter Walls"
+ },
+ {
+ "sku": "GLM-53035--SAMPLE",
+ "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/0d725321c570648b66d7a725cc7a281b_06e30eea-54d6-460f-a295-e61b72f065e2.jpg?v=1748367028",
+ "title": "Sting Ray Sequin - Fantasy Multi Color | Glitter Walls"
+ },
+ {
+ "sku": "GLM-53036--SAMPLE",
+ "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/bcb13a5cbd631e9306ca645818946b62_f8170a81-6662-4df6-9491-20df24b9ceb5.jpg?v=1748367026",
+ "title": "Sting Ray Sequin - Silver | Glitter Walls"
+ },
+ {
+ "sku": "GLM-53032--SAMPLE",
+ "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/294f25b45a8bda9a58fd90e93b1c7249_37aa53a8-542d-4ce4-9352-6f9e2d32ac7f.jpg?v=1748367034",
+ "title": "Sting Ray Sequin - Blue Silver | Glitter Walls"
+ },
+ {
+ "sku": "GLM-53033--SAMPLE",
+ "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/dbf0b42725a88aa6ed54281619b88a43_92ef8201-ee7c-405d-880d-63a55a44e8f9.jpg?v=1748367032",
+ "title": "Sting Ray Sequin - Opalescent | Glitter Walls"
+ }
+ ],
+ "autocycle_seconds": 6,
+ "updated_at": "2026-05-14T15:38:53.392Z",
+ "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 21fb6ff..d979ef2 100644
--- a/public/index.html
+++ b/public/index.html
@@ -193,6 +193,13 @@ textarea:focus-visible,
<meta name="twitter:description" content="Glitter Walls — curated glitter, sequin & holographic wallcoverings. Memo samples ship free. Trade service from Designer Wallcoverings.">
<meta name="twitter:image" content="https://glitterwalls.com/hero-bg.jpg">
<!-- graphics-loop pass 13: footer + fb -->
+<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">
@@ -742,7 +749,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).
============================================================ -->
← 5e6f47c favicon: Mag-7-inspired SVG glyph
·
back to Glitterwalls
·
hero-4grid: relocate json from data/ to public/ for Express 9110605 →