Featuring posts on your Ghost homepage


After waking up really early today 😴 I wanted give my Ghost blog homepage an overhaul. Because I don’t have a simple solution to exclude posts based on a specific tag, I wanted to give non-WOD posts more room at the top of the page.

Fortunately with Ghost 0.4 you can feature a post and your theme can check for those featured post. My theme kopis-ghost-theme now includes code like this:


    {{! Display featured posts at the top }}
    {{#foreach posts}}
    {{#if featured}}
    <article class="{{post_class}} .featured">
        <header class="post-header">
            <span class="post-meta"><time datetime="{{date format='YYYY-MM-DD'}}">{{date format="DD MMM YYYY"}}</time> {{#if tags}}on {{tags}}{{/if}}</span>
            <h2 class="post-title"><img src="/assets/images/emoji/star.png" class="featured" title="featured post" alt="featured post" /><a href="{{url}}">{{{title}}}</a></h2>
        </header>
        <section class="post-social">
            <a href="{{url}}#disqus_thread">0 Antworten</a>
            <g:plusone href="{{url}}" size="small">
        </section>
        <section class="post-excerpt">
            <p>{{excerpt}}&hellip; <a href="{{url}}">weiterlesen</a></p>
        </section>
    </article>
    {{/if}}
    {{/foreach}}

    {{! Display regular posts }}
    {{#foreach posts}}
    {{#unless featured}}
    <article class="{{post_class}}">
        <header class="post-header">
            <span class="post-meta"><time datetime="{{date format='YYYY-MM-DD'}}">{{date format="DD MMM YYYY"}}</time> {{#if tags}}on {{tags}}{{/if}}</span>
            <h2 class="post-title"><a href="{{url}}">{{{title}}}</a></h2>
        </header>
        <section class="post-social">
            <a href="{{url}}#disqus_thread">0 Antworten</a>
            <g:plusone href="{{url}}" size="small">
        </section>
        <section class="post-excerpt">
            <p>{{excerpt}}&hellip; <a href="{{url}}">weiterlesen</a></p>
        </section>
    </article>
    {{/unless}}
    {{/foreach}}

With {#if featured}...{/if} you can check if the post is a featured post inside your foreach posts loop. You can then modify the CSS class, for example.

Unfortunately I have to loop over the posts twice: first to write out all featured posts, then to write out all regular posts. Done that way, the featured post will appear at the top of the page. There is no easy way - yet - to reorder the posts on a given page before going into the foreach posts loop. :unamused: If you’re good with CSS you can maybe reorder the posts on the client-side, but I’d much prefer to keep those things on my server before rendering the page.

Do you use a custom theme on your Ghost installation? Or do you keep the default casper installation?

Weitere Artikel

Ein paar Bilder

Endlich da: Mein Oura Ring

Quick changelog with git

Pik Ass in Destiny 2

Neue Drohne: DJI Mavic Air

Confirmed: Changes to the Crossfit Games

Changes to the Crossfit Games

No Man's Sky NEXT

Selfmade phone wallpaper

Shooting timelapse on Sony Alpha