Archived ExpressionEngine Uncategorized

Dynamic HTML grid with ExpressionEngine


This article is going to be a long one so sit back, relax (if you can) and get ready to do some EE hacking … ok, not hacking, creation. 🙂


I’m going to make a few assumptions for this article, as follows.

  1. You know your way around the ExpressionEngine control panel and are familiar with terms like template, etc.
  2. You know what jQuery is have an idea of what it is used for.

The Situation

Recently I’ve been doing some work on the redesign of the website for Erin King Photographer. Part of the redesign is the requirement for Erin to do 99% of the site management herself, without the need to refer back to me.

I realised that I’d need absolute control over the layout, styling & site architecture for this to work – that meant WordPress wasn’t an option for this version of Erin’s site. Now, I’m not saying WordPress couldn’t do the job (we still run Erin’s blog part of the site on WordPress. In my opinion, though, WordPress forces a shift in focus from design to content management – good for some but not what I wanted.

The Desired Layout

It looks simple (and is, when rendered), but this is the layout we’re trying to get to. Don’t forget this must be built & rendered dynamically, not hard-coded in the page’s markup.

Dynamic HTML grid for displaying products
The desired layout

The Decision

Some time ago I decided the new site should run on ExpressionEngine. The ability to control absolutely everything and yet still have the power of a full CMS made the decision pretty easy (plus, Digital Formula runs on ExpressionEngine).

*cough* I’ll leave this article where it is, but Digital Formula runs on WordPress, now. 😉

The Problem

The first issue I ran into (which I knew was coming) was that ExpressionEngine’s native file module, while powerful in its simplicity, does lack a couple of what you’d expect to be standard features. For example, it’s difficult to control the order that files are displayed, unless they all have a different date and time in the database. It’s also impossible to manually set the file order in the control panel and have that order obeyed during page rendering.