Add 3 blog posts by tag to bottom of page

Highlighted
Tourist
8 0 2

Hi All,

I'm trying to add 3 blog posts from my 'Advice' blog with the tag 'Budget' to the bottom of a page. I have created a snippet called budget-blog.liquid (code below), I've then created a page template and included the snippet under the page content using this {% include 'budget-blog' %}.

Currently I can pull through 3 articles from the Advice blog, however I don't know how to just pull through articles with the tag budget. Also the formatting is not correct and I'm not sure what I'm doing wrong. I want the 3 articles to be a 3rd of the width of the page all next to eachother, the first article is currently appearing correctly but the 2nd and 3rd are appearing under neath.

What am I missing here?

     <div class="page-width">
    <header class="section-header text-center">
      <h2>Recommended Articles</h2>
    </header>
        
        {% assign blog_handle = 'advice' %}

{% unless blogs[blog_handle].empty? or blogs[blog_handle].articles.size == 0 %}

    <div class="grid grid--uniform grid--blog">
        <div class="grid__item medium-up--one-third">
          <div class="article__grid-meta">
      <hr class="hr--small">
    </div>
    <div class="grid">
      {% for article in blogs[blog_handle].articles limit: 3 %}
        <div class="grid__item grid-item {{ article_width }}">
          <p class="h3">{{ article.title | link_to: article.url }}</p>
          <p>{{ article.published_at | date: '%B %d, %Y' }}</p>

          {% assign content = article.excerpt_or_content %}

          {% if article.image %}
          <p>
            <a href="{{ article.url }}">
              <img src="{{ article | img_url: 'medium' }}" alt="{{ article.title | escape }}" />
            </a>
          </p>
          {% endif %}

          {% if article.image %}
            <p>{{ content | strip_html | truncatewords: 50 }}</p>
          {% else %}
            <p>{{ content | strip_html | truncatewords: 100 }}</p>
          {% endif %}
            <ul class="list--inline article__meta-buttons">
              <li>
                <a href="{{ article.url }}" class="btn btn--secondary btn--small">
                  {{ 'blogs.article.read_more' | t }}
                </a>
              </li>
            </ul>
          </div>
        </div>
      {% endfor %}
    </div>
    <hr class="hr--invisible"></hr>
    <div class="text-center">
      <a href="{{ blog.url }}" class="btn">
        {{ 'blogs.article.view_all' | t }}
      </a>
    </div>
</div>
{% endunless %}

Here's the link to may page https://www.wellgroomed.ie/pages/budget-planner password for access 'haygaw'.

0 Likes