Call all articles in blog EXCEPT the first one

Shopify Partner
42 0 2

I am building a fancy blog page for my client. They want the first blog post shown full width with a bunch of other cool things showing, then they want the other posts displayed below in order they came out.

I have the fancy part worked out, but when I put the rest of the blog posts below that one, the first one still comes up.

Logically this makes sense because I am using {% for article in blog.articles  %} to call the posts, but is there any way I can skip just the first post when calling all the other posts for the blog?

Thanks!

0 Likes
Shopify Expert
9807 92 1561

Depending on how you're using the loop, the offset parameter may help:

{% for foo in bar offset:1 %}
  ...

 

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
0 Likes
Shopify Partner
42 0 2

Thanks for the reply Jason. This works, but my problem now is that I have the posts paginate by six articles. When I go to the second page, it clips off the first post from that page as well.

Any suggestions to get it working only on the first page?

0 Likes
Shopify Partner
42 0 2
{% if paginate.current_page == 1 %}
  {% for article in blog.articles offset:1 %}
  ...
  {% endfor %}
{% else %}
  {% for article in blog.articles %}
  ...
  {% endfor %}
{% endif %}

Found a solution ... I simply wrapped my code for the first page code in this.

Next challenge is that the first page only shows five articles instead of six ... :/

0 Likes
Excursionist
13 1 3

A bit late to this party but had to do something similar; I managed to shorten the code required a bit so thought I'd post it here for posterity. I think the smart move is to use a variable for the offset to avoid repetition.

 

{% assign blog_offset = 0 %}
{% if 1 == paginate.current_page %}
  {% assign blog_offset = 1 %}
  {% assign featured_article = blog.articles[0] %}
  <h2>{{ featured_article.title }}</h2>
  ...
{% endif %}

{% for article in blog.articles offset:blog_offset %}
  <h2>{{ article.title }}</h2>
  ...
{% endfor %}
0 Likes
New Member
3 0 0

I am trying to do something similar but not having any luck, I want to output the first article and customize with CSS and then create a grid of the rest of the articles but keep within the same page. Any ideas?

0 Likes
Excursionist
13 1 3

not having any luck

If you want any decent help then you'll need to detail what you mean by that. What did you try and what is the result?

1 Like
New Member
3 0 0

Here is the code I put to see if I could get the correct output, so far it still just shows the grid: 

 
    {% assign blog_offset = 0 %}
{% if 1 == paginate.current_page %}
  {% assign blog_offset = 1 %}
  {% assign featured_article = blog.articles[1] %}
     
<img src="{{ article.image.src | img_url: '1024x' }}">
{% endfor %}
{% endif%}
{% for article in blog.articles offset:blog_offset %}
 
 
  
    
      
 
      
    <div class="grid__item grid-product small--one-whole medium-up--one-third aos-init aos-animate">
      <a aria-label="Read more about {{article.title }}" href="{{ article.url }}"><img alt="{{article.title }}" class="article__grid-image recipe-image lazyloaded" src="{{ article.image.src | img_url: '1024x' }}"></a>
      <div class="grid-product__meta">
        <div class="article__content-meta">
            <div class="article__date">
             <a aria-label="Read more about {{article.title }}" href="{{ article.url }}"></a>
            <time>{{ article.date }}</time>
            </div>
            <h2 class="h4 article__h4">
              <a aria-label="Read more about {{article.title }}" href="{{ article.url }}">{{article.title }}</a>
            </h2>
            <div class="grid-product__price">{{ article.excerpt | truncate: 100  }}</div>
          </div>
      </div>  
    </div>
    
 
    
      {% endfor %}
 
Here is a screenshot of the desired output
Screen Shot 2020-01-13 at 4.05.35 PM.png
0 Likes