Best way to loop through posts with my theme

Developer help
1

Hello there,

I have written a custom theme but my posts seem to loop in an odd way:

I basically want the posts to loop from latest first, without the the top post layout being repeated midway down the page. In which it should look like this as the final layout:

Here is a snippet of the code:

    {{!< default}}
        <!-- main content -->

        <div class="container">
            <div class="row">
            {{#foreach posts}}
                <!-- section latest -->
                <section class="latest">
                    <div class="col-12 col-md-12">
                        <a href="#">
                            <article>
                                <div class="article-thumb">
                                    <img src="{{feature_image}}"
                                        class="img-fluid" alt="">
                                </div>
                                <div class="article-body">
                                    <h2>{{title}}</h2>
                                </div>
                            </article>
                        </a>
                    </div>
                </section>
                <!-- ./section-latest end-->
            </div>

            <hr>

            <section class="latest-grid">
                <div class="row">
                    <div class="latest-article-grid col-lg-4 col-md-12">
                        <article>
                            <a href="#">
                                <div class="article-thumb">
                                    <img class="img-fluid"
                                        src="{{feature_image}}"
                                        alt="">
                                </div>
                                <h3>{{title}}</h3>
                            </a>
                        </article>
                    </div>                   
                </div>
                <hr>
            </section>
                
            <!-- Latest list -->
            <section>
            <a href="#">
                <div class="card mb-3" style="max-width: 100%;">
                    <div class="row g-0">
                      <div class="col-md-4">
                        <img class="img-fluid" src="{{feature_image}}" alt="...">
                      </div>
                      <div class="col-md-8">
                        <div class="card-body">
                          <h5 class="card-title">{{title}}</h5>
                          <p class="card-text"></p>
                          <p class="card-text"><small class="text-muted"><i class="far fa-clock"></i> 3 mins ago</small></p>
                        </div>
                      </div>
                    </div>
                 </div>
                </a>
            </section>
             {{/foreach}}
           </div>

Thank you for your help in advance!

2

You have a couple options, depending on how you’re planning on styling it.

  1. Use 2 separate loops
{{#foreach posts limit="1"}}
{{!-- first post --}}
{{/foreach}}
{{#foreach posts from="2"}}
{{!-- post 2 to end --}}
{{/foreach}}
  1. Just one loop
{{#foreach posts}}
  {{#if @first}}
    {{!-- first post --}}
  {{else}}
    {{!-- not first post --}}
  {{/if}}
{{/foreach}}

The docs have great examples on foreach usage: