Dynamic HTML grid with ExpressionEngine

Will it work, yet?

Yes … sort-of. At this point the template will pull entry number 1 from the product channel and display the Matrix images associated with it on the page. However, the images will be displayed top-down without any grid formatting. The next step is to apply the grid formatting JavaScript so that the grid layout works properly.

Reformatting the product images

If you don’t have one already, your site’s pages will need to run a JavaScript file that can call jQuery functions. I’m happy to help you if you don’t know what this means (Contact Me) but, for those that do, the jQuery code is as follows.

$(document).ready(function() {
    /* jQuery grid */
    /* parameter order: number of columns, column width, column height, cell spacing */
    /* all sizes are measured in em */
    alignGrid("basicgrid", 4, 18, 18, 0.25);

The example above uses numbers I pulled out of thin air; you’ll need to modify them to fit your site’s design.

NOW will it work?

Yes. If all plugins are installed & configured properly and you have the correct content in your channel entry, your product images will be taken from the database, displayed on the page then formatted into a nice grid.

Now, I’m aware that this could be done manually by using an HTML table but remember that the point of this is for Erin to be able to upload & remove product images, re-order them, edit captions and descriptions etc, all without asking for any help from the site’s designer (me).

Problem solved. 🙂