1. The Shortest Gallery Tutorial In The World

As I said in the introduction, ProcessWire actually has a gallery built in already - it is the images field. So lets use it to create a basic thumbnail gallery where the thumbnail links to a full sized image. Although this doesn't LOOK that short, bear in mind I have tried to explain everything just in case - in reality, this is only a handful of actions.

Step 1 - Create an image field.

Go to Settings > Fields and create a new field

Select images type, give it a name (no spaces) and save.

On the details tab set the max number of images to something useful (must be more than 1) - 16 always seems a nice number, but choose what you like,

On the input tab, limit the max width and height to something sensible - normally the max size at which you think the image will be displayed.

Leave the description field as is.

That will do for now, so save.

Step 2 - Add to a template.

Go to Settings > Templates.

On an existing template (or create a new one if you wish) add the images field you just created. Obviously this needs to be a template that has a template file associated with it!

Save

Step 3 - Add some images.

Okay, bit obvious this one, but go create a page using the above template or go to an existing page that used the template and add a pile of your fave photos complete with short descriptions which will be used for the alt attribute; it will make appreciating all your hard work so much more fulfilling...

Step 4 - Add markup to the Template File.

This is the really, really complicated bit.... ish.

Open the template file in your favourite editor.

We need to retrieve the field for the page and then loop through the images in the field. Since this field was not set for just 1 image, the field will contain an array and needs to be treated as such. (Note: even if you only upload one image, it will still be an array as far as ProcessWire is concerned - just a very short one)

Open your php statement:

<?php

I am going to list the images by putting each in a <p> tag, but you can do anything, obviously.

I am using "foreach" here to loop, so start your loop thus:

foreach($page->image_field as $image) {

So, that has called the field/array - $page->image_field (or whatever your image field is called) - and is looping each image in the array as a variable called $image.

Now to create the thumbnails. These will be created and cached automatically - clever little PW!

$thumbnail = $image->size(150,100);

That has resized the image stored in $image, cropped it to fit the new size and shape and stored it in a variable called $thumbnail.

Now, use $image in some basic markup. I will create a simple link to the main image and display the thumbnail. Notice, that the API allows me to use things like "url" and "description" on our variables in the same way as can be done with a normal single image.

echo "<p><a href='{$image->url}'><img src='{$thumbnail->url}' alt='{$thumbnail->description}' ></a></p>";

Finally, close the loop and end the php statement.

} ?>

And that is it. To make it clear, here is the entire code in one go:

<?php

foreach($page->image_field as $image) {
   $thumbnail = $image->size(150,100);
   echo "<p><a href='{$image->url}'><img src='{$thumbnail->url}' alt='{$thumbnail->description}' ></a></p>";
}

?>

And that is it - Gallery created!

Coming soon, I will have some more fun with it - but to be honest, what I have done above should just about cover what you will need most often.


  1. Galleries - Short and long
  2. 1. The Shortest Gallery Tutorial In The World