← back to CelebritySignatures
wear: 'See it worn' — feature each celebrity's seated editorial shot on their product page
523cb042724c7c0051afa379f72ae71bdac7217a · 2026-09-09 16:44:58 -0700 · Steve
For signers who have an AI 'seated in the full Signature Edit' campaign photo
(currently Darwin, Franklin, Lincoln, Michelangelo, Napoleon, Van Gogh among the
wear-eligible), the /wear product modal now leads with that editorial 'worn' shot
(the person in the signed hat + tee + socks) with a 'See on garment' toggle back
to the interactive mockup. Signers without a shot are unchanged (flat mockup, no
toggle) — verified both paths, 0 console errors. Display-only, reversible; NOT
deployed (overnight gate). Reverse: git revert this commit.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Files touched
Diff
commit 523cb042724c7c0051afa379f72ae71bdac7217a
Author: Steve <steve@designerwallcoverings.com>
Date: Wed Sep 9 16:44:58 2026 -0700
wear: 'See it worn' — feature each celebrity's seated editorial shot on their product page
For signers who have an AI 'seated in the full Signature Edit' campaign photo
(currently Darwin, Franklin, Lincoln, Michelangelo, Napoleon, Van Gogh among the
wear-eligible), the /wear product modal now leads with that editorial 'worn' shot
(the person in the signed hat + tee + socks) with a 'See on garment' toggle back
to the interactive mockup. Signers without a shot are unchanged (flat mockup, no
toggle) — verified both paths, 0 console errors. Display-only, reversible; NOT
deployed (overnight gate). Reverse: git revert this commit.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
public/wear.html | 42 ++++++++++++++++++++++++++++++++++++++++++
1 file changed, 42 insertions(+)
diff --git a/public/wear.html b/public/wear.html
index 65c5f49..8ee1810 100644
--- a/public/wear.html
+++ b/public/wear.html
@@ -86,6 +86,10 @@
#stage3d canvas { width:100%!important; height:100%!important; display:block; border-radius:8px; }
.view3d-btn { position:absolute; bottom:14px; right:14px; font:inherit; font-size:12px; background:#fff; border:1px solid var(--line); border-radius:999px; padding:6px 12px; cursor:pointer; }
.view3d-btn:hover { border-color:var(--ink); }
+ /* Editorial "worn" shot — the celebrity seated in the full Signature Edit. */
+ #lifestyleShot { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
+ .lifestyle-toggle { position:absolute; top:14px; right:14px; z-index:6; font:inherit; font-size:12px; background:rgba(255,255,255,.92); border:1px solid var(--line); border-radius:999px; padding:6px 12px; cursor:pointer; }
+ .lifestyle-toggle:hover { border-color:var(--ink); }
@media (max-width:720px){ .preview{ border-radius:16px 16px 0 0; } }
canvas#stage { width:100%; max-width:340px; height:auto; }
.buy { padding:24px; }
@@ -165,11 +169,13 @@
<span class="close" id="close">×</span>
<div class="panel" style="position:relative">
<div class="preview">
+ <img id="lifestyleShot" alt="" hidden>
<canvas id="stage" width="400" height="480"></canvas>
<div id="stage3d" style="display:none"></div>
<canvas id="zoomLens"></canvas>
<span class="zoom-hint" id="zoomHint">🔍 hover the signature to zoom</span>
<button class="view3d-btn" id="view3dToggle" hidden>View in 3D</button>
+ <button class="lifestyle-toggle" id="lifestyleToggle" hidden></button>
</div>
<div class="buy">
<h2 id="pName">—</h2>
@@ -216,6 +222,40 @@ const INK_PRESETS = [
{ id:'sepia', label:'Sepia', hex:'#5a4632' },
{ id:'white', label:'White', hex:'#ffffff' },
];
+// Editorial "worn" shots — the celebrity seated in the full Signature Edit
+// (AI-generated). Only some signers have one; matched by name. Non-wear-eligible
+// names (Einstein etc.) never reach /wear, so listing them is harmless.
+const LIFESTYLE = [
+ ['charles darwin','darwin'], ['benjamin franklin','franklin'], ['abraham lincoln','lincoln-seated'],
+ ['napoleon','napoleon'], ['michelangelo','michelangelo'], ['van gogh','vangogh'],
+ ['albert einstein','einstein'], ['frida','frida'], ['pablo picasso','picasso'], ['mark twain','twain'],
+];
+function lifestyleFor(sig){
+ const n = (sig && sig.full_name || '').toLowerCase();
+ const hit = LIFESTYLE.find(([m]) => n.includes(m));
+ return hit ? `/assets/campaign-${hit[1]}.jpg` : null;
+}
+// Toggle the modal's left visual between the editorial "worn" shot and the
+// interactive garment mockup.
+function setLifeView(mode){
+ state.lifeMode = mode;
+ const worn = mode === 'worn';
+ document.getElementById('lifestyleShot').hidden = !worn;
+ document.getElementById('stage').style.visibility = worn ? 'hidden' : '';
+ document.getElementById('zoomHint').style.display = worn ? 'none' : '';
+ document.getElementById('view3dToggle').style.display = worn ? 'none' : '';
+ document.getElementById('lifestyleToggle').textContent = worn ? 'See on garment' : 'See it worn';
+}
+function applyLifestyle(){
+ const url = lifestyleFor(state.sig);
+ const shot = document.getElementById('lifestyleShot'), tog = document.getElementById('lifestyleToggle');
+ if (url){
+ shot.src = url; shot.alt = `${state.sig.full_name} in the Signature Edit`;
+ tog.hidden = false; setLifeView('worn'); // lead with the editorial shot
+ } else {
+ tog.hidden = true; shot.hidden = true; shot.removeAttribute('src'); setLifeView('garment');
+ }
+}
// Top-level HTML-attribute escape (the autocomplete's own `esc` is scoped to
// that block, so the grid renderer needs its own).
const escA = s => String(s==null?'':s).replace(/[&<>"]/g,c=>({'&':'&','<':'<','>':'>','"':'"'}[c]));
@@ -341,6 +381,7 @@ function openProduct(qid){
document.getElementById('email').value = '';
document.getElementById('msg').textContent = '';
buildOptions();
+ applyLifestyle();
loadSigThenDraw();
document.getElementById('scrim').classList.add('on');
}
@@ -827,6 +868,7 @@ document.getElementById('density').oninput = e => { document.documentElement.sty
document.getElementById('close').onclick = ()=>document.getElementById('scrim').classList.remove('on');
document.getElementById('scrim').onclick = e => { if(e.target.id==='scrim') document.getElementById('scrim').classList.remove('on'); };
+document.getElementById('lifestyleToggle').onclick = ()=> setLifeView(state.lifeMode === 'worn' ? 'garment' : 'worn');
document.getElementById('buy').onclick = async ()=>{
if (state.garment?.saleEnabled === false) return;
const live = !!(state.data && state.data.disclosure && state.data.disclosure.purchasable);
← ba96456 printify-cost-check: support bucket-hat + crew-socks + --yes
·
back to CelebritySignatures
·
wear: auto-detect campaign-<slug>.jpg for the 'worn' shot in d8381ce →