Dynamic HTML grid with ExpressionEngine

The Solution

So, the point of this article is to show how to create a completely dynamic grid-based product page using the following things.

  1. ExpressionEngine. This is the basis for the site itself.
  2. The ExpressionEngine File Module.
  3. The brilliant Matrix plugin by Pixel and Tonic.
  4. Zack Grossbart’s awesome Dynamic Grid Layout jQuery Plugin.
  5. The Image Sizer plugin for ExpressionEngine.

Note: Because EE isn’t free (some consider it very expensive), I’m going to make the assumption that paying USD $55 for the Matrix plugin isn’t a major problem, either.

Ok, so how do we proceed?

There are a few steps to cover off first – please make sure you’ve done these before getting stuck in.

  1. Setup ExpressionEngine as per your requirements. Because these settings are site-specific, I’m not going to cover EE configuration here.
  2. Enable the EE File module.
  3. Setup an upload location for the images in the product section (remember, this article is for a products page). Don’t forget to set the appropriate permissions on the upload location …
  4. Install and register the Matrix fieldtype.
  5. Install and enable the Image Sizer plugin.
  6. Upload some files to the products upload location. You don’t need to add captions to the files as we’ll be using Matrix for that.
  7. Upload and reference the Dynamic Grid Layout JavaScript in the relevant pages on your site.

Matrix Configuration

Now that all the preparatory stuff is done, we can configure Matrix. The channel that has the products info must have a custom field of type ‘Matrix’. The example I’m working with is called Product Images and has three field options within the field:

  1. Product Image (cell type = File), called product_image – make sure the Allowed Directory is set to the name of your upload location if you want to guarantee the files end up in the right place.
  2. Long caption (cell type = Text), called caption.
  3. Short caption (cell type = Text), called short_caption.

Channel Entry

Create a channel entry in the relevant channel and, in the “Product Images” field, create a number of Matrix rows that reference files you uploaded earlier. Make sure the Matrix rows have info in both the Caption and Short Caption columns. If you want to make absolutely sure these fields are filled in, enforce it by setting those columns to required in the Matrix configuration.

Once the entry is live, take note of the entry ID – we’ll be using it in our template.