`templates/page.brands.liquid`

67 lines
{% comment %}
  page.brands.liquid — SELF-HEALING "Shop by Brand" directory.
  Each tile pulls its background image LIVE from the linked collection at render
  time (collection.image -> first product image), so images can never rot when a
  CDN file is purged. Brands with no collection render as a clean text tile (never
  a broken image). Assign a Page to the "brands" template in Shopify admin.
  Scoped under #dwb-root so it can never collide with theme CSS.
{% endcomment %}
<div id="dwb-root">
<style>
  #dwb-root{max-width:1220px;margin:0 auto;padding:8px 0 48px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;color:#1a1a1a}
  #dwb-root *{box-sizing:border-box}
  #dwb-root .dwb-head{text-align:center;padding:22px 16px 10px}
  #dwb-root .dwb-head h1{margin:0;font-weight:300;letter-spacing:.18em;text-transform:uppercase;font-size:22px}
  #dwb-root .dwb-head p{margin:6px 0 0;color:#7a7266;font-size:13px;letter-spacing:.04em}
  #dwb-root .dwb-tools{display:flex;gap:12px;justify-content:center;align-items:center;flex-wrap:wrap;padding:8px 16px 18px}
  #dwb-root .dwb-search{width:min(420px,90%);height:40px;border:1px solid #e6e0d6;border-radius:999px;padding:0 18px;font-size:14px;outline:none}
  #dwb-root .dwb-search:focus{border-color:#b9892f}
  #dwb-root .dwb-range{display:flex;align-items:center;gap:8px;color:#7a7266;font-size:12px}
  #dwb-root .dwb-grid{--cols:5;display:grid;grid-template-columns:repeat(var(--cols),1fr);gap:16px;padding:0 16px}
  @media(max-width:900px){#dwb-root .dwb-grid{--cols:3}}
  @media(max-width:560px){#dwb-root .dwb-grid{--cols:2}}
  #dwb-root .dwb-card{position:relative;aspect-ratio:4/3;border:1px solid #e6e0d6;border-radius:12px;overflow:hidden;
    text-decoration:none;color:inherit;background:#f5f2ec;display:flex;align-items:flex-end;transition:box-shadow .15s,transform .15s}
  #dwb-root .dwb-card:hover{box-shadow:0 12px 30px rgba(0,0,0,.12);transform:translateY(-2px)}
  #dwb-root .dwb-bg{position:absolute;inset:0;z-index:0}
  #dwb-root .dwb-bg img{width:100%;height:100%;object-fit:cover;display:block}
  #dwb-root .dwb-card::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(0,0,0,.55))}
  #dwb-root .dwb-name{position:relative;z-index:2;width:100%;padding:12px 14px;color:#fff;font-size:14px;font-weight:600;letter-spacing:.02em;text-shadow:0 1px 4px rgba(0,0,0,.4)}
  #dwb-root .dwb-card.dwb-noimg{background:linear-gradient(135deg,#2a2724,#4a453d)}
  #dwb-root .dwb-card.dwb-noimg::after{display:none}
  #dwb-root .dwb-msg{grid-column:1/-1;text-align:center;color:#9a9276;padding:36px;font-size:14px}
</style>
<div class="dwb-head"><h1>Shop by Brand</h1><p>The world's most coveted wallcovering houses — explore each collection.</p></div>
<div class="dwb-tools">
  <input class="dwb-search" id="dwbSearch" type="search" placeholder="Search brands…" aria-label="Search brands">
  <span class="dwb-range">Size <input id="dwbRange" type="range" min="3" max="7" value="5" aria-label="Grid density"></span>
</div>
<div class="dwb-grid" id="dwbGrid">
{% assign brands = "Thibaut::/collections/thibaut-wallcoverings~Cole & Son::/collections/cole-son~Ralph Lauren::/collections/ralph-lauren~Kravet::/collections/kravet~Pierre Frey::/pages/vendor-pierre-frey~Lee Jofa::/collections/lee-jofa~Romo::/collections/romo~Designers Guild::/collections/designers-guild-wallpaper~Holland and Sherry::/pages/vendor-holland-and-sherry~Ananbo::/pages/ananbo-murals~Andrew Martin::/pages/vendor-andrew-martin~Anna French::/collections/anna-french-1~Arte International::/collections/arte-international~Artmura::/collections/artmura~AS Creation::/collections/as-creation-wallcoverings~Atomic 50 Ceilings::/pages/vendor-atomic50~Backdrop::/collections/backdrop~Boråstapeter::/collections/borastapeter~Brand McKenzie::/collections/brand-mckenzie-wallpaper-collection~British Walls::/collections/british-walls-1~Brunschwig & Fils::/collections/brunschwig-fils~China Seas::/collections/china-seas~Christian Lacroix::/collections/christian-lacroix-wallcoverings~Clarence House::/pages/clarence-house~Clarke And Clarke::/collections/clarke-and-clarke-1~Contrado::/pages/contrado~Coordonné::/collections/coordonne~Daisy Bennett::/collections/daisy-bennett-wallcoverings~Dedar::/pages/vendor-dedar~Designer Wallcoverings::/pages/monterey-california~Dolce & Gabbana::/collections/dolce-gabbana-casa-wallcoverings~Donghia::/collections/donghia-wallcoverings~DW Bespoke Studio::/collections/dw-bespoke-studio-wallpaper-collection~DW Exclusive Wallpaper::/pages/dw-exclusive~Elitis::/collections/elitis-wallcoverings~Emiliana Parati::/collections/emiliana-parati-wallcoverings~Fabricut::/pages/fabricut~FallingStar Studio::/collections/fallingstar~Farrow & Ball::/pages/vendor-farrow-ball~Fentucci::/collections/fentucci~Franquemont London::/collections/franquemont-london~Gaston Y Daniela::/collections/gaston-y-daniela~Glitter Walls::/collections/glitter-walls-1~GP & J Baker::/collections/gp-j-baker~Graduate Collection::/collections/the-graduate-collection~Graham & Brown::/collections/graham-brown~Harlequin::/collections/harlequin~Hollywood Wallcoverings::/collections/hollywood-wallcovering-collection~Hygge & West::/collections/hygge-west-wallcoverings~Innovations USA::/collections/innovations-usa~Jeffrey Stevens::/collections/jeffrey-stevens~Kelly Wearstler::/pages/kelly-wearstler-wallpaper~Koroseal::/collections/koroseal~LA Walls::/pages/la-walls~Laura Ashley Wallpaper::/collections/laura-ashley~LEED Walls::/collections/leed-walls~Lincrusta::/pages/lincrusta~Malibu Wallpaper::/collections/malibu-wallpaper~Marburg::/collections/marburg~Marimekko::/collections/marimekko-exclusive-wallcoverings~Maya Romanoff::/collections/maya-romanoff~Milton & King::/pages/vendor-milton-king~Mind the Gap::/collections/mind-the-gap-1~Missoni Wallpaper::/pages/missoni-wallpaper-and-fabrics~Morris and Company::/pages/morris-and-company~Mulberry::/collections/mulberry-wallcoverings~Newmor Wallcoverings::/pages/newmor~Nina Campbell::/collections/nina-campbell~NLXL::/collections/nlxl~Nobilis::/collections/nobilis-wallcoverings~Novasuede::/collections/novasuede~OLIVIA AND POPP::/pages/olivia-and-popp-wallpaper~Osborne & Little::/collections/osborne-little~Peg Norriss::/collections/peg-norriss-wallcoverings~Phillip Jeffries::/collections/phillip-jeffries-wallcoverings~Phillipe Romano::/collections/phillipe-romano~PR Faux Leather::/pages/faux~Primo Leathers::/collections/primo-leathers~Rebel Walls::/collections/rebel-walls~Retro Walls::/collections/retro-walls-1~Roberto Cavalli::/pages/roberto-cavalli~Sacha Walckhoff::/collections/sacha-walckhoff-wallcoverings~Sancar::/collections/sancar~Sandberg::/collections/sandberg~Scalamandré::/collections/scalamandre-fabrics~Steve Abrams Studios::/pages/steve-abrams-studios~SUGARBOO::/collections/sugarboo~Surface Stick::https://www.apartmentwallpaper.com~Threads::/collections/threads~Tres Tintas::/collections/tres-tintas-wallcoverings~Ultrasuede::/collections/ultrasuede-1~Vahallan::/pages/vendor-vahallan-wallcovering~Hollywood Contract Wallcoverings::/collections/hollywood-contract-wallcoverings~Versace::/collections/versace-wallpaper~Villa Nova::/pages/vendor-villa-nova~Wallpaper NYC::/collections/wallpaper-nyc~William Morris::/collections/william-morris-1~Wolf Gordon::/collections/wolf-gordon~Zeuxis Parrhasius at DW::/collections/zeuxis-parrhasius-wallpaper-collection~Zoffany::/pages/zoffany" | split: "~" %}
{% for b in brands %}
  {% assign parts = b | split: "::" %}
  {% assign title = parts[0] %}
  {% assign href = parts[1] %}
  {% assign chandle = href | remove: "/collections/" %}
  {% assign coll = collections[chandle] %}
  {% assign img = coll.image %}
  {% unless img %}{% assign img = coll.products.first.featured_image %}{% endunless %}
  <a class="dwb-card{% unless img %} dwb-noimg{% endunless %}" href="{{ href }}" title="{{ title | escape }}" data-name="{{ title | downcase | escape }}">
    {% if img %}<span class="dwb-bg"><img src="{{ img | image_url: width: 600 }}" alt="{{ title | escape }}" loading="lazy"></span>{% endif %}
    <span class="dwb-name">{{ title }}</span>
  </a>
{% endfor %}
</div>
</div>
<script>
(function(){
  var grid=document.getElementById('dwbGrid'),q=document.getElementById('dwbSearch'),r=document.getElementById('dwbRange');
  var cards=[].slice.call(grid.querySelectorAll('.dwb-card'));
  var KEY='dwb-cols';
  function applyCols(v){grid.style.setProperty('--cols',v);try{localStorage.setItem(KEY,v);}catch(e){}}
  try{var s=localStorage.getItem(KEY);if(s){r.value=s;applyCols(s);}}catch(e){}
  r.addEventListener('input',function(){applyCols(this.value);});
  q.addEventListener('input',function(){var t=this.value.trim().toLowerCase();
    cards.forEach(function(c){c.style.display=!t||c.getAttribute('data-name').indexOf(t)>=0?'':'none';});});
})();
</script>