How can I make this layout pull the three latest blog posts

Store Design
1

Hi,

I am creating a custom section that shows the three latest blogs added to the website but I ddon’t know how to get it to work correctly:

HTML:


  

    ![tree-736885__480.jpg](https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg)
    # Blog post name
  

  
    ### RECENT
    ![tree-736885__480.jpg](https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg)
    # Blog post name
    ![tree-736885__480.jpg](https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg)
    # Blog post name

CSS:

Basically what I am trying to do is make the bigger post the most recently published blog post and then the recent posts use the 2nd and 3rd most recently published articles.

Hopefully, this makes sense and any help would be greatly appreciated

Here’s a codepen: https://codepen.io/alexmciver/full/qBPNKpj

2

I have been able to solve it here is my code:


  {% for article in blog.articles limit: 3 %}
  {% if forloop.first %}
    

      
      # {{ article.title }}
    

  {% else %}
    
      ### RECENT
      
      # {{ article.title }}
    

  {% endif %}
{% endfor %}
3

NOT SOLVED

4

OK, so I was able to finally solve it, it took a while but nevertheless, I got there in the end.

One thing I have learnt though is liquid conditionals are complicated and also why does Shopify have to be unique and use elseif rather than else if like most other programming languages use?

Anyway, here’s my working solution:

<section class="journal-article-top-ctn brick--margin  wrapper--brick">
  {% for article in blog.articles limit: 3 %}
    {% if forloop.first %}
      <div class="journal-featured-post first-article">
        <img src="{{ article | img_url: '633x480' }}">
        <h1>{{ article.title }}</h1>
      </div>
    {% elsif forloop.last %}
        <section class="journal-recent-post last-article">
          <img src="{{ article | img_url: '332x187' }}">
          <h1>{{ article.title }}</h1>
        </section>
     </div>
    {% else %}
      <div class='small-articles-ctn'>
        <h3>RECENT</h3>
        <section class="journal-recent-post second-article">
          <img src="{{ article | img_url: '332x187' }}">
          <h1>{{ article.title }}</h1>
        </section>
    {% endif %}
  {% endfor %}
 </section>

And the CSS:

.journal-article-top-ctn{
  display:flex;
  margin-top: 94px;
  margin-bottom: 85px;
}
.journal-featured-post{
  width: 60%;
  padding-right: 121px;
}
.small-articles-ctn{
 width: 40%;
}
.blog-custom-featured-section {
  display: flex;
  justify-content: center;
}
.small-articles-ctn h3 {
  margin: 0;
  padding-bottom: 22px;
  font-size: 22px;
  line-height: 26px;
  font-family: Graphit-Medium;
  text-transform: uppercase;
}
.journal-featured-post img {
  width: 100%;
  max-width: 633px;
  height: 100%;
  max-height: 480px;
  object-fit: cover;
}
.journal-recent-post img {
  width: 100%;
  max-width: 332px;
  height: 100%;
  max-height: 187px;
  object-fit: cover;
}
.journal-featured-post h1 {
  margin-top: 23px;
  margin-bottom: 85px;
  font-family: Graphit-Light;
  font-size: 36px;
  line-height: 43px;
}
.journal-recent-post h1 {
  font-family: Graphit-Light;
  font-size: 16px;
  line-height: 22px;
  padding-top: 10px;
  padding-bottom: 29px;
  width: 100%;
  max-width: 341px;
}