Ghost Casper Theme and layout of posts

Developer help
1

Hi

how can I configure the layout of the posts?
If I look at demo.ghost.io the blog posts have a much more dynamic layout (pic: ghost-casper-demo) than running ghost local (pic: ghost-casper-local).

How and where is this managed?
Thanks a lot, Best Leif

ghost-casper-demo
ghost-casper-demo578×1510 165 KB

ghost-casper-local
ghost-casper-local746×974 109 KB

PS: I’m using Ghost version: 3.40.1 and Casper 3.1.2

2

When you say “much more dynamic layout” can you elaborate ?

If you want to change your layout, you need to modify the theme. If it’s something you are not comfortable to code, I would buy one out of the shelf.

3

What I mean is, in the first screenshot you see that the layout is
1 post
3 posts
2 posts
1 post
3 posts
2 posts

I use the same theme but my layout of the posts is

3 posts
3 posts
1 post

I’m asking myself where and how is this configured. How can I get a “1-3-2” layout of posts?

Thanks, Leif

4

Nobody? Thanks

5

Hey @strug, the main logic is in the first line of partials/post-card.hbs file.

It says every sixth post to have a class post-card-large with {{#has index="nth:x"}} helper.

6

Perfect. Found it. Cool. Thanks a lot!

7

Then https://demo.ghost.io/ seems to run a modified default theme of GitHub - TryGhost/Casper: The default theme for Ghost, because there the posts are structured 1-3-2-1-3-2…

8

@minimaluminium can you tell me where to find to caspar theme source which runs the demo at http://demo.ghost.io/? In the 1st screenshot above you see the order 1, 3, 2, 1, 3, 2 posts per row. I checked the default caspar theme and there is only a post-card and a post-card-large style. Would be create if I don’t need to fiddle to get a post-card-medium displaying 2 posts in a row, when someone from you already created that. Thanks, Leif

9

Hey @strug, https://demo.ghost.io/ runs the exact same version of TryGhost/Casper. This is how the layout looks on a fresh local Ghost instance which is also same as the demo.

localhost_2369_(1440x960), 100%
localhost_2369_(1440x960), 100%1440×2414 307 KB

If you posted your live site URL which had an issue with the post layout, people might be able to help you.

10

you’re right. but as soon as I change the route.yaml to the one below, the layout/ordering is 1-3-3-1-3-3… instead of 1-3-2-1-3-2…

Do you have any idea why?

routes:
  /:
    data: page.home
    template: home

collections:
  /usecases/:
    permalink: /usecases/{slug}/
    template: usecases
    filter: primary_tag:usecase
    data: tag.usecase

  /blog/:
    permalink: /blog/{slug}/
    template: index
    filter: tag:-landingpage+tag:-usecase

taxonomies:
  tag: /tag/{slug}/
  author: /author/{slug}/
11

@minimaluminium is this a bug or intended?

12

You’re using home.hbs template as your homepage. Is this a copy of index.hbs, or something custom?

13

home is different, but /blog is using index.hbs, so I expected that the layout of <site>/blog/ should behave like <site>/ from a clean installation.

/blog/:
    permalink: /blog/{slug}/
    template: index
    filter: tag:-landingpage+tag:-usecase
14

You’re right, I totally missed that. In this case, the important part is:

{{#is "home"}}{{#has index="nth:6"}}post-card-large{{/has}}{{/is}}

This checks if it’s the homepage and only applies the CSS class when it’s on the homepage. That’s why the class isn’t getting applied on your custom blog page.

15

Perfect,

removing {{#is "home"}} in the first line of post-card.hbs gives me the same default layout of posts under /blog. Thank you @minimaluminium.

<article class="post-card {{post_class}} {{#unless feature_image}}no-image{{else}}{{#has index="nth:6"}}post-card-large{{/has}}{{/unless}}">