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!