display just the last blog post using liquid

Solved
Highlighted
Tourist
3 0 0

Hello guys.

How can I display just the last blog post? The code below displays all of them.

 

Thank you in advance!!

 

 

<div class="blog-flexbox">
  {% for article in blogs.news.articles %}
  <div class="blog-item_flexbox">
    <a href="#" class="blog-image w-inline-block">
      <img
        src="{{ article.image.src | img_url: 'medium' }}"
        width="350"
        srcset="
            {{ article.image.src | img_url: 'medium' }} 500w, 
            {{ article.image.src | img_url: 'medium' }} 562w"
        sizes="(max-width: 479px) 100vw, (max-width: 767px) 73vw, (max-width: 991px) 63vw, 562px"
      />
    </a>
    <div class="blog-textblock">
      <div class="blog-date">{{ article.created_at }}</div>
      <h1 class="blog-header">{{ article.title }}</h1>
      <p class="blog-text">{{ article.excerpt_or_content }}</p>
      <a href="{{ article.url }}" class="blog-link">Read Article &gt;</a>
    </div>
  </div>
  {% endfor %}
</div>

LE: managed to do it using:

{% paginate blog.articles by 1 %}
0 Likes
Highlighted
Shopify Staff
Shopify Staff
598 34 90

Hi, @webg !


Elle here from Shopify.


I've moved your post from our API board to our Design board as your question is better suited here!

 

Best,

Elle

Elle | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes
Highlighted
Shopify Partner
1280 169 402

As long as you don't have over 50 blog posts, you can use forloop.last:

 

<div class="blog-flexbox">
  {% for article in blogs.news.articles %}
{% if forloop.last %}
  <div class="blog-item_flexbox">
    <a href="#" class="blog-image w-inline-block">
      <img
        src="{{ article.image.src | img_url: 'medium' }}"
        width="350"
        srcset="
            {{ article.image.src | img_url: 'medium' }} 500w, 
            {{ article.image.src | img_url: 'medium' }} 562w"
        sizes="(max-width: 479px) 100vw, (max-width: 767px) 73vw, (max-width: 991px) 63vw, 562px"
      />
    </a>
    <div class="blog-textblock">
      <div class="blog-date">{{ article.created_at }}</div>
      <h1 class="blog-header">{{ article.title }}</h1>
      <p class="blog-text">{{ article.excerpt_or_content }}</p>
      <a href="{{ article.url }}" class="blog-link">Read Article &gt;</a>
    </div>
  </div>
{% endif %} {% endfor %} </div>

A forloop will only loop through 50 items though.

If my solution helped you, please like and accept as solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
1 Like
Highlighted
Shopify Partner
1280 169 402

Or do you mean the most recent blog post? In that case you can use forloop.first

If my solution helped you, please like and accept as solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
1 Like
Highlighted
Tourist
3 0 0

Hi!

 

Thank you for the responses!

 

Yes, would like to display the last one posted.

0 Likes
Highlighted
Shopify Partner
1280 169 402

This is an accepted solution.

In that case use forloop.first:

 

<div class="blog-flexbox">
  {% for article in blogs.news.articles %}
{% if forloop.first %}
  <div class="blog-item_flexbox">
    <a href="#" class="blog-image w-inline-block">
      <img
        src="{{ article.image.src | img_url: 'medium' }}"
        width="350"
        srcset="
            {{ article.image.src | img_url: 'medium' }} 500w, 
            {{ article.image.src | img_url: 'medium' }} 562w"
        sizes="(max-width: 479px) 100vw, (max-width: 767px) 73vw, (max-width: 991px) 63vw, 562px"
      />
    </a>
    <div class="blog-textblock">
      <div class="blog-date">{{ article.created_at }}</div>
      <h1 class="blog-header">{{ article.title }}</h1>
      <p class="blog-text">{{ article.excerpt_or_content }}</p>
      <a href="{{ article.url }}" class="blog-link">Read Article &gt;</a>
    </div>
  </div>
{% endif %}
  {% endfor %}
</div>
If my solution helped you, please like and accept as solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
1 Like
Highlighted
Tourist
3 0 0

thank you!

0 Likes