Featured post at top of homepage

After upgrading to V3 and the new casper theme, I am unable to pin the featured posts to the top of the homepage.

I’ve added the following code to index.hbs and restarted ghost.

{{#foreach posts}}
{{#if featured}}
{{> “post-card”}}
{{/if}}
{{/foreach}}
{{#foreach posts}}
{{^if featured}}
{{> “post-card”}}
{{/if}}
{{/foreach}}

But it hasn’t worked.
I can only get the featured post to show by only using the first section of code:
{{#foreach posts}}
{{#if featured}}
{{> “post-card”}}
{{/if}}
{{/foreach}}

But obviously normal posts don’t show then. So the first code snippet above should work but the featured post does not show.

I haven’t tried this yet but have been meaning to for a while now. Nonetheless, just yesterday I was looking into it and came across an alternate method described on this page which may be of assistance to you.

2 Likes

This seems to be a bug.

With the following code:

    <div class="post-feed">

      {{#foreach posts}}
        {{#if featured}}
          {{> "post-card"}}
        {{/if}}
      {{/foreach}}

      {{#foreach posts}}
        {{^if featured}}
          {{> "post-card"}}
        {{/if}}
      {{/foreach}}

    </div>

</div>

All new featured articles work as expected. However, I have one article that was published back in 2018 (2018-12-01). The featured post displays at the top when I change the published date to 2019-12-01 - even above unfeatured 2020 published articles. However, this does not work if the date is 2018-12-01.

Why is this?

I’ve just played around with the date selector and haven’t come up with a cause.
However, these are my findings:
2019-12-02 Works
2019-12-01 Works
2019-11-30 Works
2019-11-29 to 2019-11-21 Works
2019-11-20 Doesn’t work
2019-11-19 to 2019-11-11 Works
2019-11-10 to 2019-11-01 Doesn’t work
2018-12-01 Doesn’t work

So seemingly somethings strange with the data selector. I originally thought that it may be any day that have the numeral 0 in it but it’s seemingly a bit weirder than that.

You’re misunderstanding the datamodel. When you loop over posts, you have however many posts are set in your posts_per_page setting. Only featured posts in the first X posts will get pulled out.

If you want different data to the default that’s available, then you need to do a custom query using the get helper:

Hey @Stromfeldt ,

It’s been a while but I wonder if you (or anyone else really) could help me out tweaking the code on the article that was shared.

            {{#get "posts" include="tags,author" filter="featured:true" limit="1" as |featured|}}
                {{#foreach featured}}
                    {{> "post-card" shouldBeLarge="true"}}
                {{/foreach}}
            {{/get}}
            {{#foreach posts}}
                {{#unless featured}}
                    {{> "post-card"}}
                {{/unless}}
            {{/foreach}}      

What you shared works perfectly and I had a similar setup on my end… HOWEVER, if I only want one post to be featured in the live site no matter what, how could I tweak that code so it only gets 1 featured post, and the rest of the featured posts still show up as regular posts in the list below?

I’m simply trying to prevent editors from having to go back to the admin panel to untick the “featured” older posts in order to limit featured posts to 1.

1 Like