Alternating layouts within one set of channel entry tags

Question

New to ExpressionEngine so apologies if my question has an obvious answer. Basically, I have two paths for a single channel's content on one page, one arranges the image to the left and the title to the right while the other does the opposite. They both have a specific pattern of five different sizes each that I have organised using the {switch} tag. [I should mention Foundation is how I'm creating the HTML structure.]

The image left layout:

<div class="row pad-bottom {switch='vid-m|vid-m|vid-l|vid-s|vid-s'}">
    <div class="{switch='four columns offset-by-one|four columns|three columns|four columns offset-by-one|three columns offset-by-two'} text-right title">
        <div class="inner">
            <a href="">{title}</a>
        </div>
    </div>
    <div class="{switch='seven columns|eight columns|nine columns|six columns end|seven columns'}">
        <div class="row">
            <div class="ten columns centered {switch='vid-m|vid-m|vid-l|vid-s|vid-s'}" style="background-image: url('')"><a class="" href=""></a></div>
        </div>
    </div>
</div

The image right layout:

<div class="row pad-bottom {switch='vid-m|vid-m|vid-l|vid-s|vid-s'}">
    <div class="{switch='four columns offset-by-one|four columns|three columns|four columns offset-by-one|three columns offset-by-two'} text-right title">
        <div class="inner">
            <a href="">{title}</a>
        </div>
    </div>
    <div class="{switch='seven columns|eight columns|nine columns|six columns end|seven columns'}">
        <div class="row">
            <div class="ten columns centered {switch='vid-m|vid-m|vid-l|vid-s|vid-s'}" style="background-image: url('')"><a class="" href=""></a></div>
        </div>
    </div>
</div>

What I'm looking to do is flow a single channel's entries from one to the other, alternating left and right on the way down. The only result I've managed to get anywhere near this is having the channel entries tag outside both but this causes each entry to be duplicated, but the layout is correct. Sorting the entries would require calling the channel entry each time and offsetting and limiting which doesn't help either.

Any help or insight would be brilliant.

Thanks in advance!

Answer 1

I think this is more of an issue of how you are displaying your data with html. This data should be in a single container. In the container each image (or image container) should be given a left and right class. then when you are pulling the entries it should be something like this

<div class="two-column-container">
  {exp:channel:entries channel="example"}
    <div class="data {switch 'left|right'}">
      {title},{img},{ect...}
    </div>
  {/exp:channel:entries}
</div>

Then from there adjust your css.