← back to Marketing Command Center

composer: banner preview respects template aspect-ratio (#2) + warns when no asset selected (#3) — contrarian findings. Font-fail finding (#1) verified PHANTOM (allow-same-origin loads fonts), dropped.

7877a925ea8f06e5d208dd938f832e9b3d7e0cff · 2026-07-17 08:19:56 -0700 · Steve Abrams

Files touched

• M public/panels/composer.html
• M public/panels/composer.js

Diff

commit 7877a925ea8f06e5d208dd938f832e9b3d7e0cff
Author: Steve Abrams <steve@designerwallcoverings.com>
Date:   Fri Jul 17 08:19:56 2026 -0700

    composer: banner preview respects template aspect-ratio (#2) + warns when no asset selected (#3) — contrarian findings. Font-fail finding (#1) verified PHANTOM (allow-same-origin loads fonts), dropped.
---
 public/panels/composer.html |  1 +
 public/panels/composer.js   | 12 +++++++++---
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/public/panels/composer.html b/public/panels/composer.html
index 6025db9..f162571 100644
--- a/public/panels/composer.html
+++ b/public/panels/composer.html
@@ -20,6 +20,7 @@
       <div class="cmp-ph">Pick an asset or banner on the left ←</div>
       <img id="cmp-img" style="display:none" alt="selected">
     </div>
+    <div id="cmp-bannernote" class="muted" style="font-size:11.5px;color:#8a6a2a;min-height:14px"></div>
     <div class="cmp-copywrap">
       <div class="cmp-copybar">
         <label class="muted" style="font-size:11.5px">Tone
diff --git a/public/panels/composer.js b/public/panels/composer.js
index 59f97a5..0374d8a 100644
--- a/public/panels/composer.js
+++ b/public/panels/composer.js
@@ -66,7 +66,7 @@ window.MCC_PANELS['composer'] = {
           const b = document.createElement('div');
           b.className = 'cmp-tgt'; b.style.gridColumn = '1/-1'; b.style.cursor = 'pointer';
           b.innerHTML = `<span class="ico">🎏</span><span class="nm">${esc(t.name || t.id)}</span><span class="st on" style="text-transform:none">${esc(t.aspect || t.kind || '')}</span>`;
-          b.addEventListener('click', () => renderBanner(t.id, b));
+          b.addEventListener('click', () => renderBanner(t.id, b, t.aspect));
           grid.appendChild(b);
         });
       }
@@ -80,8 +80,12 @@ window.MCC_PANELS['composer'] = {
       $('#cmp-preview').querySelector('.cmp-ph').style.display = 'none';
     }
     // Render a Layouts template LIVE into the preview via /api/layouts/render (returns HTML).
-    async function renderBanner(templateId, el) {
+    async function renderBanner(templateId, el, aspect) {
       root.querySelectorAll('.cmp-tgt.sel').forEach(x => x.classList.remove('sel')); if (el) el.classList.add('sel');
+      // #3 — without a selected asset the banner renders a gradient placeholder where the
+      // product photo should be; tell the user so it doesn't read as broken.
+      const note = $('#cmp-bannernote');
+      if (note) note.textContent = state.mediaUrl ? '' : '⚠ No asset selected — pick one from the Assets tab to fill the banner’s photo slot.';
       const caption = ($('#cmp-caption').value || '').trim();
       const headline = caption.split('\n')[0].slice(0, 80) || 'Designer Wallcoverings';
       const r = await jpost('/api/layouts/render', {
@@ -92,7 +96,9 @@ window.MCC_PANELS['composer'] = {
       const img = $('#cmp-img'); img.style.display = 'none';
       $('#cmp-preview').querySelector('.cmp-ph').style.display = 'none';
       let f = $('#cmp-banner');
-      if (!f) { f = document.createElement('iframe'); f.id = 'cmp-banner'; f.setAttribute('sandbox', 'allow-same-origin'); f.style.cssText = 'width:100%;min-height:320px;border:0;background:#fff;border-radius:12px'; $('#cmp-preview').appendChild(f); }
+      if (!f) { f = document.createElement('iframe'); f.id = 'cmp-banner'; f.setAttribute('sandbox', 'allow-same-origin'); f.style.cssText = 'width:100%;border:0;background:#fff;border-radius:12px'; $('#cmp-preview').appendChild(f); }
+      // #2 — respect the template's real aspect (a 9:16 story ≠ a 4:1 banner in the preview).
+      f.style.aspectRatio = (aspect || '1/1').replace(' ', '');
       f.style.display = 'block'; f.srcdoc = r.html;
     }
     root.querySelectorAll('.cmp-tab').forEach(tab => tab.addEventListener('click', () => {

← 01d65e1 composer: Banners tab renders a LIVE banner preview (real /a  ·  back to Marketing Command Center  ·  MCC Clients: show full address + phone + real domain + best 30afe18 →