Dynamic HTML grid with ExpressionEngine

By chris

January 3, 2012

Template Code

Up till this point, you’ve done the following.

Upload the product images.
Configured Matrix.
Created a channel entry and assigned some of the product images to the Matrix field.

Now you’re ready to create a template to show these files referenced by the entry you created a minute ago. The template code is as follows.

&#123;exp:channel:entries channel="products" entry_id="25" dynamic="no"&#125;
    <h2>&#123;title&#125;</h2><br />
    <div id="basicgrid">
        &#123;product_images&#125;
            <div class="cell">
                <div class="product">
                    <a href="&#123;product_image&#125;" class="fancybox" title="&#123;caption&#125;">
                        &#123;exp:imgsizer:size src="&#123;product_image&#125;" width="200"&#125;
                            <img src="&#123;sized&#125;" alt="&#123;short_caption&#125;" width="&#123;width&#125;" height="&#123;height&#125;" />
                        &#123;/exp:imgsizer:size&#125;
                    </a>
                    <br />
                    <span class="product-caption">&#123;short_caption&#125;</span>
                </div>
            </div>
        &#123;/product_images&#125;
    </div>
&#123;/exp:channel:entries&#125;

Those of you with keen eyes may have noticed the reference to “FancyBox”. This isn’t a requirement for the layout but will give your users the ability to click the images and be shown a nice popup containing the full-size image. If you don’t want the images to be clickable, remove the anchor tag. Likewise, if you don’t want to use FancyBox, remove the class=”fancybox” attribute on the anchor tag.

Line-by-line Explanations

&#123;exp:channel:entries channel="products" entry_id="1" dynamic="no"&#125;

This line is where we tell the EE template which channel and entry to pull from the database. In this example, we’re using entry number 1 from the “products” channel.

<div id="basicgrid">

This is a critical line for the grid formatting that we’ll be setting up shortly. The div id doesn’t have to be “basicgrid” but you do need to remember what you put here.

&#123;product_images&#125;
<div class="cell">

These are the opening tags for the Matrix field (remember we called it product_images earlier) and opens a div that will be used by the grid script later. Unless you edit the multigrid.js file, this div have a class of “cell”.

<a href="&#123;product_image&#125;" class="fancybox" title="&#123;caption&#125;">
    &#123;exp:imgsizer:size src="&#123;product_image&#125;" width="200"&#125;
        <img src="&#123;sized&#125;" alt="&#123;short_caption&#125;" width="&#123;width&#125;" height="&#123;height&#125;" />
    &#123;/exp:imgsizer:size&#125;
</a>

These lines create an anchor that can be clicked to show the full-sized image in a nice FancyBox popup. Within the anchor we’re taking the product_image field and applying the Image Sizer plugin to it to create a thumbnail 200px wide.

&#123;/product_images&#125;
    </div>
&#123;/exp:channel:entries&#125;

Finally, don’t forget to close the Matrix product_images and channel entries tags …

Pages: 1234