Dynamic HTML grid with ExpressionEngine

Share on facebook
Share on twitter
Share on linkedin

Template Code

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

  1. Upload the product images.
  2. Configured Matrix.
  3. 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.

{exp:channel:entries channel="products" entry_id="25" dynamic="no"}
    <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 …