How can I display specific blog posts on collection pages using blog tags?

How can I display specific blog posts on collection pages using blog tags?

FPrero
Visitor
1 0 1

Hi,
I want to pull specific blog posts to display on my collection pages based on a blog tag. 
Since this is going to be different for each collection, I set up a metafield to show up on collection pages where I can input the tag names for the blogs that I want to display. 

2 questions:

1) The correct blogs are only pulling when I insert the actual tag name in my code in place of my {{relatedBlogs}} reference. When I test displaying the relatedBlogs tag, it shows up correctly. 
2) How can I code this to pull the tag information from a metaobject list (this way I can set up all the tags and just choose them on my collection pages)?

 

      <div class="featured--blog blog__posts grid {% if blog_masonry != true and section.settings.card_style == "masonry" %} standard {% else %} {{ section.settings.card_style }} {% endif %}">
        {% assign relatedBlogs = collection.metafields.custom.blog_tags_2.value %}
        {% for tag in relatedBlogs %}
          {% for article in blogs.articles.articles limit: section.settings.post_limit %}
            {% if article.tags contains relatedBlogs %}
              <div class="blog__post {% if section.settings.card_style == "masonry" and blog_masonry %} blog--item-{{ forloop.index }} {% endif %}">
                {% render 'featured-article-card',
                  show_content: section.settings.show_content,
                  blog: section.settings.blog,
                  article: article,
                  show_image: section.settings.show_image,
                  show_date: section.settings.show_date,
                  show_author: section.settings.show_author,
                  show_comment: section.settings.show_comment,
                  hover_arrow: section.settings.hover_arrow,
                  media_height: section.settings.image_ratio,
                  media_aspect_ratio: article.image.aspect_ratio,
                  card_style: section.settings.card_style,
                  round_image: section.settings.image_round_corner
                %}
              </div>
            {% else %}
              <h3>No related blog posts!</h3>
            {% endif %}
          {% endfor %}
        {% endfor %}
      </div> 

 

Replies 6 (6)

abelarts
Tourist
9 1 2

I would love to know how to do this to!

GuillaumeA
Excursionist
18 1 6

Moi aussi j'aimerais bien savoir faire ça

Boki97
Shopify Partner
62 5 4

Here is the code that I used on the Dawn theme. It works fine. 
So I'm pulling the collection handle and splitting it into multiple words and if the article title matches any of those words it will put that article on the collection page. Here is the code:

{% assign collection_handle = collection.handle | replace: '-', ' ' | split: ' ' %}
{% assign article_count = 0 %}

{% for article in blogs['your-blog-handle'].articles %}
{% if article.handle contains collection_handle.first or article.handle contains collection_handle[1] %}
{% if article_count < 3 %}

<a href="{{ article.url }}" class="article_link">
<div class="article_collection">
<img
srcset="{%- if article.image.src.width >= 165 -%}{{ article.image.src | image_url: width: 165 }} 165w,{%- endif -%}
{%- if article.image.src.width >= 360 -%}{{ article.image.src | image_url: width: 360 }} 360w,{%- endif -%}
{%- if article.image.src.width >= 533 -%}{{ article.image.src | image_url: width: 533 }} 533w,{%- endif -%}
{%- if article.image.src.width >= 720 -%}{{ article.image.src | image_url: width: 720 }} 720w,{%- endif -%}
{%- if article.image.src.width >= 1000 -%}{{ article.image.src | image_url: width: 1000 }} 1000w,{%- endif -%}
{%- if article.image.src.width >= 1500 -%}{{ article.image.src | image_url: width: 1500 }} 1500w,{%- endif -%}
{{ article.image.src | image_url }} {{ article.image.src.width }}w"
src="{{ article.image.src | image_url: width: 533 }}"
sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 | divided_by: 2 }}px, (min-width: 750px) calc((100vw - 130px) / 2), calc((100vw - 50px) / 2)"
alt="{{ article.image.src.alt | escape }}"
class="motion-reduce"
{% unless lazy_load == false %}loading="lazy"{% endunless %}
width="{{ article.image.width }}"
height="{{ article.image.height }}"
>
<h2>{{ article.title }}</h2>
<div class="article-card__info caption-with-letter-spacing h5">

<span class="circle-divider">{{ article.published_at | time_tag: format: 'date' }}</span>


<span>{{ article.author }}</span>

</div>

<p class="article-card__excerpt rte-width">
{%- if article.excerpt.size > 0 -%}
{{ article.excerpt | strip_html | truncatewords: 30 }}
{%- else -%}
{{ article.content | strip_html | truncatewords: 30 }}
{%- endif -%}
</p>


