Pinning a featured post to top of home page, on Ghost Pro, using Lyra

Hi there,

My URL is https://thinkbubbles.ghost.io/ - and I’m an absolute beginner, on day 2 of my Ghost Pro free trial. I’ve installed the Lyra theme, and added a couple of posts - however, I want to pin my introductory post to the top of the home page.

I’ve found various suggested solutions online, which all seem to assume self-hosting - and advise inserting some code into the index.hbs or home.hbs files in your theme and then re-starting Ghost.

Should I do this offline, using the Lyra files I downloaded from Github - and then re-upload the Lyra theme to Ghost? Is that what I’m supposed to do?

If so, what code should I be using, exactly?

Thanks,

Andrew

Hi @aclifton777

yes you need to download the theme from ghost admin or from github

So you can pin a post on top on index page with ghost feature post option…

to do that create a file something called pinned.hbs inside partial folder

& copy paste the following codes to that file

{{#get "posts" limit="1" include="tags,authors" filter="featured:true"}}
   {{#foreach posts visibility="all"}}
      {{> "post-card"}}
   {{/foreach}}

{{/get}}

save the file now on index.hbs add the partial

<div class="post-feed">
                {{> "pinned"}}  {{!-- Pinned post Partial  we just created - partials/pinned.hbs --}}
            {{#foreach posts visibility="all"}}

                {{!-- The tag below includes the markup for each post - partials/post-card.hbs --}}
                {{> "post-card"}}

            {{/foreach}}
        </div>

now create your introductory post & mark that as feature post from ghost admin & that post will show up on top of all articles

Hope this helps

Thanks

1 Like

Thanks!

This has worked, perfectly.

Andrew

You are welcome!

Unfortunately, I’m still having problems. I’ve added a new post - and despite the fact that I’ve not “featured” it, it now appears at the top of my home page, rather than my ‘featured’ introductory article.

Any ideas why this is happening?

Andrew

can you share your index.hbs codes here or in DM ?

I’m sorry, it seems that copying the entire file into a message didn’t work too well!

I’ve saved a copy of the index.hbs file to a dropbox folder, here is a link:

You should be able to view that online, or download if necessary.

Andrew

btw i checked your pinned.hbs & this is currently

{{#get "posts" limit="1" include="tags,authors" filter="featured:true"}}
   {{#foreach posts visibility="all"}}

   {{/foreach}}

{{/get}}

but it should be

{{#get "posts" limit="1" include="tags,authors" filter="featured:true"}}
   {{#foreach posts visibility="all"}}
      {{> "post-card"}}
   {{/foreach}}

{{/get}}

Thanks for this!

My introductory post is now where it should be, at the top of my home page. :grinning:

Andrew

You are welcome

I am using a modification of the Casper theme, and when I incorporate your solution using pinned.hbs, I get the featured post duplicated on index.hbs because it is not excluded from the {{#foreach}} loop. Both pinned.hbs and index.hbs are copied to my theme as shown in this forum entry. How do I exclude the post that is featured from the foreach loop executed after pinned.hbs is inserted?

Please use #pinned internal tag to show pinned posts. You will get better solution for this.

{{#get "posts" limit="1" include="tags,authors" filter="tag:hash-pinned"}}
   {{#foreach posts visibility="all"}}
      {{> "post-card"}}
   {{/foreach}}

{{/get}}

Use #pinned tag in your post

Actually, it was easier to continue using the “Featured” check box for the post, and then modify index.hbs as follows:

<div class="post-feed">

    {{> "pinned"}}  {{!-- any posts tagged as featured - partials/pinned.hbs --}}

    {{#foreach posts}}

        {{#unless featured}}

            {{> "post-card"}}

        {{/unless}}

    {{/foreach}}

</div>
1 Like

I am also trying to pin featured posts on the Penang theme.

I created the pinned.hbs file and added your code to the index.hbs file:

{{!< default}}

<div class='o-wrapper'>
  {{> hero }}

  <div class='o-grid'>
    {{> index-tag-list }}
  </div>

  <div class='o-grid js-grid'>
    {{> loop }}
  </div>

  <div class='o-grid'>
    {{ pagination }}
  </div>

  <div class='o-grid'><hr></div>

  <div class='o-grid'>
    {{> index-tag-columns }}
  </div>

  <div class='o-grid'><hr></div>
  <div class='o-grid'><hr></div>

  {{> index-authors }}

  <div class="post-feed">
                {{> "pinned"}}  {{!-- Pinned post Partial  we just created - partials/pinned.hbs --}}
            {{#foreach posts visibility="all"}}

                {{!-- The tag below includes the markup for each post - partials/post-card.hbs --}}
                {{> "post-card"}}

            {{/foreach}}
        </div>
</div>

Then I used the #pinned tag in my post. Nothing happened. Any insight??

I got the same result just creating and using an internal tag of “pinned” so I went back to filter=“featured:true” in pinned.hbs and in index.hbs I wrapped the {{> “post-card”}} in the {{#unless featured}} {{/unless}} to prevent duplicating the featured post. Just be sure to turn on the checkbox for “Feature this post” in the post settings for the post you want to be featured.

Still nothing. The only difference is that it duplicated all of the posts underneath “Authors” at the bottom of the page.

Does something look wrong here? (Also new here)

pinned.hbs

{{#get "posts" limit="1" include="tags,authors" filter="tag:hash-pinned"}}
   {{#foreach posts visibility="all"}}
   {{#unless featured}}
      {{> "post-card"}}
      {{/unless}}
   {{/foreach}}

{{/get}}

index.hbs

{{!< default}}

<div class='o-wrapper'>
  {{> hero }}

  <div class='o-grid'>
    {{> index-tag-list }}
  </div>

  <div class='o-grid js-grid'>
    {{> loop }}
  </div>

  <div class='o-grid'>
    {{ pagination }}
  </div>

  <div class='o-grid'><hr></div>

  <div class='o-grid'>
    {{> index-tag-columns }}
  </div>

  <div class='o-grid'><hr></div>
  <div class='o-grid'><hr></div>

  {{> index-authors }}

<div class="post-feed">

    {{> "pinned"}}  {{!-- any posts tagged as featured - partials/pinned.hbs --}}

    {{#foreach posts}}

        {{#unless featured}}

            {{> "post-card"}}

        {{/unless}}

    {{/foreach}}

</div>

</div>

Change filter=“tag:hash-pinned” to filter=“featured:true” in the first line of pinned.hbs, and then check the “Feature this post” item in the Post Settings for the post you want to be featured (access the Settings by clicking on the gear symbol in the upper right when editing the post). As to the duplicated posts underneath authors, I don’t include that in my index.hbs so I haven’t worked with that code other than to comment it out if it is in the Casper theme.

What have you written in pinned.hbs file? Can you show me?

@ENAMUL_HAQUE It is copied above ^^

This seems like it worked however it is only pinning one article. I changed limit="1" to limit="2" (and of course selected each article as Featured) but it did not change.

Also, I reverted my index.hbs back to how it was originally. Does that seem right?