Hello,
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:
featured-posts.hbs
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
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
https://medium.freecodecamp.org/a-guide-to-responsive-images-with-ready-to-use-templates-c400bd65c433 --}}
<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}}"
loading="lazy"
/>
{{#unless access}}
{{^has visibility="public"}}
<div class="post-card-access">
{{> "icons/lock"}}
{{#has visibility="members"}}
Members only
{{else}}
Paid-members only
{{/has}}
</div>
{{/has}}
{{/unless}}
</a>
{{/if}}
<div class="post-card-content">
<a class="post-card-content-link" href="{{url}}">
<header class="post-card-header">
<div class="post-card-tags">
{{#primary_tag}}
<span class="post-card-primary-tag">{{name}}</span>
{{/primary_tag}}
{{#if featured}}
<span class="post-card-featured">{{> "icons/fire"}} Wichtig</span>
{{/if}}
</div>
<h2 class="post-card-title">
{{#unless access}}
{{^has visibility="public"}}
{{#unless feature_image}}
{{> "icons/lock"}}
{{/unless}}
{{/has}}
{{/unless}}
{{title}}
</h2>
</header>
{{#if excerpt}}
<div class="post-card">{{content}}</div>
{{/if}}
</a>
<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}}
{{#if @site.comments_enabled}}
{{comment_count}}
{{/if}}
</footer>
</div>
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.
