Prerequisites

Before we begin, make sure you have the following installed:

• Matrix 2.0.4 or later
• Image Sizer
• nGen File Field (if using EE1)

Setting Up Your Matrix Field

1. Create a new field group named “galleries” and give it a Matrix field named “gallery”. Configure it with the following columns:

   	Column 1	Column 2	Column 3
   Cell Type	File	Text	Text
   Col Label	Image	Title	Caption
   Col Name	image	image_title	image_caption

2. Create a new channel named “galleries” and assign it your new field group.
3. Create a new entry in the channel, populate your Matrix field with a few rows, and it.

The Templates

Now that we’ve created our galleries channel, given it an entry and uploaded some images, let’s move onto the templates.

Create a new template group called “galleries”, and give it one additional template called “view”. We’ll use the index template for a thumbnail page, and the view template for a “single entry” page for the high-res images.

Here’s the basic code we’re using:

The index Template

<h1>Galleries</h1>
{exp:channel:entries channel="galleries"}
  <h2>{title}</h2>
  <ul>
    {gallery}
      <li><a href="{path='galleries/view/{url_title}/{row_id}}">
        {exp:imgsizer:size src="{image}" width="50" height="50"}
          <img src="{sized}" alt="{image_title}" width="50" height="50" />
        {/exp:imgsizer:size}
        {image_title}
      </a></li>
    {/gallery}
  </ul>
{/exp:channel:entries}

As you can see, the index template is creating a thumbnail for each image within your Matrix field, with the help of the Image Sizer plugin. Those thumbnails are linked to your view template, passing your entry’s url_title as the third URL segment, and the row’s row_id as the fourth.

The view Template

{exp:channel:entries channel="galleries"}
  {if no_results} {redirect="site/404"} {/if}
  {if {gallery:total_rows row_id="{segment_4}"}==0} {redirect="site/404"} {/if}

  {gallery row_id="{segment_4}"}
    <h1>{image_title}</h1>
    {exp:imgsizer:size src="{image}" width="500" height="500"}
      <img src="{sized}" alt="{image_title}" width="500" height="500" />
    {/exp:imgsizer:size}
    <p>{image_caption}</p>
  {/gallery}
{/exp:channel:entries}

The view template first grabs the parent entry. Because we’re using a standard EE URL format to access it, there’s no need to bother adding dynamic="no" and url_title="{segment_3}" to {exp:channel:entries}’ parameters. channel= is sufficient.

We then check to make sure the entry exists, and that its Matrix field contains the row we’re passing in the fourth URL segment. If either of those two conditions fail, we redirect the user to a 404 page.

Finally, we display the high-res image in all its glory, and place the image caption in a paragraph below it.

And there you have it! We’ve created a full-blown image gallery out of a single entry.