Creating Rows with ExpressionEngine and a Grid
Below is an image from my digital library that I developed to help me organize my research for an upcoming book. It uses a responsive grid, and I’ll show you how to create it using Bootstrap and methods available within ExpressionEngine (no modulo!).
switch statement comes to the rescue in a somewhat unexpected way.
<div class="row"> {exp:channel:entries channel="books" orderby="title" sort="asc" dynamic="no"} <div class="span3"></div> <div class="span3"></div> <div class="span3"></div> <div class="span3"></div> {switch='|||</div><div class="row">'} {/exp:channel:entries} </div>
Why is this a little tricky? Well, even though the entire EE channel loop appears to be wrapped by a row element, it’s not. The closing (and opening) of the first, and all subsequent rows, is handled in the switch statement. The last and final closing “</div>” is actually closing a row that came from the switch statement.
If you are used to hardcoding this type of stuff in PHP, your mind may instantly jump to using some type of modulo plugin to do this, but fortunately you can scratch that complexity right out. Here is what my entire page looks like, using Assets for the image.
{embed="partials/_head"} <h2>Books</h2> <div class="row"> {exp:channel:entries
channel="books" orderby="title" sort="asc" dynamic="no"
disable="custom_fields | member_data | pagination | trackbacks"}
{if no_results} <div class="span12"><p>No entries yet.</p></div> {/if} <div class="span3"> {research_cover} <a href="{path='book/entry/{url_title}'}"><img class="img-polaroid img-rounded" src="{url:tall}" alt="{alt_text}"/></a> {/research_cover} <h5><a href="{path='book/entry/{url_title}'}">{title}</a></h5> <p class="center"><small>{if book_bought}✓ you own this{/if}</small></p> </div> {switch='|||</div><div class="row">'} {/exp:channel:entries} </div> {embed="partials/_foot"}
