After Update posts are not formated right / show full post on home


I configured ghost so it displays featured posts on the startpage. Problem is, after the latest Update ghost can’t format the Desktop CSS anymore. Only the width for phone works.

At the moment I’m trying to display full posts on the startpage which are marked as featured. This doesn’t work at all and I need to use the excerpt. The next problem is, it isn’t formatted and it looks ugly. All users need to press on the text or title to see the post well formatted.

Any ideas how to accomplish to show a post fully like in the post.hbs?

The featured-post.hbs looks like this:


onst { SafeString } = require(“handlebars”);
const GhostContentAPI = require(“@tryghost/content-api”);
const api = new GhostContentAPI({
url: process.env.GHOST_API_URL,
key: process.env.GHOST_CONTENT_API_KEY,
version: “v4”

async function getFeaturedPosts(options) {
const { limit = 3 } = options.hash;
const posts = await api.posts.browse({
filter: “featured:true”,
limit: limit,
fields: “title, slug, excerpt, feature_image”
let output = “

    posts.forEach(post => {
    output += <li> <a href="/${post.slug}"> <img src="${post.feature_image}" alt="${post.title}"> <h2>${post.title}</h2> <p>${post.excerpt}</p> </a> </li> ;
    output += “
return new SafeString(output);

module.exports = getFeaturedPosts;

The post-page.hbs


{{!-- This is a partial file used to generate a post “card”
which templates loop over to generate a list of posts. --}}

{{#if feature_image}}
<a class="post-card-image-link" href="{{url}}">

    {{!-- This is a responsive image, it loads different sizes depending on device --}}
    <img class="post-card-image"
        srcset="{{img_url feature_image size="s"}} 300w,
                {{img_url feature_image size="m"}} 600w,
                {{img_url feature_image size="l"}} 1000w,
                {{img_url feature_image size="xl"}} 2000w"
        sizes="(max-width: 1000px) 400px, 800px"
        src="{{img_url feature_image size="m"}}"
        alt="{{#if feature_image_alt}}{{feature_image_alt}}{{else}}{{title}}{{/if}}"

    {{#unless access}}
    {{^has visibility="public"}}
        <div class="post-card-access">
            {{> "icons/lock"}}
            {{#has visibility="members"}}
                Members only
                Paid-members only


<div class="post-card-content">

    <a class="post-card-content-link" href="{{url}}">
        <header class="post-card-header">
            <div class="post-card-tags">
                    <span class="post-card-primary-tag">{{name}}</span>
                {{#if featured}}
                    <span class="post-card-featured">{{> "icons/fire"}} Wichtig</span>
            <h2 class="post-card-title">
                {{#unless access}}
                {{^has visibility="public"}}
                    {{#unless feature_image}}
                        {{> "icons/lock"}}
        {{#if excerpt}}
            <div class="post-card">{{content}}</div>

    <footer class="post-card-meta">
        <time class="post-card-meta-date" datetime="{{date format="YYYY-MM-DD"}}">{{date}}</time>
        {{#if reading_time}}
            <span class="post-card-meta-length">{{reading_time}}</span>
        {{#if @site.comments_enabled}}


It doesn’t matter which browser I use. Firefox or edge, the text is only on the left side in block but all css entrys for post-page have no block or grid order. Nether any effects appear after changing something in the screen.css or global.css for post-page.

Your JavaScript isn’t getting the post content (which should be in the html field), so it’s not a surprise that it isn’t appearing on the page. If it did so previously, it wasn’t due to this code.

No clue why your css isn’t applying, but I’ll guess that the theme update changed a selector in some way that doesn’t match your layout?

Oh, just a note: many themes need their css compiled. If you’re changing the source file but aren’t seeing changes, that may be to blame.

1 Like

Hah! Nice, thanks for the hint!
That was everything. I had to run npm install in the theme folder of Casper. Then I could use gulp zip, and now it works like a charm. Well, almost. I’m still facing issues in the screen.css with the max width at some point in the @media queries.

Right, the JavaScript has no usage. The posts are coming from post-page.hbs and default.hbs templates. I thought I couldn’t display the entire post on the start page, so I used excerpts and removed the limitations.

I already tried using content and post, but it had no effect. How can I display the entire post content in the post format at the startpage? This could fix my css problem too that appears after every update.

1 Like

You can definitely put content on the front page. You want the {{content}} helper for that. :slight_smile: