Display blog articles based on tag

[FPrero]

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> 

[abelarts]

I would love to know how to do this to!

[GuillaumeA]

Moi aussi j'aimerais bien savoir faire ça

[Boki97]

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]

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.