how to implement filter in posts in ghost blog

Question

I am working on a blog. On the homepage, it has a bootstrap slider at the top followed by posts after it.

So, first 3 latest posts will appear in the slider and from 4th post onwards, they will appear in the rest of the markup.

I think I need to implement some kind of filter which would do the deed.

Below is my hbs code.

<div class="col-md-12 hidden-xs">
    <div id="myCarousel" class="carousel slide">
        <!-- Carousel indicators -->
        <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
            <li data-target="#myCarousel" data-slide-to="2"></li>
        </ol>
        <!-- Carousel items -->
        <div class="carousel-inner ">
            <div class="item active ">
                {{#foreach posts}}
                <article class="{{post_class}} col-md-12">
                    <div class="post-inner">
                        <header class="post-header text-left">
                            <h2 class="post-title "><a href="{{url}}">{{{title}}}</a></h2>
                        </header>
                        <section class="post-excerpt">
                            <p>{{excerpt words="20"}} <a class="read-more" href="{{url}}">&raquo;</a></p>
                            {{#if image}}<img class="post-image" src="{{image}}" alt="Post image" />{{/if}}
                        </section>
                        <div class="post-meta">
                            {{#if author.image}}<img class="author-thumb" src="{{author.image}}" alt="Author image" nopin="nopin" />{{/if}} {{author}} {{tags prefix=" on "}}
                            <time class="post-date" datetime="{{date format='YYYY-MM-DD'}}">{{date format="DD MMMM YYYY"}}</time>
                        </div>
                    </div>
                </article>
                {{/foreach}}
            </div>
        </div>
        <!-- Carousel nav -->
        <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
        <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
    </div>
    <div class="bottom-line"></div>
</div>
</div>
<div class="clearfix"></div>
<div class="row">
    <div class="col-md-4 ">
        {{#foreach posts}}
        <article class="{{post_class}} col-md-12">
            <div class="post-inner">
                <header class="post-header text-left">
                    <h2 class="post-title "><a href="{{url}}">{{{title}}}</a></h2>
                </header>
                <section class="post-excerpt">
                    <p>{{excerpt words="20"}} <a class="read-more" href="{{url}}">&raquo;</a></p>
                    {{#if image}}<img class="post-image" src="{{image}}" alt="Post image" />{{/if}}
                </section>
                <div class="post-meta">
                    {{#if author.image}}<img class="author-thumb" src="{{author.image}}" alt="Author image" nopin="nopin" />{{/if}} {{author}} {{tags prefix=" on "}}
                    <time class="post-date" datetime="{{date format='YYYY-MM-DD'}}">{{date format="DD MMMM YYYY"}}</time>
                </div>
            </div>
        </article>
        {{/foreach}}
    </div>
</div>

I hope I made my question clear.

Answer 1

If you are able to modify the back-end code that creates the template data object, then I think it would be preferable to perform the grouping logic before the data is passed to the template.

Assuming you have an array of blog posts which you are passing to your view:

{
    posts: array_of_posts
}

You could instead have two arrays in your template data, one for the slider and one for the listing:

{
    slider_posts: array_of_posts.slice(0, 3),
    listing_posts: array_of_posts.slice(3)
}

In your template, you will then iterate over slider_posts and listing_posts accordingly.