How can I display a 4x4 grid of tagged blog posts in my online store?

Technical Q&A
1

Hi there

I’m having trouble to make a simple gallery of our blog posts (we’ve made 300+ posts). This gallery will be a 4 by 4 grid showcasing the featured image of the most recent blog posts. In addition, the only blog posts that show in this gallery feed, is the ones that have tags that match a certain product’s handle. See the following code:


  

  ## View Our Latest Activities
    
    {% for article in blogs.our-latest-activities.articles %}
      {% if article.tags contains product.handle %}
        - ## {{ article.title }}
          
        
      {% endif %}
    {% endfor %}

The problem here is that the output size of

blogs.latest-activities.articles

is 50, which is much less than the expected value, which should be 300 something.

I don’t know then what is the alternative way to iterate through my blog posts? Somewhere I read something about GraphQL, I’m not sure if this is where I should research more into?

Please need help, I hired people since June and none are able to achieve this task or they give me incomplete solutions where it’s a gallery with just 1 post showing, when in fact should be filled by 16 posts.

2

Hi @smcstaff

Shopify have some limitations on collections, blogs main page to show a number of products and posts respectively.

In some cases using AJAX infinite loading you can achieve all 300+ posts on same page without going to or have limit on 50 posts per page.

You can get an idea on checking this link how infinite loading will work.