</div>
{% assign article_count = article_count | plus: 1 %}
{% else %}
{% break %}
</a>
{% endif %}

{% endif %}

{% endfor %}




Boki97
Shopify Partner
62 5 4

Here is the code that I used on the Dawn theme. It works fine. 
So I'm pulling the collection handle and splitting it into multiple words and if the article title matches any of those words it will put that article on the collection page. Here is the code:

{% assign collection_handle = collection.handle | replace: '-', ' ' | split: ' ' %}
{% assign article_count = 0 %}

{% for article in blogs['your-blog-handle'].articles %}
{% if article.handle contains collection_handle.first or article.handle contains collection_handle[1] %}
{% if article_count < 3 %}

<a href="{{ article.url }}" class="article_link">
<div class="article_collection">
<img
srcset="{%- if article.image.src.width >= 165 -%}{{ article.image.src | image_url: width: 165 }} 165w,{%- endif -%}
{%- if article.image.src.width >= 360 -%}{{ article.image.src | image_url: width: 360 }} 360w,{%- endif -%}
{%- if article.image.src.width >= 533 -%}{{ article.image.src | image_url: width: 533 }} 533w,{%- endif -%}
{%- if article.image.src.width >= 720 -%}{{ article.image.src | image_url: width: 720 }} 720w,{%- endif -%}
{%- if article.image.src.width >= 1000 -%}{{ article.image.src | image_url: width: 1000 }} 1000w,{%- endif -%}
{%- if article.image.src.width >= 1500 -%}{{ article.image.src | image_url: width: 1500 }} 1500w,{%- endif -%}
{{ article.image.src | image_url }} {{ article.image.src.width }}w"
src="{{ article.image.src | image_url: width: 533 }}"
sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 | divided_by: 2 }}px, (min-width: 750px) calc((100vw - 130px) / 2), calc((100vw - 50px) / 2)"
alt="{{ article.image.src.alt | escape }}"
class="motion-reduce"
{% unless lazy_load == false %}loading="lazy"{% endunless %}
width="{{ article.image.width }}"
height="{{ article.image.height }}"
>
<h2>{{ article.title }}</h2>
<div class="article-card__info caption-with-letter-spacing h5">

<span class="circle-divider">{{ article.published_at | time_tag: format: 'date' }}</span>


<span>{{ article.author }}</span>

</div>

<p class="article-card__excerpt rte-width">
{%- if article.excerpt.size > 0 -%}
{{ article.excerpt | strip_html | truncatewords: 30 }}
{%- else -%}
{{ article.content | strip_html | truncatewords: 30 }}
{%- endif -%}
</p>


</div>
{% assign article_count = article_count | plus: 1 %}
{% else %}
{% break %}
</a>
{% endif %}

{% endif %}

{% endfor %}



You just need to adjust styling and you can show more than 3 articles if you want.

JoelSteinmann
Shopify Partner
4 0 1

looks like a great solution. however it is not very stable and it limits me in wording and marketing terms. 

 

isn't it possible to pull information from a TAG and match that somehow? in Products TAGS are possible and in Blogs TAGS are possible. We could use the same wording (I guess product tags and blog tags are not stored at the same spot). 

 

the functionality would be something like: if a product has a tag check if there is a blog posts with that same tag. if there is no corresponding tag, then show 3 random blogposts. 

Boki97
Shopify Partner
62 5 4

Hi,
So here is the updated code that works for me. But it's for adding related articles to the Collection page. For tagging Collections, I used custom metafield.

<div class="custom_articles page-width">

  {% assign collection_tags = collection.metafields.custom.tags %}
{% if collection_tags %}
  <div class="related-articles">
    <h2>Related Articles</h2>
    <ul>
      {% assign collection_tags_array = collection_tags | split: ',' %}
      {% for article in blogs['your_blog_name'].articles %}
        {% assign show_article = false %}
        {% for tag in article.tags %}
          {% if collection_tags_array contains tag %}
            {% assign show_article = true %}
          {% endif %}
        {% endfor %}
        {% if show_article %}
          <li>
            <a href="{{ article.url }}">
              <img src="{{ article.image | img_url: "400x" }}" />
             
             <h4>{{ article.title }}</h4> 
               <div class="article-card__info caption-with-letter-spacing h5">
              
                <span class="circle-divider">Published by Name on {{ article.published_at | time_tag: format: 'date' }}</span>
             
             
                
              
            </div>
              <p>{{ article.excerpt }}</p>
            </a>
            
          </li>
        {% endif %}
      {% endfor %}
    </ul>
  </div>
{% endif %}
</div>