0

I have an issue with looping output for a channel with Bootstrap. What I want to archive is this:

row col 8 col 4

row col 4 col 4 col 4

row col 8 col 4

row col 4 col 4 col 4

and so on. This would be for a blog index page listing all the posts. What I'm looking for is a way to output with the 8 and 4 columns in one row. Its an issue of getting the 8 and 4 columns to have separate posts. Could I use 'switch'? I would like to do this without any plugins.

I can loop the col 4 easy without an issue. Simple code below:

<!-- Journal Section -->
<section>
    <div>
        <!-- /.container -->
        <div>
            <!-- /.row -->
            {exp:channel:entries}
            <!-- .col-8 -->
            <div class="wrap col-lg-8 col-sm-12 content-item">
                <a href="{title_permalink=journal/notes}">
                    <img src="{journal_lead_image}{image:url:journal-lead-landscape}{/journal_lead_image}" alt=""
                        title="">
                </a>
                <div class="content_meta">
                    <h5><a href="{title_permalink=journal/notes}">{title}</a></h5>
                </div>
                <p class="item_summary">{journal_summary.</p>
            </div>
            <!-- /.col-8 -->

            <!-- .col-4 -->
            <div class="wrap col-lg-4 col-sm-12 content-item">
                <a href="{title_permalink=journal/notes}">
                    <img src="{journal_lead_image}{image:url:journal-lead-portrait}{/journal_lead_image}" alt=""
                        title="">
                </a>
                <div class="content_meta">
                    <h5><a href="{title_permalink=journal/notes}">{title}</a></h5>
                </div>
                <p class="item_summary">{journal_summary}</p>
            </div>
            <!-- /.col-4 -->
            {/exp:channel:entries}
        </div> <!-- /.row -->
    </div> <!-- /.container -->
</section>
<!-- Journal Section --> 

Any help would be appreciated.

  • Thanks. I'm running EE 5.3.2 and the text is pulling in using rich text field. The image tage is using 'channel images. All works fine from that end. This did work for creating odd and even rows. However what I what and now works is the second answer: <div class="{switch="col-lg-4|col-lg-8|col-lg-4|col-lg-4"} wrap col-sm-12 content-item"> – Graham Jun 6 at 9:31
2

Yes you could use switch also.

{exp:channel:entries}
  <div class="wrap {switch='col-lg-4|col-lg-8'} col-sm-12 content-item">
    ...
  </div>
{/exp:channel:entries}

Would output alternating containers with the correct col-lg class:

<div class="wrap col-lg-4 col-sm-12 content-item">
  ...
</div>
<div class="wrap col-lg-8 col-sm-12 content-item">
  ..
</div>
| improve this answer | |
  • Many thanks. I'm running EE 5.3.2. You answer was what I was looking for: <div class="{switch="col-lg-4|col-lg-8|col-lg-4|col-lg-4"} wrap col-sm-12 content-item"> This now loops, so that each col has a different post which loops to the next col and so on down the page. – Graham Jun 6 at 9:35
0

I think you are asking for a method that allows you to alternate between two row layouts while processing the output of a channel:entries tag.

One way to do this is to make use of EE's internal counter, and its conditional processing options - in particular the modulus operator.

Construct the template code for the two alternate rows and then put them into your template using a structure like this:

{exp:channel:entries... }
{if count % 2 == 1} 

... do stuff for the first row type ... 

{if:else}

... do stuff for the second row type ...

{/if}
{/exp:channel:entries}

That's it.

count is a variable that counts up loops within the output of the channel:entries tag.

The modulus operation count % 2 returns 1 on the first and every subsequent 'odd' row, and 0 on every 'even' row.

HTH

NB. In general it helps if you can provide some basic information about your EE setup - in particular what version of EE you are using; doing so will make it easier for others to give you appropriate suggestions.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.