blog--protected-content.liquid

{{ 'component-article-card.css' | asset_url | stylesheet_tag }}
{{ 'component-card.css' | asset_url | stylesheet_tag }}
{{ 'section-main-blog.css' | asset_url | stylesheet_tag }}

{%- style -%}
  .section-{{ section.id }}-padding {
    padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
    padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
  }

  @media screen and (min-width: 750px) {
    .section-{{ section.id }}-padding {
      padding-top: {{ section.settings.padding_top }}px;
      padding-bottom: {{ section.settings.padding_bottom }}px;
    }
  }
{%- endstyle -%}

{% if customer.tags contains 'member' %}
  {%- paginate blog.articles by 6 -%}
    <div class="main-blog page-width section-{{ section.id }}-padding">
      <h1 class="title--primary{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--fade-in{% endif %}">
        {{ blog.title | escape }}
      </h1>
  
      <div class="blog-articles {% if section.settings.layout == 'collage' %}blog-articles--collage{% endif %}">
        {%- for article in blog.articles -%}
          <div
            class="blog-articles__article article{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
            {% if settings.animations_reveal_on_scroll %}
              data-cascade
              style="--animation-order: {{ forloop.index }};"
            {% endif %}
          >
            {%- render 'article-card',
              article: article,
              media_height: section.settings.image_height,
              media_aspect_ratio: article.image.aspect_ratio,
              show_image: section.settings.show_image,
              show_date: section.settings.show_date,
              show_author: section.settings.show_author,
              show_excerpt: true
            -%}
          </div>
        {%- endfor -%}
      </div>
  
      {%- if paginate.pages > 1 -%}
        {%- render 'pagination', paginate: paginate -%}
      {%- endif -%}
    </div>
  {%- endpaginate -%}
{% else %}  
  {% render 'protected-content-gate' %}
{% endif %}

{% schema %}
{
  "name": "Protected Content Blog",
  "tag": "section",
  "class": "section",
  "settings": [
    {
      "type": "header",
      "content": "Gate Settings"
    },
    {
      "type": "text",
      "id": "procon_title",
      "label": {
        "en": "Heading",
        "de": "Seitenleisten-Überschrift",
        "es": "Encabezado de la barra lateral",
        "fr": "Titre de la barre latérale",
        "pt-PT": "Título da barra lateral"
      },
      "default": {
        "en": "Members Only"
      }      
    },
    {
      "type": "richtext",
      "id": "procon_body",
      "label": {
        "en": "Text",
        "de": "Text",
        "es": "Texto",
        "fr": "Texte",
        "pt-PT": "Texto"
      },
      "default": {
        "en": "<p>Thanks for checking out our website!<br>This section is exclusive to our members. You can login if you are a member, or signup to gain access.</p>"
      }
    },
    {
      "type": "url",
      "id": "procon_button_link",
      "label": {
        "en": "Button link",
        "de": "Buttonlink",
        "es": "Enlace del botón",
        "fr": "Lien du bouton",
        "pt-PT": "Ligação do botão"
      },
      "info": {
        "en": "Required to show the button",
        "de": "Notwendig, den Button zu zeigen",
        "es": "Es necesario mostrar el botón",
        "fr": "Requis pour afficher le bouton",
        "pt-PT": "Necessário para exibir o botão"
      }
    },
    {
      "type": "text",
      "id": "procon_button_label",
      "label": {
        "en": "Button label",
        "de": "Button-Bezeichnung",
        "es": "Etiqueta del botón",
        "fr": "Étiquette du bouton",
        "pt-PT": "Etiqueta do botão"
      },
      "default": "Join Today"
    },
    {
       "type": "checkbox",
       "id": "procon_show_login",
       "default": true,
       "label": "Show login button"
    },  
    {
       "type": "checkbox",
       "id": "procon_full_width",
       "default": true,
       "label": "Full width image"
    },
    {
      "type": "image_picker",
      "id": "procon_mobile_bg",
      "label": "Mobile Background"
    },
    {
      "type": "image_picker",
      "id": "procon_desktop_bg",
      "label": "Desktop Background"
    },
    {
      "type": "select",
      "id": "procon_bg_position",
      "options": [
        { "value": "center", "label": "Center"},
        { "value": "top", "label": "Top"},
        { "value": "bottom", "label": "Bottom"}
      ],
      "label": "Background position",
      "default": "center"
    },
    {
      "type": "color",
      "id": "procon_text_bg",
      "label": "Content Background Color",
      "default": "#ffffff"
    },
    {
      "type":      "range",
      "id":        "procon_text_bg_opacity",
      "min":       0,
      "max":        100,
      "step":       5,
      "unit":       "%",
      "label":     "Content Background Opacity",
      "default":   85
    },
    {
       "type": "checkbox",
       "id": "procon_show_custom_html",
       "default": false,
       "label": "Enable custom HTML"
    },
    {
      "type": "textarea",
      "id": "procon_custom_html",
      "label": "Custom HTML",
      "default": "<h1>put your custom html in here.</h1>"
    },
    {
      "type": "header",
      "content": "t:sections.main-blog.settings.header.content"
    },
    {
      "type": "select",
      "id": "layout",
      "options": [
        {
          "value": "grid",
          "label": "t:sections.main-blog.settings.layout.options__1.label"
        },
        {
          "value": "collage",
          "label": "t:sections.main-blog.settings.layout.options__2.label"
        }
      ],
      "default": "collage",
      "label": "t:sections.main-blog.settings.layout.label",
      "info": "t:sections.main-blog.settings.layout.info"
    },
    {
      "type": "checkbox",
      "id": "show_image",
      "default": true,
      "label": "t:sections.main-blog.settings.show_image.label"
    },
    {
      "type": "select",
      "id": "image_height",
      "options": [
        {
          "value": "adapt",
          "label": "t:sections.main-blog.settings.image_height.options__1.label"
        },
        {
          "value": "small",
          "label": "t:sections.main-blog.settings.image_height.options__2.label"
        },
        {
          "value": "medium",
          "label": "t:sections.main-blog.settings.image_height.options__3.label"
        },
        {
          "value": "large",
          "label": "t:sections.main-blog.settings.image_height.options__4.label"
        }
      ],
      "default": "medium",
      "label": "t:sections.main-blog.settings.image_height.label",
      "info": "t:sections.main-blog.settings.image_height.info"
    },
    {
      "type": "checkbox",
      "id": "show_date",
      "default": true,
      "label": "t:sections.main-blog.settings.show_date.label"
    },
    {
      "type": "checkbox",
      "id": "show_author",
      "default": false,
      "label": "t:sections.main-blog.settings.show_author.label"
    },
    {
      "type": "paragraph",
      "content": "t:sections.main-blog.settings.paragraph.content"
    },
    {
      "type": "header",
      "content": "t:sections.all.padding.section_padding_heading"
    },
    {
      "type": "range",
      "id": "padding_top",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "t:sections.all.padding.padding_top",
      "default": 36
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "t:sections.all.padding.padding_bottom",
      "default": 36
    }
  ]
}
{% endschema %}