Hero hydration: upscale to largest Shopify variant

dcac4b64febc14b87b2c41a32cd1490f6d9396c1 · 2026-05-06 17:56:58 -0700 · SteveStudio2

Files touched

M public/index.html

Diff

commit dcac4b64febc14b87b2c41a32cd1490f6d9396c1
Author: SteveStudio2 <stevestudio2@SteveStacStudio.lan>
Date:   Wed May 6 17:56:58 2026 -0700

    Hero hydration: upscale to largest Shopify variant
---
 public/index.html | 21 ++++++++++++++++++++-
 1 file changed, 20 insertions(+), 1 deletion(-)

diff --git a/public/index.html b/public/index.html
index 55708fb..fced77c 100644
--- a/public/index.html
+++ b/public/index.html
@@ -160,7 +160,7 @@ textarea:focus-visible,
 </header>
 
 <section class="cinema">
-  <div class="cinema-bg"></div>
+  <div class="cinema-bg" id="heroBg"></div>
   <div class="corner-mark">Living Texture</div>
   <div class="center-mark">CORK WALLCOVERING<span class="tm">.</span><span class="sub">Living texture</span></div>
   <div class="meta-line">Cork · Bark · Sustainable<span class="num" id="heroNum"></span></div>
@@ -436,6 +436,25 @@ slider.addEventListener('input', e => setDensity(parseInt(e.target.value)));
 const savedDensity = parseInt(localStorage.getItem('cork_theme_density') || '6');
 if (savedDensity >= 4 && savedDensity <= 12) { slider.value = savedDensity; setDensity(savedDensity); }
 
+// DW STANDARD: hero on the front page pulls from products.json[0].image_url
+// (the pinned hero from dw-collections-viewer). Falls back to /hero-bg.jpg if
+// the API is unreachable or no products are configured.
+(async function hydrateHero() {
+  try {
+    const r = await fetch('/api/products?limit=1');
+    if (!r.ok) return;
+    const d = await r.json();
+    let url = d.items && d.items[0] && d.items[0].image_url;
+    if (!url) return;
+    if (/^https:\/\/(?:cdn\.shopify\.com|designerwallcoverings\.com)\//.test(url)) {
+      // Upgrade to largest variant — strip _NxN size suffix before extension
+      url = url.replace(/(_\d+x\d*)(\.(jpg|jpeg|png|webp|gif))(\?|$)/i, '$2$4');
+      const bg = document.getElementById('heroBg');
+      if (bg) bg.style.backgroundImage = `url('${url}')`;
+    }
+  } catch(e){}
+})();
+
 // Sort select — DW STANDARD on every product-rendering site
 const sortSel = document.getElementById('sortSelect');
 if (sortSel) {

← 3791e1f Add sort dropdown + sortProducts() — Newest/Color/Style/SKU/ · back to Corkwallcovering · graphic-loop pass 2: fix .corner-mark contrast + soften hero 0bb44d6 →