Breaking News: Grepper is joining You.com. Read the official announcement!

Relate Articles Shopify Liquid

Tony Harris answered on August 19, 2022 Popularity 5/10 Helpfulness 4/10

answer Relate Articles Shopify Liquid

Relate Articles Shopify Liquid

Comment

  <div class='related_articles'>
            <div class="page-width">

              <h3>{{ block.settings.related_articles_title }}</h3>

              <div class="articles_inner">

                {% for tag in article.tags %}
              
                {% assign counter = 0 %}
                {% assign skip_articles = article.handle | split: '.....' %}
                {% for related_article in blog.articles  %}
                  {% if related_article.tags contains tag and counter < 6 %}
                     
                    {% unless skip_articles contains related_article.handle %}
                      {% assign counter = counter | plus: 1 %}
                      {% assign temp = related_article.handle | split: '.....' %}
                      {% assign skip_articles = skip_articles | concat: temp %}
                      {% comment %}
                      {{ related_article | json }}
                      {{ related_article.image | json }}
                      {% endcomment %}

                      <div class="article">

                        <div class="article_wrap">


                            {%- if related_article.image -%}
                                <a href="{{ related_article.url }}" class="article_image">
                                    <img loading="lazy" src="{{ related_article.image | img_url: '450x450' }}" alt="{{ related_article.alt }}">
                                </a>
                              {%- else -%}
                                <a href="{{ related_article.url }}" class="article_image"></a>
                                    <img loading="lazy" src="https://cdn.shopify.com/s/files/1/0622/7027/5820/files/Cosmo_Placeholder_1.jpg?v=1658929028" />
                                </a>
                            {%- endif -%}

                            <div class="article_content">
                              <h4><a href="{{ related_article.url }}">{{ related_article.title }}</a></h4>
                              {% if related_article.excerpt.size > 0 %}
                                <p>{{ related_article.excerpt }}</p>
                                {% else %}
                                <p>{{ related_article.content | strip_html }}</p>
                              {% endif %}  
                            </div> 
                           
                          </div>

                      </div>


                    {% endunless %}
                  {% endif %}
                {% endfor %}
              
                {% endfor %}

              </div>

            </div>
          </div>

          <style>
            .related_articles {
                margin-top: 4rem;
                margin-bottom: 4rem;
              }
              .articles_inner {
                padding-top: 2rem;
                padding-bottom: 2rem;
                display: grid;
                gap: 20px 20px; 
                grid-template-columns: 1fr 1fr 1fr;
              }
              .article {
                margin-bottom: 3rem;
              }
              .article_wrap {
                background-color: rgba(var(--color-foreground),.04);
                min-height: 600px;
              }
              .related_articles h4 a {
                color: #dc7867;
              }
              .article_content {
                padding: 2rem;
              }
              .article_content p {
                display: -webkit-box;
                -webkit-line-clamp: 4;
                -webkit-box-orient: vertical;
                overflow: hidden;
                text-overflow: ellipsis;
              }
              .article_image  {
                width: 100%;
                height: 300px;
                display: block;
              }
              .article_image img {
                object-fit: cover;
                width: 100%;
                height: 100%;
              }
          </style>

Popularity 5/10 Helpfulness 4/10 Language whatever

Source: Grepper

Tags: relate shopify-liquid whatever

Link to this answer
Share Copy Link

Contributed on Aug 19 2022

Tony Harris

0 Answers Avg Quality 2/10

Relate Articles Shopify Liquid

Contents

More Related Answers

Relate Articles Shopify Liquid

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.