index__featured-articles.liquid

index__featured-articles.liquid

{% comment %}

Custom section added by JadePuma
Instructions - https://jadepuma.com/blogs/shopify-tutorials/featured-promotions-grid-layout-for-flex-theme
Last editted - 14Aug22

{% endcomment %}

{%- assign title = section.settings.title -%}
{%- assign blog = blogs[section.settings.blog_widget_select] -%}
{%- assign blocks = section.blocks -%}

{% comment %} Section specific CSS {% endcomment %}
{% style %}
  #shopify-section-{{ section.id }} {
    padding-top: {{ section.settings.padding_top }}px;
    padding-bottom: {{ section.settings.padding_bottom }}px;
    {% if section.settings.width == 'wide' -%}
      width: 100%;
    {%- endif %}
  }
  {% render 'css-loop',
          css: section.settings.custom_css,
          id: section.id
  %}
{% endstyle %}

{% comment %} HTML markup {% endcomment %}
<section class="section
                {{ section.settings.css_class }}
                is-width-{{ section.settings.width }}"
                {% if section.settings.animation != "none" %}
                  data-scroll-class="{{ section.settings.animation }}"
                {% endif %}>

  {% if title != blank %}
    <div class="container">
      {% render 'heading',
              title: title,
              heading_tag: 'h2',
              context: 'featured-blog',
              text_alignment: 'center',
      %}
    </div>
  {% endif %}

  <div class="container">
      {% for block in blocks %}

      {% assign article = block.settings.article_widget_select %}

            <div id="shopify-section-{{ block.id }}"
            class="featured-article blog-card 
              featured-promotions__block featured-promotions__block--{{ forloop.length }} medium-down--one-whole
            {% if section.settings.home_page_articles == 2 %}
              one-half
            {% elsif section.settings.home_page_articles == 3 %}
              one-third
            {% elsif section.settings.home_page_articles == 4 %}
              one-fourth
            {% elsif section.settings.home_page_articles == 5 %}
              one-fifth
              {% endif %}
              column has-color-override article card show-border-{{ section.settings.show-border }} has-margin-bottom"
              data-promo-index={{ forloop.index0 }} {{ block.shopify_attributes }}>
              
            {% if article.image != blank %}
              <div class="card-image blog-card__image">
                <figure class="image">
                  <a class="blog-card__link" href="{{ article.url }}" title="{{ article.title | escape }}">
                    {% render 'image-element',
                            image: article.image,
                            alt: article.image.alt,
                            additional_classes: 'blog-card__image'
                    %}
                  </a>
                </figure>
              </div>
            {% endif %}

            <div class="card-content blog-card__content">
              <div class="media">
                <div class="media-content">
                  <h3 class="title">
                    <a class="featured-article--link" href="{{ article.url }}" title="{{ article.title | escape }}">{{ article.title }}</a>
                  </h3>
                </div>
              </div>

              {% if article.excerpt != blank and section.settings.blog_show_excerpt%}
                {%- assign postexcerpt = article.excerpt | size -%}
                {% if postexcerpt > 150 %}
                  {%- assign excerptlength = 'lg' -%}
                {% elsif postexcerpt <= 150 %}
                  {%- assign excerptlength = 'sm' -%}
                {% endif %}
                <div class="excerpt excerpt-length-{{ excerptlength }} has-margin-bottom">
                  {{ article.excerpt }}
                  <span class="truncation-fade"></span>
                </div>
              {% endif %}

              <div class="meta-info is-small">
                {% if section.settings.blog_show_tags %}
                  {% if article.tags.size > 0 %}
                    <ul class="meta-tag-list tags">
                    {% for tag in article.tags %}
                      <li class="tag tag--{{ settings.tag_style}}">
                        <a href="{{ shop.url}}/blogs/{{ blog.handle }}/tagged/{{ tag | handleize }}" title="{{ blog.title | escape }} {{ 'blogs.general.tagged' | t }} {{ tag | escape }}">{{ tag }}
                        </a>
                      </li>
                    {% endfor %}
                    </ul>
                  {% endif %}
                {% endif %}

                {% render 'meta-info-list',
                        article: article,
                        blog_author: section.settings.blog_author,
                        blog_date: section.settings.blog_date,
                        blog_read_time: section.settings.read_time,
                        blog_comment_count: section.settings.blog_comment_count
                %}
              </div>
            </div>
          {% if section.settings.button_type != 'none' %}
            <div class="blog-card__read-more">
              {% render 'button',
                      label: section.settings.button_label,
                      href: article.url,
                      type: "link",
                      style: section.settings.button_type
              %}
            </div>
          {% endif %}
          </div>
      {% endfor %}
  </div>
