UGC Photo Wall

<section class="sl-ugc-wall" style="padding:clamp(32px,5vw,56px) 1rem;color:inherit;font-family:inherit;">
  <div style="max-width:1200px;margin:0 auto;">
    <header style="text-align:center;margin:0 0 1.5rem;">
      {%- if section.settings.eyebrow != blank -%}
        <span style="font-size:.75rem;letter-spacing:.15em;text-transform:uppercase;color:var(--sl-accent,#0a5cff);font-weight:700;">{{ section.settings.eyebrow }}</span>
      {%- endif -%}
      <h2 style="margin:.25rem 0 0;font-size:clamp(1.5rem,3vw,2rem);">{{ section.settings.heading }}</h2>
      {%- if section.settings.hashtag != blank -%}
        <p style="margin:.5rem 0 0;opacity:.8;">Tag <strong style="color:var(--sl-accent,#0a5cff);">{{ section.settings.hashtag }}</strong> to be featured.</p>
      {%- endif -%}
    </header>
    <div style="display:grid;gap:.5rem;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));">
      {%- for block in section.blocks -%}
        <a href="{{ block.settings.link | default: '#' }}" target="_blank" rel="noopener" style="position:relative;display:block;aspect-ratio:{% cycle '1/1','1/1','3/4','1/1' %};overflow:hidden;border-radius:.375rem;" {{ block.shopify_attributes }}>
          <img src="{{ block.settings.image | image_url: width: 500 | default: 'https://picsum.photos/seed/' | append: block.id | append: '/500/500' }}" alt="{{ block.settings.alt | default: 'Customer photo' }}" loading="lazy" style="width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s;" onmouseover="this.style.transform='scale(1.03)'" onmouseout="this.style.transform='scale(1)'" />
          <span class="sl-ugc-over" style="position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.35rem;background:linear-gradient(to top,rgba(0,0,0,.75),rgba(0,0,0,.15));color:#fff;opacity:0;transition:opacity .2s;font-size:.85rem;" onmouseover="this.style.opacity='1'" onmouseout="this.style.opacity='0'">
            <span aria-hidden="true" style="display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;border-radius:50%;background:var(--sl-accent,#0a5cff);font-size:1.1rem;">{% if block.settings.platform == 'tiktok' %}&#9835;{% elsif block.settings.platform == 'youtube' %}&#9654;{% else %}&#9873;{% endif %}</span>
            <span>{{ block.settings.handle | default: '@customer' }}</span>
          </span>
        </a>
      {%- endfor -%}
    </div>
  </div>
</section>
{% schema %}
{
  "name": "UGC Photo Wall",
  "settings": [
    { "type": "text", "id": "eyebrow", "label": "Eyebrow", "default": "#ShopCommunity" },
    { "type": "text", "id": "heading", "label": "Heading", "default": "From our community" },
    { "type": "text", "id": "hashtag", "label": "Hashtag", "default": "#yourshop" }
  ],
  "blocks": [
    {
      "type": "photo",
      "name": "Customer photo",
      "settings": [
        { "type": "image_picker", "id": "image", "label": "Image" },
        { "type": "text", "id": "alt", "label": "Alt text", "default": "Customer photo" },
        { "type": "text", "id": "handle", "label": "Handle", "default": "@customer" },
        { "type": "select", "id": "platform", "label": "Platform", "options": [ { "value": "instagram", "label": "Instagram" }, { "value": "tiktok", "label": "TikTok" }, { "value": "youtube", "label": "YouTube" } ], "default": "instagram" },
        { "type": "url", "id": "link", "label": "Link" }
      ]
    }
  ],
  "presets": [
    {
      "name": "UGC Photo Wall",
      "blocks": [
        { "type": "photo" }, { "type": "photo" }, { "type": "photo" },
        { "type": "photo" }, { "type": "photo" }, { "type": "photo" },
        { "type": "photo" }, { "type": "photo" }, { "type": "photo" }
      ]
    }
  ]
}
{% endschema %}