press-logo.liquid

{% comment %}
  Section: Press Logos
  Description: Grille/carrousel de logos de presse avec liens externes.
{% endcomment %}

<section
  id="section-press-logos-{{ section.id }}"
  class="shopify-section section-press-logos"
  style="
    --pl-bg: {{ section.settings.bg | default: '#002645' }};
    --pl-pt: {{ section.settings.padding_top | default: 30 }}px;
    --pl-pb: {{ section.settings.padding_bottom | default: 30 }}px;
    --pl-maxw: {{ section.settings.max_width | default: 1200 }}px;
    --pl-gap-d: {{ section.settings.gap_desktop | default: 70 }}px;
    --pl-gap-m: {{ section.settings.gap_mobile | default: 40 }}px;
    --pl-logo-h: {{ section.settings.logo_height | default: 40 }}px;
    --pl-opacity: {{ section.settings.opacity | default: 70 | divided_by: 100.0 }};
    --pl-container-pad: {{ section.settings.container_padding | default: 20 }}px;
  "
>
  <div class="press-logos-section{% if section.settings.custom_bg %} has-custom-bg{% endif %}">
    <div class="press-logos-container">
      {% if section.settings.heading != blank %}
        <h3 class="press-logos-heading">{{ section.settings.heading }}</h3>
      {% endif %}

      <div class="press-logos-wrapper">
        {% for block in section.blocks %}
          {% assign img = block.settings.image %}
          {% if img != blank %}
            {% assign alt_txt = block.settings.alt | default: img.alt | default: 'Logo presse' %}
            <div class="press-logo-item" {{ block.shopify_attributes }}>
              {% if block.settings.link != blank %}
                <a
                  href="{{ block.settings.link }}"
                  class="press-logo-link"
                  {% if section.settings.open_new_tab %}target="_blank" rel="noopener"{% endif %}
                  aria-label="{{ alt_txt }}"
                >
                  {{ img
                    | image_url: width: 600
                    | image_tag:
                      alt: alt_txt,
                      loading: 'lazy',
                      class: 'press-logo-img',
                      widths: '200, 300, 400, 600'
                  }}
                </a>
              {% else %}
                {{ img
                  | image_url: width: 600
                  | image_tag:
                    alt: alt_txt,
                    loading: 'lazy',
                    class: 'press-logo-img',
                    widths: '200, 300, 400, 600'
                }}
              {% endif %}
            </div>
          {% endif %}
        {% endfor %}
      </div>
    </div>
  </div>

  <style>
    #section-press-logos-{{ section.id }} .press-logos-section {
      padding-top: var(--pl-pt);
      padding-bottom: var(--pl-pb);
      {% if section.settings.custom_bg %}background-color: var(--pl-bg);{% endif %}
    }
    #section-press-logos-{{ section.id }} .press-logos-container {
      max-width: var(--pl-maxw);
      margin: 0 auto;
      padding-left: var(--pl-container-pad);
      padding-right: var(--pl-container-pad);
    }
    #section-press-logos-{{ section.id }} .press-logos-heading {
      margin: 0 0 18px 0;
      font-size: clamp(16px, 2.2vw, 22px);
      line-height: 1.25;
      font-weight: 600;
      text-align: center;
      color: {{ section.settings.heading_color }};
    }
    #section-press-logos-{{ section.id }} .press-logos-wrapper {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      gap: var(--pl-gap-d);
    }
    #section-press-logos-{{ section.id }} .press-logo-item { flex-shrink: 0; }
    #section-press-logos-{{ section.id }} .press-logo-link { display: inline-block; text-decoration: none; }
    #section-press-logos-{{ section.id }} .press-logo-img {
      height: var(--pl-logo-h);
      width: auto;
      object-fit: contain;
      {% if section.settings.grayscale %}filter: grayscale(100%);{% endif %}
      opacity: var(--pl-opacity);
      transition: transform .25s ease, filter .25s ease, opacity .25s ease;
    }
    {% if section.settings.hover_effect %}
    #section-press-logos-{{ section.id }} .press-logo-img:hover,
    #section-press-logos-{{ section.id }} .press-logo-link:hover .press-logo-img {
      {% if section.settings.grayscale %}filter: grayscale(0%);{% endif %}
      opacity: 1;
      transform: translateY(-1px);
    }
    {% endif %}

    @media (max-width: 768px) {
      #section-press-logos-{{ section.id }} .press-logos-section {
        padding-top: {{ section.settings.padding_top_mobile | default: 20 }}px;
        padding-bottom: {{ section.settings.padding_bottom_mobile | default: 10 }}px;
      }
      #section-press-logos-{{ section.id }} .press-logos-container { padding-left: 15px; padding-right: 15px; }
      #section-press-logos-{{ section.id }} .press-logos-wrapper {
        gap: var(--pl-gap-m);
        {% if section.settings.mobile_scroll %}
          overflow-x: auto; justify-content: flex-start; flex-wrap: nowrap; padding-bottom: 10px;
          scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
        {% endif %}
      }
      {% if section.settings.mobile_scroll %}
      #section-press-logos-{{ section.id }} .press-logos-wrapper::-webkit-scrollbar { display: none; }
      #section-press-logos-{{ section.id }} .press-logo-item { flex: 0 0 auto; scroll-snap-align: start; }
      {% endif %}
      #section-press-logos-{{ section.id }} .press-logo-img { max-width: 70vw; }
    }
  </style>
