0

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!

  • It looks like after every 5 entries you want to switch to the alternate layout? Is that the case? Also, both of the code snippets you posted are exactly the same. I'm assuming that's a typo and you meant for one of them to have a text-left class? – Rob Sanchez May 15 '13 at 14:22
0

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.

| improve this answer | |
  • Mountain out of a molehill. Appreciate your time Johnathan. – Simon May 16 '13 at 14:00

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.