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!).

image

Let’s take a look at how Bootstrap implements their grid (knowing other grid systems are similar), and in particular, a 4-column grid.

<div class="row"> <div class="span3"></div> <div class="span3"></div> <div class="span3"></div> <div class="span3"></div> </div>

The only complexity within ExpressionEngine you face is that you have repeating elements for the “span3” class, but the rows also need to repeat as the page continues! The 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"}