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.

[code lang=”xml”]
{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;
[/code]

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

[code lang=”html”]
&#123;exp:channel:entries channel="products" entry_id="1" dynamic="no"&#125;
[/code]

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.

[code lang=”html”]
<div id="basicgrid">
[/code]

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.

[code lang=”html”]
&#123;product_images&#125;
<div class="cell">
[/code]

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”.

[code lang=”html”]
<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>
[/code]

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.

[code lang=”html”]
&#123;/product_images&#125;
</div>
&#123;/exp:channel:entries&#125;
[/code]

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