In this article we’ll create a basic image gallery page with thumbnail images that link through to larger versions.
If you are looking to develop a more complex gallery with multiple albums then check out our Perch Gallery app in the Add-ons section of the site.
In your page, create a new region called Gallery, wrapping it in an unordered list. This region will contain our thumbnails as list items.
<ul>
<?php perch_content('Gallery'); ?>
</ul>Next, we need to create a custom template for this region to use. Create a new file inside perch/templates/content and call it gallery_image.html.
Each item in the region will be a list item containing a thumbnail image which links to the larger version. So the outline of the HTML for the template will look like this:
<li>
<a href="">
<img src="" alt="" />
</a>
</li>The src of the image needs to be an image file, so we’ll add that first.
<li>
<a href="">
<img src="<perch:content id="image" type="image" label="Image" width="75" height="75" crop="true" />" alt="" />
</a>
</li>We want these to be thumbnails, so here we’ve used a height and width of 75 pixels, and set crop="true" so that the thumbnails are all cropped square.
The href of the link needs to point to a larger version of the file. If we reuse the same ID for a second image, Perch will only prompt the user to upload one file, but will process it in two different ways.
<li>
<a href="<perch:content id="image" type="image" label="Image" width="800" height="800" />">
<img src="<perch:content id="image" type="image" label="Image" width="75" height="75" crop="true" />" alt="" />
</a>
</li>This time we’ve set a maximum dimension of 800 pixels for the width and height, but not set it to crop – this will resize the image but keep its natural ratio. (It’s always worth setting some dimensions unless you really want to let content editors upload enormous images!)
The final step is to add a regular text field for the alt attribute and set it to be required.
<li>
<a href="<perch:content id="image" type="image" label="Image" width="800" height="800" />">
<img src="<perch:content id="image" type="image" label="Image" width="75" height="75" crop="true" />"
alt="<perch:content id="title" label="title" type="text" required="true" />" />
</a>
</li>Save your template, and choose it to use for your Gallery region, allowing multiple items.
Obviously, this basic implementation works just fine for users without JavaScript, but some real polish and flare can then be added with the use of something like Fancybox for jQuery or something similar for your favourite JavaScript library.
