`storefront/graduate-interactive/ROLLBACK-dw-collection-hero-20260903-111103.json`

1 lines
{"asset":{"key":"sections\/dw-collection-hero.liquid","public_url":null,"value":"{%- comment -%}\n  DW Collection Hero — Steve standing rule (2026-06-23): every collection page\n  must have a background \"bg\" hero image. Renders collection.image as a full-bleed\n  cover background with the title + breadcrumbs + description on a SEMI-OPAQUE\n  CONTRASTING PANEL (dark scrim panel) so the text stays legible over any image.\n  Collections with no image fall back to a branded gradient so the page is never\n  broken; audit-collection-hero-images.py lists which collections still need one.\n\n  Also HIDES the Boost AI Search \u0026 Filter app's own collection banner (the\n  duplicate lower banner) + any legacy theme breadcrumbs, so only this hero shows.\n\n  Toggle by removing it from templates\/collection.json \"order\".\n{%- endcomment -%}\n{%- comment -%}\n  BANNER RESOLUTION GATE (Steve 2026-07-30, TK-10053): a full-bleed hero must\n  NEVER stretch a low-res source (e.g. a 500px sample swatch) — that is what\n  produced the blurry Hollywood Wallcoverings banner. Three render modes:\n    image   -\u003e collection.image is high-res (\u003e= dw_min_w) : single full-bleed cover (sharp)\n    mosaic  -\u003e no high-res file \"for that build\"          : 2x2 quadrant of product\n               images, each cell ~half page-width so a 500px source stretches\n               ~1.3x instead of ~5x (visibly sharp) and 4 swatches read as curated\n    fallback-\u003e collection has no usable product image      : branded gradient\n{%- endcomment -%}\n{%- liquid\n  assign dw_min_w = 1400\n  assign dw_hero_img = collection.image\n  unless dw_hero_img\n    assign dw_hero_img = collection.products.first.featured_image\n  endunless\n  assign dw_mode = 'fallback'\n  if dw_hero_img and dw_hero_img.width \u003e= dw_min_w\n    assign dw_mode = 'image'\n  endif\n-%}\n{%- if dw_mode != 'image' -%}\n  {%- comment -%} gather up to 4 distinct product images for the 2x2 mosaic {%- endcomment -%}\n  {%- assign dw_tiles = '' -%}\n  {%- assign dw_seen = ',' -%}\n  {%- assign dw_ntiles = 0 -%}\n  {%- for dw_p in collection.products limit: 40 -%}\n    {%- if dw_ntiles \u003e= 4 -%}{%- break -%}{%- endif -%}\n    {%- if dw_p.featured_image -%}\n      {%- comment -%} dedup by stable image id (not URL string — version-bumped ?v= URLs would slip through) {%- endcomment -%}\n      {%- assign dw_probe = dw_p.featured_image.id | prepend: ',' | append: ',' -%}\n      {%- unless dw_seen contains dw_probe -%}\n        {%- assign dw_seen = dw_seen | append: dw_p.featured_image.id | append: ',' -%}\n        {%- assign dw_url = dw_p.featured_image | img_url: '800x' -%}\n        {%- assign dw_tiles = dw_tiles | append: dw_url | append: '|' -%}\n        {%- assign dw_ntiles = dw_ntiles | plus: 1 -%}\n      {%- endunless -%}\n    {%- endif -%}\n  {%- endfor -%}\n  {%- if dw_ntiles \u003e= 1 -%}{%- assign dw_mode = 'mosaic' -%}{%- endif -%}\n  {%- assign dw_tile_list = dw_tiles | split: '|' -%}\n{%- endif -%}\n\u003cdiv class=\"dw-collection-hero dw-collection-hero--{{ dw_mode }}\"\n     {% if dw_mode == 'image' %}style=\"background-image:url({{ dw_hero_img | img_url: '2048x' }});\"{% endif %}\n     data-dw-collection-hero data-hero-mode=\"{{ dw_mode }}\"\u003e\n  {%- if dw_mode == 'mosaic' -%}\n    \u003cdiv class=\"dw-collection-hero__mosaic\" aria-hidden=\"true\"\u003e\n      {%- for dw_t in dw_tile_list -%}\n        \u003cspan class=\"dw-collection-hero__cell\" style=\"background-image:url({{ dw_t }});\"\u003e\u003c\/span\u003e\n      {%- endfor -%}\n    \u003c\/div\u003e\n  {%- endif -%}\n  \u003cdiv class=\"dw-collection-hero__inner page-width\"\u003e\n    \u003cdiv class=\"dw-collection-hero__panel\"\u003e\n      \u003cnav class=\"dw-collection-hero__crumbs\" aria-label=\"Breadcrumb\"\u003e\n        \u003ca href=\"\/\"\u003eHome\u003c\/a\u003e \u003cspan aria-hidden=\"true\"\u003e\/\u003c\/span\u003e\n        \u003ca href=\"\/collections\"\u003eCollections\u003c\/a\u003e \u003cspan aria-hidden=\"true\"\u003e\/\u003c\/span\u003e\n        \u003cspan aria-current=\"page\"\u003e{{ collection.title }}\u003c\/span\u003e\n      \u003c\/nav\u003e\n      \u003ch1 class=\"dw-collection-hero__title\"\u003e{{ collection.title }}\u003c\/h1\u003e\n      {%- assign aeo_cat = collection.metafields.custom.category | default: 'wallcovering' -%}\n      \u003cp class=\"dw-collection-hero__answer\"\u003eA curated {{ aeo_cat }} collection for the design trade — {{ collection.products_count }} designs, samples and trade pricing on request.\u003c\/p\u003e\n      {%- if section.settings.show_description and collection.description != blank -%}\n        \u003cdiv class=\"dw-collection-hero__desc\"\u003e{{ collection.description | strip_html | truncatewords: 32 }}\u003c\/div\u003e\n      {%- endif -%}\n    \u003c\/div\u003e\n  \u003c\/div\u003e\n\u003c\/div\u003e\n{%- if collection.handle == 'the-graduate-collection' -%}\n\u003cdiv class=\"dw-gflip\"\u003e\n  \u003cdiv class=\"dw-gflip__stage\"\u003e\n    \u003cvideo controls playsinline preload=\"metadata\" poster=\"https:\/\/marketing.designerwallcoverings.com\/public\/collections\/graduate-poster.jpg\"\u003e\n      \u003csource src=\"https:\/\/marketing.designerwallcoverings.com\/reels\/graduate-collection-flipbook.mp4\" type=\"video\/mp4\"\u003e\n    \u003c\/video\u003e\n    \u003cdiv class=\"dw-gvctl\"\u003e\n      \u003clabel\u003e\u003cspan class=\"k\"\u003eSpeed\u003c\/span\u003e\u003cinput type=\"range\" class=\"s\" min=\"0.25\" max=\"2\" step=\"0.05\" value=\"1\"\u003e\u003cb class=\"sv\"\u003e1\u0026times;\u003c\/b\u003e\u003c\/label\u003e\n    \u003c\/div\u003e\n    \u003cdiv class=\"dw-glinks\"\u003e\n      \u003ca class=\"g-dl\" href=\"https:\/\/marketing.designerwallcoverings.com\/reels\/graduate-collection-flipbook.mp4\" download title=\"Download\"\u003e\u003csvg viewBox=\"0 0 24 24\"\u003e\u003cpath d=\"M12 3v10.6l3.3-3.3 1.4 1.4L12 17.4 6.3 11.7l1.4-1.4L11 13.6V3h1zM5 19h14v2H5z\"\/\u003e\u003c\/svg\u003e\u003c\/a\u003e\n      \u003ca class=\"g-fb\" target=\"_blank\" rel=\"noopener\" title=\"Facebook\"\u003e\u003csvg viewBox=\"0 0 24 24\"\u003e\u003cpath d=\"M13 22v-8h2.7l.4-3H13V9.1c0-.9.3-1.5 1.5-1.5H16V4.9c-.3 0-1.2-.1-2.3-.1-2.3 0-3.7 1.4-3.7 3.9V11H7.5v3H10v8h3z\"\/\u003e\u003c\/svg\u003e\u003c\/a\u003e\n      \u003ca class=\"g-x\" target=\"_blank\" rel=\"noopener\" title=\"X\"\u003e\u003csvg viewBox=\"0 0 24 24\"\u003e\u003cpath d=\"M18.9 2H22l-7 8 8.2 12h-6.4l-5-6.7L6 22H2.9l7.5-8.6L2 2h6.6l4.5 6.1L18.9 2zm-1.1 18h1.7L7.3 3.8H5.5L17.8 20z\"\/\u003e\u003c\/svg\u003e\u003c\/a\u003e\n      \u003ca class=\"g-pin\" target=\"_blank\" rel=\"noopener\" title=\"Pinterest\"\u003e\u003csvg viewBox=\"0 0 24 24\"\u003e\u003cpath d=\"M12 2C6.5 2 4 5.6 4 8.7c0 1.9.7 3.5 2.3 4.1.3.1.5 0 .5-.3l.2-.8c.1-.3 0-.4-.2-.6-.4-.5-.7-1.1-.7-2 0-2.6 1.9-4.9 5-4.9 2.7 0 4.2 1.7 4.2 3.9 0 2.9-1.3 5.4-3.2 5.4-1 0-1.8-.9-1.6-1.9.3-1.3.9-2.6.9-3.5 0-.8-.4-1.5-1.3-1.5-1.1 0-1.9 1.1-1.9 2.6 0 .9.3 1.6.3 1.6s-1.1 4.5-1.3 5.3c-.4 1.6-.1 3.5 0 3.7 0 .1.2.2.3.1.1-.2 1.6-2 2.1-3.8l.8-3c.4.8 1.5 1.4 2.7 1.4 3.6 0 6-3.2 6-7.6C18.3 4.8 15.5 2 12 2z\"\/\u003e\u003c\/svg\u003e\u003c\/a\u003e\n      \u003ca class=\"g-li\" target=\"_blank\" rel=\"noopener\" title=\"LinkedIn\"\u003e\u003csvg viewBox=\"0 0 24 24\"\u003e\u003cpath d=\"M4.98 3.5a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5zM3 9h4v12H3zM9 9h3.8v1.7h.1c.5-1 1.8-2 3.7-2 4 0 4.7 2.6 4.7 6V21h-4v-5.3c0-1.3 0-2.9-1.8-2.9s-2 1.4-2 2.8V21H9z\"\/\u003e\u003c\/svg\u003e\u003c\/a\u003e\n      \u003ca class=\"g-mail\" title=\"Email\"\u003e\u003csvg viewBox=\"0 0 24 24\"\u003e\u003cpath d=\"M3 5h18a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1zm9 7L4 6.8V18h16V6.8L12 12z\"\/\u003e\u003c\/svg\u003e\u003c\/a\u003e\n    \u003c\/div\u003e\n  \u003c\/div\u003e\n\u003c\/div\u003e\n\u003cstyle\u003e\n  .dw-gflip{max-width:1100px;margin:0 auto 1.75rem;padding:0 1rem;}\n  .dw-gflip__stage{position:relative;}\n  .dw-gflip video{width:100%;display:block;border-radius:8px;background:#14110e;box-shadow:0 10px 40px rgba(0,0,0,.18);}\n  .dw-gvctl{position:absolute;left:12px;bottom:54px;z-index:5;display:flex;gap:5px;\n    background:rgba(20,16,12,.62);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);\n    padding:7px 11px;border-radius:7px;font:600 11px\/1 -apple-system,system-ui,sans-serif;color:#fff;}\n  .dw-gvctl label{display:flex;align-items:center;gap:7px;margin:0;}\n  .dw-gvctl .k{width:38px;text-transform:uppercase;letter-spacing:.1em;opacity:.8;}\n  .dw-gvctl input[type=range]{width:92px;accent-color:#b08212;}\n  .dw-gvctl b{width:36px;text-align:right;opacity:.9;font-weight:600;}\n  .dw-glinks{position:absolute;right:12px;bottom:54px;z-index:5;display:flex;gap:8px;\n    background:rgba(20,16,12,.55);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);\n    padding:6px 9px;border-radius:22px;}\n  .dw-glinks a{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;\n    border-radius:50%;color:#fff;background:rgba(255,255,255,.10);text-decoration:none;transition:.15s;}\n  .dw-glinks a:hover{background:#b08212;}\n  .dw-glinks svg{width:15px;height:15px;fill:currentColor;}\n\u003c\/style\u003e\n\u003cscript\u003e\n(function(){\n  var page=\"https:\/\/www.designerwallcoverings.com\/collections\/the-graduate-collection\";\n  var media=\"https:\/\/marketing.designerwallcoverings.com\/public\/collections\/graduate-poster.jpg\";\n  var txt=\"The Graduate Collection - a maximalist British wallpaper lookbook, page by page.\";\n  var e=encodeURIComponent,q=function(s){return document.querySelector(s);};\n  if(q('.g-fb'))q('.g-fb').href=\"https:\/\/www.facebook.com\/sharer\/sharer.php?u=\"+e(page);\n  if(q('.g-x'))q('.g-x').href=\"https:\/\/twitter.com\/intent\/tweet?url=\"+e(page)+\"\u0026text=\"+e(txt);\n  if(q('.g-pin'))q('.g-pin').href=\"https:\/\/pinterest.com\/pin\/create\/button\/?url=\"+e(page)+\"\u0026media=\"+e(media)+\"\u0026description=\"+e(txt);\n  if(q('.g-li'))q('.g-li').href=\"https:\/\/www.linkedin.com\/sharing\/share-offsite\/?url=\"+e(page);\n  if(q('.g-mail'))q('.g-mail').href=\"mailto:?subject=\"+e(\"The Graduate Collection\")+\"\u0026body=\"+e(txt+\" \"+page);\n  document.querySelectorAll('.dw-gvctl').forEach(function(c){\n    var v=c.parentElement.querySelector('video');if(!v)return;\n    var sp=c.querySelector('.s'),spv=c.querySelector('.sv');if(!sp)return;\n    function us(){v.playbackRate=parseFloat(sp.value);spv.textContent=(Math.round(parseFloat(sp.value)*100)\/100)+'×';}\n    sp.addEventListener('input',us);us();\n  });\n})();\n\u003c\/script\u003e\n{%- endif -%}\n\n{%- assign aeo_faq = collection.metafields.custom.faq.value -%}\n\u003cscript type=\"application\/ld+json\"\u003e\n{\"@context\":\"https:\/\/schema.org\",\"@type\":\"CollectionPage\",\"name\":{{ collection.title | json }},\"description\":{{ collection.description | strip_html | truncatewords: 40 | json }},\"url\":{{ request.origin | append: collection.url | json }},\"isPartOf\":{\"@type\":\"WebSite\",\"name\":\"Designer Wallcoverings\",\"url\":{{ request.origin | json }}}}\n\u003c\/script\u003e\n\u003cscript type=\"application\/ld+json\"\u003e\n{\"@context\":\"https:\/\/schema.org\",\"@type\":\"BreadcrumbList\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":{{ request.origin | json }}},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Collections\",\"item\":{{ request.origin | append: '\/collections' | json }}},{\"@type\":\"ListItem\",\"position\":3,\"name\":{{ collection.title | json }},\"item\":{{ request.origin | append: collection.url | json }}}]}\n\u003c\/script\u003e\n{%- if aeo_faq != blank and aeo_faq != empty -%}\n\u003cdetails class=\"dw-collection-faq\" style=\"max-width:900px;margin:1rem auto .5rem;text-align:center;\"\u003e\u003csummary style=\"cursor:pointer;display:inline-block;list-style:none;font:600 .8rem\/1.5 inherit;letter-spacing:.08em;text-transform:uppercase;padding:.55rem 1.5rem;border:1px solid currentColor;border-radius:2px;opacity:.9;\"\u003eLearn about {{ collection.title | remove: ' Collections' | remove: ' Collection' }}\u003c\/summary\u003e\u003cdiv style=\"text-align:left;max-width:760px;margin:.9rem auto 0;padding:0 1rem;\"\u003e{%- for item in aeo_faq -%}\u003ch3 style=\"font-size:1rem;margin:.75rem 0 .25rem;\"\u003e{{ item.q }}\u003c\/h3\u003e\u003cp style=\"margin:0 0 .5rem;opacity:.85;\"\u003e{{ item.a }}\u003c\/p\u003e{%- endfor -%}\u003c\/div\u003e\u003c\/details\u003e\n\u003cscript type=\"application\/ld+json\"\u003e\n{\"@context\":\"https:\/\/schema.org\",\"@type\":\"FAQPage\",\"mainEntity\":[{%- for item in aeo_faq -%}{\"@type\":\"Question\",\"name\":{{ item.q | json }},\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":{{ item.a | strip_html | json }}}}{% unless forloop.last %},{% endunless %}{%- endfor -%}]}\n\u003c\/script\u003e\n{%- endif -%}\n\u003cstyle\u003e\n  .dw-collection-hero{position:relative;min-height:clamp(20px,2.67vw,35px);display:flex;\n    align-items:center;background-size:cover;background-position:center;background-repeat:no-repeat;\n    margin:0 0 1.5rem;overflow:hidden;}\n  .dw-collection-hero--fallback{background:linear-gradient(135deg,#1c1c1c 0%,#3a3a3a 55%,#2a2320 100%);}\n  \/* mosaic + gradient variants get a real banner height so the 2x2 has room *\/\n  .dw-collection-hero--mosaic,\n  .dw-collection-hero--fallback{min-height:clamp(190px,24vw,320px);}\n  \/* 2x2 quadrant of product images — each cell ~half page-width, so a low-res\n     (e.g. 500px) source stretches ~1.3x instead of ~5x full-bleed = stays sharp *\/\n  .dw-collection-hero__mosaic{position:absolute;inset:0;z-index:0;display:grid;\n    grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:2px;background:#211c19;}\n  .dw-collection-hero__cell{background-size:cover;background-position:center;\n    background-repeat:no-repeat;background-color:#211c19;min-height:0;min-width:0;}\n  \/* graceful degrade when a small collection yields \u003c4 tiles *\/\n  .dw-collection-hero__mosaic:has(.dw-collection-hero__cell:nth-child(1):last-child){grid-template-columns:1fr;grid-template-rows:1fr;}\n  .dw-collection-hero__mosaic:has(.dw-collection-hero__cell:nth-child(2):last-child){grid-template-rows:1fr;}\n  .dw-collection-hero__mosaic:has(.dw-collection-hero__cell:nth-child(3):last-child) .dw-collection-hero__cell:first-child{grid-column:1 \/ -1;}\n  .dw-collection-hero__inner{position:relative;z-index:1;width:100%;padding:0.9rem 2.25rem;}\n  \/* Semi-opaque CONTRASTING panel behind the text — dark scrim over the light\n     pattern so title\/breadcrumbs\/description read clearly without darkening the\n     whole image. Constrained width, left-aligned. *\/\n  .dw-collection-hero__panel{display:inline-block;max-width:min(640px,92%);\n    background:rgba(22,18,16,0.66);\n    -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);\n    border:1px solid rgba(255,255,255,0.14);border-radius:6px;\n    padding:1.4rem 1.75rem;box-shadow:0 6px 30px rgba(0,0,0,.28);}\n  .dw-collection-hero__crumbs{font-size:.78rem;letter-spacing:.04em;text-transform:uppercase;\n    color:#fff;opacity:.92;margin:0 0 .45rem;}\n  .dw-collection-hero__crumbs a,.dw-collection-hero__crumbs span{color:#fff;text-decoration:none;}\n  .dw-collection-hero__crumbs a:hover{text-decoration:underline;}\n  .dw-collection-hero__title{color:#fff;font-size:clamp(1.8rem,3.4vw,3rem);margin:.1rem 0 0;\n    letter-spacing:.5px;line-height:1.05;}\n  .dw-collection-hero__desc{color:#fff;max-width:60ch;margin:.6rem 0 0;opacity:.96;\n    font-size:.95rem;line-height:1.55;}\n\n  \/* Hide the duplicate LOWER banner drawn by the Boost AI Search \u0026 Filter app\n     (its own collection header\/banner) so only this hero shows. *\/\n  .boost-sd__collection-header,\n  .boost-sd__page-header,\n  .boost-sd__collection-header-image,\n  .boost-sd__collection-header-content,\n  .boost-sd__collection-header-title,\n  .boost-sd__collection-header-description,\n  .boost-sd__collection-title,\n  .boost-sd__collection-description{display:none !important;}\n  \/* hero now carries breadcrumbs: hide any legacy theme breadcrumbs on collection pages *\/\n  .template-collection .breadcrumbs,\n  .template-collection .breadcrumb{display:none;}\n\u003c\/style\u003e\n\n{% schema %}\n{\n  \"name\": \"DW Collection Hero\",\n  \"settings\": [\n    {\n      \"type\": \"checkbox\",\n      \"id\": \"show_description\",\n      \"label\": \"Show collection description in hero\",\n      \"default\": true\n    }\n  ],\n  \"presets\": [\n    { \"name\": \"DW Collection Hero\" }\n  ]\n}\n{% endschema %}\n","created_at":"2026-08-20T09:48:57-07:00","updated_at":"2026-08-20T09:48:57-07:00","content_type":"application\/x-liquid","size":14860,"checksum":"adb0ad079d5db6b69c188e682138f020","theme_id":145121607731}}