How to add content to the middle of home of Casper theme?

Developer help
1

Hi!

I’m trying to customize Casper and, so far, I’ve doing a good job… but there’s one thing that I just cannot do at all: to add a CTA area in the middle of the home, after the first 3 posts. You know Source? That’s what I want to achieve.

From what I understood looking into Source, index.hbs should include one part of the posts (the latest 3), the CTA, and then the rest of the post. But how can I do it? On Casper everything is a loop… :confused:

Here’s where I want to put something like it (the red line)

endcredits-
endcredits-1920×956 125 KB

Thanks in advance!

2

Something like:

{{#foreach posts}}
{{#match @index “=“ 3}}
{{> loop}}
Your cta card here
{{/match}}
{{/foreach}}

(I don’t recall if loop is the name of the partial in Casper. Adjust as needed if it’s actually post-card or something.)

1 Like
3

Hey @Cathy_Sarisky! Thanks for your help. :slight_smile:
I follow your blog for a while now and it’s an honor to have you pointing me on the right direction! :slight_smile:

As a matter of fact, I need to tweak a little so it could work exactly the way I wanted. For example, even though the CTA will appear after a third post (the large one and two “dynamics”), I needed to change the index to 2. Also, I needed to close and reopen the DIV, since it was not breaking the line as I wanted. :slight_smile:

Oh! The partial you thought was called loop is actually post-card. :)

Here’s the final code.

<main id="site-main" class="site-main outer">
<div class="inner posts">
    <div class="post-feed">
        {{#foreach posts}}
            {{> "post-card"}}
        {{#match @index 2}}
    </div>
            <div>HERE GOES MY CTA</div>
    <div class="post-feed">    
        {{/match}}
        {{/foreach}}
    </div>
    {{pagination}}
</div>
</main>

Thanks again! :)

1 Like
4

Oh, right. Index starts at zero. That’s what I get for posting before tea!