expressionengine

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"}

Creating a Simple Expression Engine Plugin

Expression Engine is usually great, but I think we all wish there was either more support for advanced PHP functions, or PHP wasn’t such a mess to work with within templates files. I also find plugins for simple things discouraging- after a while you end up with a long list of miscellaneous plugins which is a maintenance disaster waiting to happen.

My solution to getting around all of these issues in Expression Engine is to simply toss in a plugin, and add what I need to it. In Expression Engine 2, plugins live in “system/expressionengine/third_party” and require a folder name that matches the plugin name.

Github Gist

I just named my plugin the name of my company, so it is easy to distinguish, so I first created a folder “prime” with the “third_party” folder. Next, I added a file name “pi.prime.php” to the “prime” folder. The plugin itself is a PHP class exposed to Expression Engine by a tag pair, formatted as “{exp:class:function}tagdata{/exp:class:function}”.

View the Github Gist for pi.prime.php

Once the file is created, it is accessible in your templates and you can starting making magic.

{exp:prime:no_spaces}Holy crap this is easy!{/exp:prime:no_spaces}
result → Holycrapthisiseasy!

{exp:prime:format_phone}6509636889{/exp:prime:format_phone}
result → (650) 963-6889

{exp:prime:strip allow="<span>"}<p>This section is <strong>super</strong> awesome and <span>amazingly simple</span></p>{/exp:prime:strip} 
result → This section is super awesome and <span>amazingly simple</span>

Conditional Tag Pair Content in Expression Engine

While working with the Exp:resso Store in an Expression Engine install, I ran into a small issue because I needed to expose conditional content based on me knowing if a tag pair has anything in it. Exp:resso allows all the store’s products to have what they call “modifiers”, which is the way that you control selecting a small shirt versus a large shirt on a shirts product page.

<div class="box-these-in">
  <option ... >
  <option ... > 
  <option ... > 
</div>

My problem is that I want to contain all the modifiers within a DIV block, meaning I need one DIV for [x] amount of modifiers. The catch is that I don’t want any container to show up unless there are modifiers present. The options for the modifiers tag pair are sparse, as they are already within a “{exp:store:products}” tag pair, so I could not use a count or limit option that I normally would for this. Here was my hack to make this work.

{if "{modifiers}{modifier_name}{/modifiers}" != ""}
  <div class="box-these-in">
{/if}
{modifiers}
  <option ... >
{/modifiers}
{if "{modifiers}{modifier_name}{/modifiers}" != ""}
  </div>
{/if}

Shirts

As you can see, this just exploits the fact that the modifiers tag pair has a “modifier_name” field present if a modifier exists. With the shirt example, you are essentially making the following comparison if there were modifiers for shirt size, shirt color, and shirt style.

{if "SizeColorStyle" != ""} ...