Where I can find the Posts helper in Casper Theme

Themes
1

Where i Can find the Post helper file that is used in index.hbs like this

{{#foreach posts “Hello from posts”}}

            {{!-- The tag below includes the markup for each post - partials/post-card.hbs --}}
            {{> "post-card"}}

{{/foreach}}

Please tell me, I would be so grateful, I have already seen

link but found no answer there as it doesn’t tell the file name and the location where i can find the post helper.

2

Do you mean this?

1 Like
3

Thanks for your reply.
I am finding the location that POST/POSTS helper code in the casper theme.

4

@Adil_Osama_Rasheed helpers are not located in the theme layer (e.g. Casper). The {{> "post-card"}} you referred to previously is not a helper it’s a “partial” that you can find in “partials” folder here :wink: hope this is what were looking for!

1 Like
5

Thanks Gargol :slight_smile: .
Do you have idea how posts are being fetched? I am not able to figure out how the post-public controller is called and what workflow is being followed to fetch posts?

6

Posts are being fetched using async helper {{#get}} you can find more info about how to use it in the docs here :wink:

1 Like
7

Hello gargol,

I have a question in the same context as above and perhaps anyone of you can help.

So, I just installed Ghost 3.0 locally and I am not able to figure out how, index.hbs is serving posts in the way it’s serving, i.e., 1 first row then next row has 3, then 2, then 1 and then 1 in another format. Where is this styling coming from?

I would like to create my own index,hbs maybe with 2 posts, side by side and then paginate! Can you please guide me the right direction?

Thanks.

8

Hey @ankittaneja :wave:

The logic for post styling is composed of css classes and css properties.

You can see how the css classes are applied programatically here:

(specifically the #has helper for post-card-large class)

You can see the styling rules here:

The tl;dr for it is this:

  • First item is large (takes up a full row)
  • Normal post cards take up ~ 1/3 of a row (second row)
  • Since the first item is large, the third row only has 2 posts, so they’re bigger and take up 1/2 row each
  • This repeats over spans of 6 posts (1 large, 2 small, 3 medium), though the grouping is only css-based, not html based
1 Like
9

Hello @vikaspotluri123 :wave:t3:

Thanks for the response. Appreciate it :)

Okay, so has {#has index=“nth:6”} should do it for every 6th post and not 1st? So it should be 3,3,0 ! What am I missing here?

Secondly, I read the documentation again I am a bit confused by this paragraph:

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.

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?

Happy Diwali & thanks again.

Best,
Ankit

10

The style say post-card-large should take up a full row. Every sixth post gets this class (so post 1, 7, 13, etc)

By default, a post card takes up ~ 1/3 of a row

With the large post, and 3 small posts, you have 4 posts. There are 2 more posts available before the 7th post (which is a full row), so their are only 2 posts in the third row. The styles say that the card width should be maximized to fill the row, so they’re wider

No, there are 25 posts fetched

  • For every post
    • IF it’s a 6th index (as in factor of six), it has the post-card large class

In styles (once the html is sent to your browser), the layout is determined by the post width logic I mentioned above.

If you have 25 posts displayed, your last post will also be big (though it won’t look the same as the post-card-large posts) since the css tells the browser to make the card take up as much space as possible

11

Thanks again for your answer! I get it that every sixth gets this class, since index starts at 0, so it should be 0,6,12 and so on.
Question: So, 0 get’s it by default, correct? If I want to skip 0 and do something on 1, I should do

{{#has index="1"}}

Also, for all even posts:

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

This will do 2,4,6,… correct?

What if I wanna do something every Odd post? So: 1,3,5, and so on

Thanks again :)

13

I think so! If you want to do something for odd numbers, I think negation might be your best strategy (e.g. {{^has number="nth:2"}}...{{/has}}

Here are the reference docs I used:

14

Thanks man! Cheers :beers:

(Whom should we ask regarding the default 0 thingy?)