Creating Tag Layout with two columns

Themes
#1

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:

Screen Shot 2022-11-23 at 10.36.45
Screen Shot 2022-11-23 at 10.36.452982×1960 801 KB

My troubles are:

  1. Can’t control limit of posts
  2. Load more button working weird
  3. 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>
#2

Can you clarify? You wrote: “On the left side I need to have only posts with image and on the right column posts without image.”

Do you mean that you want posts that do not have featured images to show up only on the right, and posts that do have featured images to show up only on the left?

1 Like
#3

Yess Cathy, featured image on left and no featured image on the right side as the image shows

#4

So I think you’ll want to look at filtering - I /think/ you can filter your get request to include posts with or without featured images. This might be a good place to start: Ghost Content API Documentation

1 Like
#5

Thank you Cathy! Do you think filtering is better than using if conditionals as I’m using on my code?

#6

I suspect that the reason you’re getting weirdness with limit and load more is because you’re loading all the posts twice and rendering a different set of them each time. I think that if you implement a filter, you can grab the top 20 posts with images and the top 10 posts without images (or whatever you actually want).