Featured posts on front page

Question

How can display featured posts at the top of the front page? Followed by the remaining posts.

Currently they display at the top of each page of the pagination.

Here's my loop.hbs:

{{! Previous/next page links - only displayed on page 2+ }}
<div class="extra-pagination inner">
    {{pagination}}
</div>

{{! This is the post loop - each post will be output using this markup }}
{{#foreach posts}}
{{#if featured}}
<article class="{{post_class}} featured">
    <header class="post-header">
        <h2 class="post-title"><a href="{{url}}">{{{title}}}</a></h2>
    </header>
    <section class="post-excerpt">
        <p>{{excerpt words="26"}} <a class="read-more" href="{{url}}">&raquo;</a></p>
    </section>
    <footer class="post-meta">
        {{#if author.image}}<img class="author-thumb" src="{{author.image}}" alt="    {{author.name}}" nopin="nopin" />{{/if}}    
        {{author}}    
        {{tags prefix="on"}}    
        <time class="post-date" datetime="{{date format='YYYY-MM-DD'}}">{{date format="DD MMMM YYYY"}}</time>    
    </footer>    
</article>    
{{/if}}    
{{/foreach}}    

{{! This is the post loop - each post will be output using this markup }}
{{#foreach posts}}
{{#unless featured}}
<article class="{{post_class}}">
    <header class="post-header">
        <h2 class="post-title"><a href="{{url}}">{{{title}}}</a></h2>
    </header>
    <section class="post-excerpt">
        <p>{{excerpt words="26"}} <a class="read-more" href="{{url}}">&raquo;</a></p>
    </section>
    <footer class="post-meta">
        {{#if author.image}}<img class="author-thumb" src="{{author.image}}" alt="    {{author.name}}" nopin="nopin" />{{/if}}    
        {{author}}    
        {{tags prefix="on"}}    
        <time clas    s="post-date" datetime="{{date format='YYYY-MM-DD'}}">{{date format="DD MMMM YYYY"}}</time>    
    </footer>    
</article>    
{{/unless}}    
{{/foreach}}    

{{! Previous/next page links - displayed on every page }}
{{pagination}}

Here's my blog: http://netsca.pe/

The only featured post currently is How to Install Ghost on AWS | Amazon EC2 for free - the Complete Guide.

As you can see, it is displayed at the top of the third page of posts, as opposed to at the top of the front page.

I had a read of Stack Overflow: newest post with specific tag on the front page but still can't figure this out.

Also had a read through this: The Ghost Blogging Support Forum: Show Featured post first on index page but still nowhere.

I know it may not seen much of a help but have you tried commenting out the {{pagination}} just to see if it will actually list the featured articles first? I tried this on mine and it does ok. I am trying to pin it down in the code but I think the pagination is sorting the articles in post-date order regardless hence your featured post being on the 3rd page. — Intellidroid, Oct 14 '15 at 15:56
I have indeed, exactly the same results but just without the top and bottom 'Newer' button, "Page X of Y" text and 'Older' button. — Leo, Oct 15 '15 at 18:18

score 2 · Answer 1 · answered Oct 30 '16 at 06:29

variations of {{get}} were not successful for me on the latest version of Ghost. What did work was:

<section id="main">
              {{#foreach posts}}
              {{#if featured}}
                html for featured posts         
              {{/if}}
              {{/foreach}}

            <div>
              {{#foreach posts}}
              {{^if featured limit="2"}}
                    html for regular post loop
              {{/if}}
              {{/foreach}}
            </div>
</section>

This displayed the featured posts on top while another separately styled loop of posts were displayed below.

score 1 · Accepted Answer · answered Oct 16 '15 at 10:37

Firstly credit to @subic from ghost.slack.com who kindly tested my theme and pointed me in the right direction.

After having a read of the lengthy discussion GitHub Ghost Issue: Query (get) helper #4439 recently closed, great news - helpers and filters are being added to Public API v1!

The {{#get}} helper #5619 has just been merged to master (still unstable), so the solution:

{{#get "posts" featured="true" as |featured|}}
  {{#foreach featured}}
    ...
  {{/foreach}}
 {{/get}}

how do you add pagination to it? – Arch1tect Jan 02 '16 at 22:55 — Arch1tect, Jan 02 '16 at 22:55

Featured posts on front page

2 Answers2