odd even columns in expressionengine with bootstrap

Question

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.

Answer 1

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>

Answer 2

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.