Press Logo Wall

<section class="sl-press-wall" aria-label="{{ section.settings.heading | default: 'As featured in' }}" style="padding:clamp(40px,6vw,72px) 1rem;color:inherit;font-family:inherit;background:{{ section.settings.bg_color | default: 'transparent' }};">
  <div style="max-width:1200px;margin:0 auto;">
    {%- if section.settings.heading != blank -%}
      <p style="text-align:center;text-transform:uppercase;letter-spacing:.25em;font-size:.72rem;opacity:.65;margin:0 0 clamp(1.75rem,4vw,3rem);font-weight:700;color:inherit;">{{ section.settings.heading }}</p>
    {%- endif -%}
    <style>
      .sl-press-wall-grid { display: grid; gap: clamp(1.25rem, 3vw, 2.5rem) clamp(1rem, 3vw, 2.5rem); grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; justify-items: center; }
      @media (min-width: 600px) { .sl-press-wall-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
      @media (min-width: 900px) { .sl-press-wall-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
      .sl-press-wall-logo { filter: grayscale(1); opacity: .7; transition: filter .2s ease, opacity .2s ease; display: inline-flex; align-items: center; justify-content: center; width: 100%; }
      .sl-press-wall-logo:hover, .sl-press-wall-logo:focus-visible { filter: grayscale(0); opacity: 1; }
    </style>
    <div class="sl-press-wall-grid">
      {%- for block in section.blocks -%}
        {%- assign name_slug = block.settings.name | handle | default: block.id -%}
        {%- capture fallback -%}https://picsum.photos/seed/press-{{ name_slug }}/220/80?grayscale{%- endcapture -%}
        {%- if block.settings.url != blank -%}
          <a href="{{ block.settings.url }}" rel="noopener" class="sl-press-wall-logo" aria-label="{{ block.settings.name | default: 'Press mention' }}" {{ block.shopify_attributes }}>
            <img src="{{ block.settings.logo | image_url: width: 240 | default: fallback }}" alt="{{ block.settings.alt | default: block.settings.name | default: 'Press logo' }}" loading="lazy" style="height:clamp(26px,3.5vw,40px);width:auto;max-width:140px;object-fit:contain;" />
          </a>
        {%- else -%}
          <span class="sl-press-wall-logo" {{ block.shopify_attributes }}>
            <img src="{{ block.settings.logo | image_url: width: 240 | default: fallback }}" alt="{{ block.settings.alt | default: block.settings.name | default: 'Press logo' }}" loading="lazy" style="height:clamp(26px,3.5vw,40px);width:auto;max-width:140px;object-fit:contain;" />
          </span>
        {%- endif -%}
      {%- endfor -%}
    </div>
  </div>
</section>
{% schema %}
{
  "name": "Press Logo Wall",
  "settings": [
    { "type": "text", "id": "heading", "label": "Heading", "default": "As featured in..." },
    { "type": "color", "id": "bg_color", "label": "Background color" }
  ],
  "blocks": [
    {
      "type": "logo",
      "name": "Logo",
      "settings": [
        { "type": "image_picker", "id": "logo", "label": "Logo image" },
        { "type": "text", "id": "name", "label": "Publication name", "default": "Publication" },
        { "type": "text", "id": "alt", "label": "Image alt text" },
        { "type": "url", "id": "url", "label": "Link URL" }
      ]
    }
  ],
  "presets": [
    {
      "name": "Press Logo Wall",
      "blocks": [
        { "type": "logo", "settings": { "name": "Vogue" } },
        { "type": "logo", "settings": { "name": "Wired" } },
        { "type": "logo", "settings": { "name": "Forbes" } },
        { "type": "logo", "settings": { "name": "GQ" } },
        { "type": "logo", "settings": { "name": "Elle" } },
        { "type": "logo", "settings": { "name": "Men's Health" } },
        { "type": "logo", "settings": { "name": "Runners World" } },
        { "type": "logo", "settings": { "name": "Outside" } },
        { "type": "logo", "settings": { "name": "Fast Company" } },
        { "type": "logo", "settings": { "name": "Bloomberg" } },
        { "type": "logo", "settings": { "name": "The Times" } },
        { "type": "logo", "settings": { "name": "Esquire" } }
      ]
    }
  ]
}
{% endschema %}