Foreach repeating posts

Developer help
1

Hi all,
I duplicated the default post-feed CSS classes into a new set called benefit-feed

.benefit-feed {
    position: relative;
    display: grid;
    gap: 4.8vmin 2vmin;
    grid-template-columns: repeat(8, 1fr); 
    padding: max(4.8vmin, 36px) 0 0;
}

:is(.tag-template, .author-template) .benefit-feed {
    margin-top: 4vmin;
}

@media (max-width: 991px) {
    .benefit-feed {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 767px) {
    .benefit-feed {
        grid-template-columns: 1fr;
        grid-gap: 40px;
    }
}

and updated the grid-column-template to display 4 posts rather than the default 3 as in the default post-feed.

I can now show 4 posts with tag ‘home_benefit’ across the page using the following code

<div class="benefit-feed">
                {{#get "posts" filter="tags:home_benefits" as |post|}}
                    {{#post}}
                        {{#foreach post}} 
                            <article class="post-card post" style="background-color:#006990;">
                                <div class="post-card-content">
                                    <header class="post-card-header p20" style="color:white;">
                                        <h2 class="post-card-title">{{title}}</h2>
                                    </header>
                                </div>
                            </article>
                        {{/foreach}}                       
                    {{/post}}
                {{/get}}
            </div>

however, it repeats the posts 4 times e.g.

image
image1837×1111 193 KB

Any help as to how I can ensure that each post is only retrieved once will be appreciated.

I am running in a local install so not available online

Thanks

2

I think you’re accidentally looping through four posts four times Try removing the {{#post}} (and matching close tag) and change it to #foreach posts (note the s) - I think that’ll fix you up.

3

That solved it!

Thank you very much @Cathy_Sarisky !