Hey everyone,
I’m looking for help in creating this tag layout. On the left side I need to have only posts with image and on the right column posts without image.
Link: Breves - Whitepaper
Image:
My troubles are:
- Can’t control limit of posts
- Load more button working weird
- I’m not sure my solution is the best
I would appreciate if a theme dev could lend me a hand on what’s the best solution for this page. I think it could be solved using the right foreach on the right places.
Code I’m using:
{{!< default}} {{#contentFor 'title' }}{{ meta_title }}{{/contentFor}} {{#tag}} <header class='c-page-header'>
<div>
<div>
<h1 class='c-topper__headline u-font-headline u-font-family-sansSerif' style="text-align: center;">Breves</h1>
{{#if description}}
<p class='c-topper__standfirst u-font-standfirst u-mt-8 u-font-family-sansSerif'>{{ description }}</p>
{{/if}}
</div>
</div>
</header>
{{/tag}}
<div class='js-grid o-grid o-grid--4-columns all-breves' style="align-items: start;">
<div class='c-stack-stories js-grid o-grid o-grid--3-columns' style="grid-column: 1/span 3;margin: 0!important;">
{{#foreach posts}}
{{#if feature_image}}
{{> card-breves }}
{{/if}}
{{/foreach}}
</div>
<div class='c-stack-stories js-grid' style="padding: 0 var(--grid-margin)">
{{#foreach posts}}
{{#unless feature_image}}
{{> teaser teaserSize='small' }}
{{/unless}}
{{/foreach}}
</div>
</div>