On the top, there are three pinned posts
{{! Top 3 pinned }}
<div class="h-cover home-banner u-marginAuto u-marginBottom30 u-clear">
{{! Big left }}
{{#get "posts" filter="tag:hash-pin1" include="tags" limit=1 as |post|}}
{{#post}}{{> "story/story-cover" }}{{/post}}
{{/get}}
{{! Small right top }}
{{#get "posts" filter="tag:hash-pin2" include="tags" limit=1 as |post|}}
{{#post}}{{> "story/story-cover" }}{{/post}}
{{/get}}
{{! Small right bottom }}
{{#get "posts" filter="tag:hash-pin3" include="tags" limit=1 as |post|}}
{{#post}}{{> "story/story-cover" }}{{/post}}
{{/get}}
</div>
Then there are four featured posts. Here, I filter out hash-pin#
tags so that the four featured posts do not show a duplicate of the pinned posts.
{{! Show 4 featured posts in a grid }}
{{#get "posts" filter="featured:true+tag:-hash-pin1+tag:-hash-pin2+tag:-hash-pin3"
include="tags,authors" visibility="all" limit=4}}
<div class="extreme-container home-story-grid">
<div class="row u-marginBottom40">
{{#foreach posts visibility="all"}}
<div class="col col-s12 s6 m4 l3">
{{! Story Grid - partiasl/story/story-grid.hbs }}
{{> "story/story-grid" class='u-fontSize20'}}
</div>
{{/foreach}}
</div>
</div>
Finally a list of 20 posts. This is where the problem is - I can’t figure out a way to filter out the 4 featured posts. If I filter out featured:false
, it would hide all featured posts in the first 20 rather than just the 4 already listed above.
{{! Show the rest in a list }}
{{#get "posts" filter="tag:-hash-pin1+tag:-hash-pin2+tag:-hash-pin3"
include="tags,authors" visibility="all" limit=@config.posts_per_page}}
<div class="extreme-container">
<div class="row">
<div class="col col-left story-feed">
<div class="story-feed-content">
{{#foreach posts visibility="all"}}
{{> "story/story-list"}}
{{/foreach}}
</div>
</div>
{{> "sidebar"}}
</div>
</div>
{{/get}}
It’d be nice if there is an array that holds the IDs of the posts that were already displayed, which I would filter out on the bottom section.
Or is there a better way to do this? I think the pinned/featured/list is a pretty common pattern. I’m open to overhauling the current structure if there’s a BKM.