</section>


{% schema %}

{
  "name": "Featured articles",
  "class": "blog-posts blog-posts--1",
  "settings": [
    {
      "type": "text",
      "id": "title",
      "label": "Heading",
      "default": "Recent blog posts"
    },
    {
      "type": "blog",
      "id": "blog_widget_select",
      "label": "Blog"
    },
    {
      "type": "range",
      "id": "home_page_articles",
      "label": "Articles per row",
      "min": 2,
      "max": 5,
      "default": 3
    },
    {
      "type": "checkbox",
      "id": "blog_show_tags",
      "label": "Show tags",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "blog_author",
      "label": "Show author",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "read_time",
      "label": "Show estimated read time",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "blog_date",
      "label": "Show date",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "blog_comment_count",
      "label": "Show comment count",
      "default": false
    },
    {
      "type": "checkbox",
      "id": "blog_show_excerpt",
      "label": "Show excerpts",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "show-border",
      "label": "Show border",
      "default": true
    },
    {
      "type": "text",
      "id": "button_label",
      "label": "Button label",
      "default": "Read more"
    },
    {
      "type": "select",
      "id": "button_type",
      "label": "Button style",
      "options": [
        {
          "value": "none",
          "label": "None"
        },
        {
          "value": "button--primary",
          "label": "Primary"
        },
        {
          "value": "button--secondary",
          "label": "Secondary"
        },
        {
          "value": "button--link-style",
          "label": "Link style"
        }
      ],
      "default": "button--primary"
    },
    {
      "type": "header",
      "content": "Layout"
    },
    {
      "type": "select",
      "id": "width",
      "label": "Width",
      "default": "wide",
      "options": [
        {
          "value": "standard",
          "label": "Standard"
        },
        {
          "value": "wide",
          "label": "Wide"
        }
      ]
    },
    {
      "type": "range",
      "id": "padding_top",
      "label": "Top spacing",
      "min": 0,
      "max": 80,
      "default": 20,
      "unit": "px"
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "label": "Bottom spacing",
      "default": 0,
      "min": 0,
      "max": 80,
      "unit": "px"
    },
    {
      "type": "select",
      "id": "animation",
      "label": "Animation",
      "default": "none",
      "options": [
        {
          "value": "none",
          "label": "None"
        },
        {
          "value": "fadeIn",
          "label": "Fade in"
        },
        {
          "value": "fadeInDown",
          "label": "Fade in down"
        },
        {
          "value": "fadeInLeft",
          "label": "Fade in left"
        },
        {
          "value": "fadeInRight",
          "label": "Fade in right"
        },
        {
          "value": "slideInLeft",
          "label": "Slide in left"
        },
        {
          "value": "slideInRight",
          "label": "Slide in right"
        }
      ]
    },
    {
      "type": "header",
      "content": "Advanced",
      "info": "[Learn more](https://help.outofthesandbox.com/hc/en-us/articles/360022329373)"
    },
    {
      "type": "text",
      "id": "css_class",
      "label": "CSS Class"
    },
    {
      "type": "textarea",
      "id": "custom_css",
      "label": "Custom CSS"
    }
  ],
  "blocks": [
    {
      "type": "article",
      "name": "Article",
      "settings": [
        {
          "type": "article",
          "id": "article_widget_select",
          "label": "Article"
        }
      ]
    }
  ],
  "presets": [{
    "name": "Featured Articles",
    "category": "Blog",
    "settings": {
      "blog_widget_select": ""
    }
  }]
}
{% endschema %}