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.
[code lang=”xml”]
{exp:channel:entries channel="products" entry_id="25" dynamic="no"}
<h2>{title}</h2><br />
<div id="basicgrid">
{product_images}
<div class="cell">
<div class="product">
<a href="{product_image}" class="fancybox" title="{caption}">
{exp:imgsizer:size src="{product_image}" width="200"}
<img src="{sized}" alt="{short_caption}" width="{width}" height="{height}" />
{/exp:imgsizer:size}
</a>
<br />
<span class="product-caption">{short_caption}</span>
</div>
</div>
{/product_images}
</div>
{/exp:channel:entries}
[/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”]
{exp:channel:entries channel="products" entry_id="1" dynamic="no"}
[/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”]
{product_images}
<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="{product_image}" class="fancybox" title="{caption}">
{exp:imgsizer:size src="{product_image}" width="200"}
<img src="{sized}" alt="{short_caption}" width="{width}" height="{height}" />
{/exp:imgsizer:size}
</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”]
{/product_images}
</div>
{/exp:channel:entries}
[/code]
Finally, don’t forget to close the Matrix product_images and channel entries tags …