</section>

{% schema %}
{
  "name": "Presse – Logos",
  "tag": "section",
  "class": "section-press-logos",
  "settings": [
    { "type": "text", "id": "heading", "label": "Titre (optionnel)", "default": "Ils parlent de nous" },
    { "type": "color", "id": "heading_color", "label": "Couleur du titre", "default": "#ffffff" },
    { "type": "checkbox", "id": "custom_bg", "label": "Activer la couleur de fond personnalisée", "default": true },
    { "type": "color", "id": "bg", "label": "Couleur de fond", "default": "#002645" },
    { "type": "range", "id": "padding_top", "label": "Padding haut (desktop)", "min": 0, "max": 120, "step": 2, "unit": "px", "default": 30 },
    { "type": "range", "id": "padding_bottom", "label": "Padding bas (desktop)", "min": 0, "max": 120, "step": 2, "unit": "px", "default": 30 },
    { "type": "range", "id": "padding_top_mobile", "label": "Padding haut (mobile)", "min": 0, "max": 100, "step": 2, "unit": "px", "default": 20 },
    { "type": "range", "id": "padding_bottom_mobile", "label": "Padding bas (mobile)", "min": 0, "max": 100, "step": 2, "unit": "px", "default": 10 },
    { "type": "range", "id": "container_padding", "label": "Padding latéral du container", "min": 0, "max": 60, "step": 2, "unit": "px", "default": 20 },
    { "type": "range", "id": "max_width", "label": "Largeur max du container", "min": 600, "max": 1800, "step": 20, "unit": "px", "default": 1200 },
    { "type": "range", "id": "gap_desktop", "label": "Espacement entre logos (desktop)", "min": 0, "max": 160, "step": 2, "unit": "px", "default": 70 },
    { "type": "range", "id": "gap_mobile", "label": "Espacement entre logos (mobile)", "min": 0, "max": 100, "step": 2, "unit": "px", "default": 40 },
    { "type": "range", "id": "logo_height", "label": "Hauteur des logos", "min": 20, "max": 120, "step": 2, "unit": "px", "default": 40 },
    { "type": "checkbox", "id": "grayscale", "label": "Appliquer un niveau de gris", "default": true },
    { "type": "range", "id": "opacity", "label": "Opacité des logos (en %)", "min": 10, "max": 100, "step": 5, "unit": "%", "default": 70 },
    { "type": "checkbox", "id": "hover_effect", "label": "Activer l’effet hover (retire gris + opacité)", "default": true },
    { "type": "checkbox", "id": "mobile_scroll", "label": "Activer le scroll horizontal sur mobile", "default": true },
    { "type": "checkbox", "id": "open_new_tab", "label": "Ouvrir les liens dans un nouvel onglet", "default": true }
  ],
  "blocks": [
    {
      "type": "logo",
      "name": "Logo",
      "limit": 24,
      "settings": [
        { "type": "image_picker", "id": "image", "label": "Image du logo" },
        { "type": "url", "id": "link", "label": "Lien (optionnel)" },
        { "type": "text", "id": "alt", "label": "Texte alternatif", "default": "Logo presse" }
      ]
    }
  ],
  "presets": [
    { "name": "Presse – Logos", "category": "Contenu" }
  ]
}
{% endschema %}
Créé il y a 2 mois.