Customizing the number of post-card in each line

Themes
1

Hello,

What I am trying to do is to customize the number of post cards in my page. For example, I put three post-cards in the first line, then put four cards in next line.

Is there any chance to adjust that?

Many thanks!

2

Hey there :wave:. Are you trying to customise an existing theme? If so which theme? This should be possible with a little sprinkle of CSS :sparkles:

For example, there’s a discussion here about editing our default theme Casper: Editing casper theme

3

Hi @DavidDarnes,

I am using Casper theme on Ghost 3.0 . I have similar requirements, the article you mentioned did not help in understanding how each row has different number of columns.

Can you please point me in the right direction?

Thanks :slight_smile:

4

Hey there @ankittaneja. Are you trying to modify the layout of the theme or change the number of posts shown? Or maybe both! :smile:

5

Hi @DavidDarnes,

I am new to Ghost (codebase) so just trying to understand how it works :) I have been a Ghost(Pro) customer since 2016 probably but now wanna customise things to my taste.

I am trying to understand the home layout of Casper, which I think is index.hbs as Casper does not have home.hbs.

I am specifically trying to understand, how there is 1 large post, 3 normal post cards and then 2 posts and then it repeats.

I believe this line makes every 6th Post large; But how is it working on the 0th index? Is 0 by default?
<article class="post-card {{post_class}} {{#unless feature_image}}no-image{{else}}{{#has index="nth:6"}}post-card-large{{/has}}{{/unless}}">

Question 2: My post per page are set to 25(default); so is it post per page in batches of 6? So every time {{#foreach ‘posts’}}{{/foreach}} executes it runs just 6 times? Then where is the outer loop of post per page? I don’t understand the below paragraph, is it applicable when post per page is 6. If yes, perhaps please add it to the documentation.

The number of posts provided will depend on the post per page setting which you can configure in your package.json file. The array will provide the correct posts for the current page number, with the posts ordered chronologically, newest first. Therefore on the home page, the theme will have access to the first 6 posts by default. On /page/2/ the theme will have access to posts 7-12.

Question 3: If I wanna modify all even posts, I guess I have to do this;

{{#has number="nth:2"}}

What about all Odd posts?

Many thanks,
Ankit

6

Hey Ankit,

You’re right about that line of code, if you were to remove the line {{#has index="nth:6"}}post-card-large{{/has}} the large posts would stop appearing. Additionally the first post is large due to the {{post_class}}, which applies various classes attached to the post (more info here Ghost Handlebars Theme Helpers: post_class).

Posts per page mean how many posts are shown on each page, however Casper comes with infinite loading built in so the posts load in chunks of 25 each time you scroll to the bottom of the page.

Modifying all even posts needs slightly more code, something like class="{{#has index="nth:2"}}post-odd{{/has}}".

If you’re a Ghost(Pro) user I’d recommend utilising our support if you continue to have trouble modifying the theme. You’ve come to the right place for finding out how to modify themes, but if you get stuck then our support team is on hand for you at support@ghost.org :slightly_smiling_face:

7

Hi, I came across this post when looking for some guidance on how to replicate the 1, 3, 2 card post display sequence in my default index Casper template, so that it also applied to the menu items that are driven by specific tags, rather than the default 3, 3, 3 card sequence.

To do it I added , tag within {{#is “home, tag”}} in post-card.hbs New code:

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

It adds some visual interest. Hope that this helps anyone trying to do the same. David

1 Like