Hi. I have a loop that queries all the blog posts and then displays them with a pagination of 7 results per page. I have another loop that fires after the first result to show a panel of articles that belong to a specific tag (limited to 4 result). The problem is that the articles in the second loop only show if there are any articles with that tag in the 7 articles of that page. How do I have this loop within a loop but query all articles instead of the paginated ones?
Hey Michael,
It’s hard to visualise how this would work, and give advice without the actual code - could you share the loop where you’re seeing this issue?
{%- paginate blog.articles by 7 -%}
{% assign counter = 0 %}
{%- for article in blog.articles -%}
{% assign counter = counter | plus: 1 %}
<!--This is where the second loop starts-->
{% if counter == 2 %}
{%- if newurl contains 'tagged' -%}
{% else %}
<div style="display: none;">
<h2 class="buying-guide-headline"><a href="/blogs/news/tagged/buying-guides">Buying Guides</a></h2>
<div class="wrapper buying-guide-carousel">
<div class="container">
{% assign aocounter = 0 %}
{% for article in blog.articles %}
{% if article.tags contains 'Buying Guides' %}
{% assign aocounter = aocounter | plus: 1 %}
<article class="article-{{ aocounter }}">
<a href="{{ article.url }}">
<div class="article-teaser-img" style="background: url({{ article.image | image_url }}) no-repeat center transparent;background-size: cover; min-height: 200px;" ></div>
<h3>{{ article.title }}</h3>
</a>
</article>
{% endif %}
{% endfor %}
</div>
</div>
</div>
{% endif %}
{% endif %}
<!-- This is where it ends -->
<article class="article-{{ counter }}">
<figure>
<a href="{{ article.url }}" style="background: url({{ article.image. | image_url }}) no-repeat center transparent; background-size: cover;width: 100%;position: relative; display: block;top: 0; bottom: 0;min-height: 260px;"></a>
</figure>
<div class="content">
<a href="{{ article.url }}">
<h2>{{ article.title }}</h2>
</a>
<a href="{{ article.url }}">
<p>
{%- if article.excerpt.size > 0 -%}
{{ article.excerpt }}
{%- else -%}
{{ article.content | strip_html | truncatewords: 50 }}
{%- endif -%}
</p>
</a>
</div>
</article>
{%- endfor %}
{%- endpaginate %}
You’d be better off doing an Ajax Call to load the blog posts, that way youc an pass in the desired tag too and fetch only the applicable results.
Alternatively.. if it’s for i.e. featured blog posts, use sections instead to bring out a list of your desired articles.
Thanks, but it’s not so much the loop for the articles, that works fine. It’s more that I want the loop INSIDE the loop to loop through all articles and not just the paginated ones in the parent loop.
Can you try creating some variables at the beginning?
{%- assign blog_articles_1 = blog.articles -%}
{%- assign blog_articles_2 = blog.articles -%}
Then use something like
{% for article_1 in blog_articles_1 %}
or
{% for article_2 in blog_articles_2 %}
Does this help at all? Just namespace your variables as you require
Sadly that just kills everything. I’m not sure it would address the fact that the second loop is sat inside the pagination of the first one.
Did you give it a try at all? Paginate should only affect that blog_articles_1
variable then.
Yes, tried it and it took all results off the page.
Try replacing:
{% for article in blog.articles %}
With:
{% assign all_articles = blogs[blog.handle].articles %}
{% for article in all_articles %}
This ensures you’re explicitly referencing the articles from the correct blog object via its handle. Let me know if the issue persists—happy to dig deeper.