`pending-approval/tile-images-fix-2026-08-07/error-guard.html`

43 lines
<!-- DW tile image error-guard. Paste once at the END of each page's body_html.
     Any tile image that 404s (now or in future) fades to a labeled gradient
     instead of showing a broken-image icon. Self-contained, no assets, idempotent. -->
<style>
  .dw-img-dead{position:relative;display:block;width:100%;height:100%;min-height:120px;
    background:linear-gradient(135deg,#2b2b2b 0%,#4a4a4a 55%,#6b6b6b 100%);}
  .dw-img-dead>span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
    text-align:center;padding:8px;color:#fff;font:600 13px/1.25 'Helvetica Neue',Arial,sans-serif;
    letter-spacing:.04em;text-transform:uppercase;}
</style>
<script>
(function(){
  if (window.__dwImgGuard) return; window.__dwImgGuard = true;
  function labelFor(img){
    if (img.alt && img.alt.trim()) return img.alt.trim();
    var a = img.closest('a'); if (a){
      var t = (a.getAttribute('aria-label')||a.textContent||'').trim();
      if (t) return t.replace(/\s+/g,' ').slice(0,40);
      var h = a.getAttribute('href')||''; var m = h.match(/\/(?:collections|pages|products)\/([^\/?#]+)/);
      if (m) return m[1].replace(/[-_]+/g,' ').replace(/\b\w/g,function(c){return c.toUpperCase();}).slice(0,40);
    }
    return '';
  }
  function kill(img){
    if (!img || img.__dwDead) return; img.__dwDead = true;
    var box = document.createElement('div'); box.className = 'dw-img-dead';
    var s = document.createElement('span'); s.textContent = labelFor(img); box.appendChild(s);
    if (img.parentNode) img.parentNode.replaceChild(box, img);
  }
  // capture phase — img error events don't bubble
  document.addEventListener('error', function(e){
    var el = e.target;
    if (el && el.tagName === 'IMG') kill(el);
  }, true);
  // catch images that already failed before this script ran
  document.addEventListener('DOMContentLoaded', function(){
    document.querySelectorAll('img').forEach(function(img){
      if (img.complete && img.naturalWidth === 0) kill(img);
    });
  });
})();
</script>