[object Object]

← back to Corkwallcovering

graphic-loop pass 9: real site name + 20-image hero rotation + 2400px hero res

fc2f6dbb054c5f5087f7d02c012c997c83b58c33 · 2026-05-07 09:13:05 -0700 · Steve

Files touched

Diff

commit fc2f6dbb054c5f5087f7d02c012c997c83b58c33
Author: Steve <steve@designerwallcoverings.com>
Date:   Thu May 7 09:13:05 2026 -0700

    graphic-loop pass 9: real site name + 20-image hero rotation + 2400px hero res
---
 public/index.html               | 38 +++++++++++++++++++++++---------------
 public/index.html.pre-pass9.bak |  6 +++---
 2 files changed, 26 insertions(+), 18 deletions(-)

diff --git a/public/index.html b/public/index.html
index 3bec4e4..0b6c911 100644
--- a/public/index.html
+++ b/public/index.html
@@ -13,7 +13,7 @@
 
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Cork Wallcovering</title>
-<meta name="description" content="Cork Wallcovering — sustainable cork-bark wallcoverings for every room.">
+<meta name="description" content="Cork Wallcovering — Cork-bark & sustainable natural wallcoverings.">
 <meta name="theme-color" content="#FFFEFA">
 <link rel="canonical" href="https://corkwallcovering.com/">
 <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700&display=swap" rel="stylesheet">
@@ -416,23 +416,31 @@ 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() {
+// DW STANDARD: hero rotates through top-20 NEWEST products on each visit
+// (novasuede.com pattern). Fetches /api/products?limit=100, sorts by created_at desc,
+// takes the freshest 20, picks one per visit via localStorage counter.
+// Falls back to static /hero-bg.jpg on any error.
+(async function rotateHero() {
   try {
-    const r = await fetch('/api/products?limit=1');
+    const r = await fetch('/api/products?limit=100');
     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){}
+    const items = (d.items || [])
+      .filter(p => p && p.image_url && /^https:\/\/(?:cdn\.shopify\.com|designerwallcoverings\.com)\//.test(p.image_url))
+      .sort((a,b) => String(b.created_at || '').localeCompare(String(a.created_at || '')))
+      .slice(0, 20);
+    if (!items.length) return;
+    let visits = 0;
+    try {
+      visits = parseInt(localStorage.getItem('hero_visits') || '0', 10) || 0;
+      localStorage.setItem('hero_visits', String(visits + 1));
+    } catch(e) {}
+    const pick = items[visits % items.length];
+    // Strip _NxN size suffix to get the largest CDN variant
+    const url = pick.image_url.replace(/(_\d+x\d*)(\.(jpg|jpeg|png|webp|gif))(\?|$)/i, '$2$4');
+    const bg = document.getElementById('heroBg') || document.getElementById('cinemaBg');
+    if (bg) bg.style.backgroundImage = "url('" + url + "')";
+  } catch (e) {}
 })();
 
 // Sort select — DW STANDARD on every product-rendering site
diff --git a/public/index.html.pre-pass9.bak b/public/index.html.pre-pass9.bak
index 525cfc8..3bec4e4 100644
--- a/public/index.html.pre-pass9.bak
+++ b/public/index.html.pre-pass9.bak
@@ -12,8 +12,8 @@
 </script>
 
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
-<title>Atelier Saddle — cork, considered.</title>
-<meta name="description" content="Atelier Saddle — a single-material atelier devoted to cork wallcoverings. Considered. Saddle-stitched. Real samples on request.">
+<title>Cork Wallcovering</title>
+<meta name="description" content="Cork Wallcovering — sustainable cork-bark wallcoverings for every room.">
 <meta name="theme-color" content="#FFFEFA">
 <link rel="canonical" href="https://corkwallcovering.com/">
 <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700&display=swap" rel="stylesheet">
@@ -168,7 +168,7 @@ textarea:focus-visible,
 <section class="cinema">
   <div class="cinema-bg" id="heroBg"></div>
   <div class="corner-mark">Living Texture</div>
-  <div class="center-mark">Atelier Saddle<span class="tm">.</span><span class="sub">cork, considered.</span></div>
+  <div class="center-mark">Cork Wallcovering</div>
   <div class="meta-line">Cork · Bark · Sustainable<span class="num" id="heroNum"></span></div>
   <a class="enter" href="#shop">Enter <svg viewBox="0 0 24 12" fill="none" stroke="currentColor" stroke-width="1.4"><path d="M0 6h22M16 1l6 5-6 5"/></svg></a>
 </section>

← 971d403 pass 9: real site name (Cork Wallcovering) + 2x hero res (24  ·  back to Corkwallcovering  ·  graphic-loop pass 10: center-mark to top + readable text-sha fb1501b →