Local Developement: Ghost-CLI version: 1.17.3 & Ghost version: 4.8.4
I’m creating a theme for Ghost and facing some issue. So Attaching image for your reference.
As you can see in the below screenshot. I’m trying to achieve this layout. It has One Top Featured Post, Three Featured Post in 2nd Row and Normal Posts in 3rd row.
But the problem is, I’m getting the post duplicate issue. The Same post showing in Top Row Featured also in Second Row again showing in Normal Post Cards. (Marked with Box)
I’m using the below code in index.hbs
.
Not sure what is causing this issue.
{{!< default}}
{{!-- Top Featured Section --}}
{{#foreach posts filter="featured:true+tag:[frontpage]" limit="1" }}
{{#if featured}}
{{#if pagination}}
{{!-- Check if this is Paginatin Page Do Nothing --}}
{{else}}
<section class="section">
{{> top_featured}}
</section>
{{/if}}
{{/if}}
{{/foreach}}
{{!-- End of Top Featured Section --}}
{{!-- Second Featured Section Limited to 3 Post --}}
<div class="second-featured-container">
<div class="columns">
{{#foreach posts filter="tag:[frontpage]+id:-[{{posts[*].id}}]" limit="3"}}
{{#if featured}}
{{> second_featured}}
{{/if}}
{{/foreach}}
</div>
</div>
{{!-- End of Second Featured Section Limited to 3 Post --}}
<br><br>
{{!-- Normal Post Cards --}}
{{#foreach posts}}
<div class="normal-post-container">
<div class="columns">
<div class="column">
{{> normal_post}}
</div>
</div>
</div>
{{/foreach}}
{{!-- End of Normal Post Cards --}}
{{!-- Pagination --}}
{{pagination}}
Please help me with this. Thanks in Advance.
1 Like
You could try to fetch 4 featured posts:
{{#get "posts" filter="featured:true+tag:[frontpage]" limit="4"}}
{{!-- First post --}}
{{#foreach posts to="1"}}
...
{{/foreach}}
{{!-- Next 3 post --}}
{{#foreach posts from="2"}}
...
{{/foreach}}
{{/get}}
For the normal posts I would exclude featured posts from the default collection setting a filter in the routes.yaml
.
Hi @brightthemes Thanks for your input.
I have tried this. But nothing is appearing. Just a blank space is all I see.
{{!< default}}
{{#get "posts" filter="featured:true+tag:[frontpage]" limit="4"}}
{{!-- First post --}}
{{#foreach posts to="1"}}
{{> top_featured}}
{{/foreach}}
{{!-- Next 3 post --}}
{{#foreach posts from="2"}}
{{> second_featured}}
{{/foreach}}
{{/get}}
{{!-- Pagination --}}
{{pagination}}
Here is a screenshot:
I just checked it and this works for me (if I have featured posts with the frontpage tag):
{{#get "posts" filter="featured:true+tag:[frontpage]" limit="4"}}
{{!-- First post --}}
{{#foreach posts to="1"}}
<h1>{{title}}</h1>
{{/foreach}}
{{!-- Next 3 post --}}
{{#foreach posts from="2"}}
<h3>{{title}}</h3>
{{/foreach}}
{{/get}}
1 Like
I forgot to add that. This is working like a charm.
Thanks a lot.
Also, I have a doubt on hiding featured post blocks on pagination. This is the approach I’m using right now.
{{#if pagination}}
{{!-- Check if this is Pagination Page, then don't show --}}
{{else}}
{{!-- First post --}}
{{#foreach posts to="1"}}
{{> top_featured}}
{{/foreach}}
{{/if}}
And is it possible to hide already shown featured post in the Normal Post Section?
I personally, would exclude the featured posts from the main collection.
It can be done by changing the routes.yaml:
collections:
/:
permalink: /{slug}/
template: index
filter: featured:false
1 Like
Thank you so much, @brightthemes. It’s Perfect.
Using the Routes, I can hide the duplication from normal collection.
But how can I hide the featured post block in pagination pages.
Will this work?
{{#get "posts" filter="featured:true+tag:[frontpage]" limit="4" }}
{{#if pagination}} {{!-- Check this is Pagination Page, then don't show anything--}}
{{else}}
{{#foreach posts to="1" }}
{{> top_featured}}
{{/foreach}}
{{/if}}
1 Like
Oh, ok.
You can check the context
You have the possibility to check
{{#is "home"}}
{{/is}}
Another option is to set up the home.hbs (for layout just for the homepage).
Check the doc for the difference between index and home.
1 Like
Cool. Thank you so much for answering my question patiently.