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.
{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}
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
{exp:channel:entries channel="products" entry_id="1" dynamic="no"}
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.
{product_images} <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="{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>
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.
{/product_images} </div> {/exp:channel:entries}
Finally, don’t forget to close the Matrix product_images and channel entries tags …