Flip flop content blocks with grid....
How Do I?
I am looking for something more that “switch” - i think.
I am using zurbs foundation for the UI and EE grid for a part of a product. Im using EE 2.11
I need to literally flip flop blocks of content. As in, alternate content left to right down the page.
Basically, its like this:
<div class="row">
<div class="large-6 columns">image</div>
<div class="large-6 columns">title, subtitle, description</div>
</div>
<div class="row">
<div class="large-6 columns">title, subtitle, description</div>
<div class="large-6 columns">image</div>
</div>Note that the rows are same size, but the content within flips.
I really would like to use the grid for this, otherwise my channel fields for a single product entry will be really large.
Any idea how to pull this off using grid?
Check out the modulus operator, should be able to do what you need:
https://ellislab.com/blog/entry/the-modulus-operator
Should be able to do something like {if gallery:count % 2 > 0} Layout A {if:else} Layout B {/if} to do something every other row.
Alternatively, if you’re supporting only modern browsers, you can use CSS flexbox to reverse the order of columns in a row:
.flow_rtl {
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row-reverse;
flex-direction: row-reverse;
-webkit-flex-wrap: wrap-reverse;
flex-wrap: wrap-reverse;
}The above class would be applied to the row div.