monetize sites: render 6-8 image gallery from hero-allocation (TK-11322)

f49d0a62a0883c74de6c6644fb0ab933b56191ad · 2026-09-09 22:48:35 -0700 · Steve Abrams

Pass HERO_IMGS into render.monetizeHome and render a responsive gallery of the
site's pre-allocated, globally-unique, niche-matched heroes as real <img> via
the /img proxy (vendor-neutral). Monetize homes previously showed 1 CSS-bg hero
and 0 <img>; now >=6 per site. No new image sourcing — reuses hero-allocation.json.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01QE2344y5dVpRCba9MDDRcQ

Files touched

M server.js
M shared/render.js

Diff

commit f49d0a62a0883c74de6c6644fb0ab933b56191ad
Author: Steve Abrams <steve@designerwallcoverings.com>
Date:   Wed Sep 9 22:48:35 2026 -0700

    monetize sites: render 6-8 image gallery from hero-allocation (TK-11322)
    
    Pass HERO_IMGS into render.monetizeHome and render a responsive gallery of the
    site's pre-allocated, globally-unique, niche-matched heroes as real <img> via
    the /img proxy (vendor-neutral). Monetize homes previously showed 1 CSS-bg hero
    and 0 <img>; now >=6 per site. No new image sourcing — reuses hero-allocation.json.
    
    Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
    Claude-Session: https://claude.ai/code/session_01QE2344y5dVpRCba9MDDRcQ
---
 server.js        |  2 +-
 shared/render.js | 19 ++++++++++++++++++-
 2 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/server.js b/server.js
index 0671ef1..4438091 100644
--- a/server.js
+++ b/server.js
@@ -146,7 +146,7 @@ const PER_PAGE = 60;
 if (MONETIZE) {
   app.get('/ads.txt', (req, res) => res.type('text/plain')
     .send('google.com, pub-5278231299883833, DIRECT, f08c47fec0942fa0\n'));
-  app.get('/', (req, res) => res.type('html').send(render.monetizeHome(cfg)));
+  app.get('/', (req, res) => res.type('html').send(render.monetizeHome(cfg, HERO_IMGS)));
   app.get('/about', (req, res) => res.type('html').send(render.monetizeAbout(cfg)));
   app.get('/privacy', (req, res) => res.type('html').send(render.privacyPage(cfg)));
   app.get('/guide', (req, res) => res.type('html').send(render.guidePage(cfg)));
diff --git a/shared/render.js b/shared/render.js
index 51cdcb0..451fa27 100644
--- a/shared/render.js
+++ b/shared/render.js
@@ -1108,6 +1108,12 @@ function monetizeChrome(cfg) {
  * the funnel template's catalog CSS. Uses the site theme vars already in css(). */
 function monetizeCss() {
   return `
+/* image gallery — >=6 niche heroes as a responsive grid (TK-11322) */
+.m-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;margin:28px 0 32px}
+.m-gallery__it{margin:0;overflow:hidden;border:1px solid var(--rule);border-radius:4px;background:var(--rule)}
+.m-gallery__it img{display:block;width:100%;height:100%;aspect-ratio:4/5;object-fit:cover;transition:transform .4s ease}
+.m-gallery__it:hover img{transform:scale(1.04)}
+@media(max-width:520px){.m-gallery{grid-template-columns:repeat(2,1fr)}}
 /* in-flow sticky header — NO fixed overlap with the for-sale strip / hero */
 .m-nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;
   gap:16px;padding:15px 32px;background:var(--header-bg);border-bottom:1px solid var(--rule)}
@@ -1287,7 +1293,7 @@ ${script(cfg)}
  *   cfg.content = { lede, sections:[{h,body}], guide:[{k,v}] }
  * Falls back to niche-derived copy so a site without a content block still
  * renders a legitimate (if generic) page. */
-function monetizeHome(cfg) {
+function monetizeHome(cfg, heroImgs = []) {
   const c = cfg.content || {};
   const title = `${cfg.siteName} — ${clean(cfg.tagline)}`;
   const desc = clean(cfg.metaDesc || cfg.tagline);
@@ -1320,6 +1326,16 @@ function monetizeHome(cfg) {
       <div class="m-panel__body">
         ${faq.map(f => `<div class="m-faq"><h3>${esc(f.q)}</h3><p>${esc(f.a)}</p></div>`).join('')}
       </div></details>` : '';
+  // Image gallery — render >=6 of the site's pre-allocated, globally-unique,
+  // niche-matched heroes (hero-allocation.json) as real <img> through the /img
+  // proxy (vendor-neutral filenames — never raw Shopify CDN, which leaks the
+  // vendor). Was 1 CSS-bg hero; a fresh AdSense account reads richer with a real
+  // gallery (TK-11322). Falls back gracefully if the allocation is thin.
+  const galleryUrls = (Array.isArray(heroImgs) ? heroImgs : []).map(proxyImg).filter(Boolean).slice(0, 8);
+  const galleryHtml = galleryUrls.length ? `
+    <section class="m-gallery" aria-label="${esc(niche)} gallery">
+      ${galleryUrls.map((u, i) => `<figure class="m-gallery__it"><img src="${u}" alt="${esc(clean(cfg.nicheLabel || cfg.siteName))} — image ${i + 1}" loading="${i < 3 ? 'eager' : 'lazy'}" decoding="async" width="600" height="750"></figure>`).join('')}
+    </section>` : '';
   const articles = Array.isArray(c.articles) ? c.articles : [];
   const articlesHtml = articles.length ? `
     <section class="m-more" aria-labelledby="more-h">
@@ -1343,6 +1359,7 @@ function monetizeHome(cfg) {
 <div class="wrap">
   <article class="m-article">
     <p class="lede">${esc(lede)}</p>
+    ${galleryHtml}
     <div class="m-panels" id="guide">${secHtml}${guideHtml}${faqHtml}</div>
     ${articlesHtml}
   </article>

← 80430c8 auto-data-snapshot: 2026-09-09T21:46:00 (11 data files) — si · back to Dw Domain Fleet · auto-data-snapshot: 2026-09-09T22:50:09 (7 data files) — sit 003bc83 →