So far our PHP gallery examples have required us to write new HTML code in order to present an image in the gallery, or at least the thumbnail thereof. This means that every time that we upload a new image to the site, we would have to write more HTML to add it to our page.

But our random image lesson showed that we can read images from a directory… so it follows that we should be able to automate the entire process of presenting a gallery of images with PHP.

Let’s take the core of the random image code:

1. <?php $imagedir = dir('assets/images');
2. $count = 1;
3. $pattern="/\.(gif|jpg|jpeg|png)$/";
4. while(($file = $imagedir->read())) {
5. if (preg_match($pattern, $file)) {
6. $imagearray[$count] = $file;
7. $count++; }
8. } ?>

This creates our array as before. But this time, we’re not getting a random image from $imagearray, but the first image. Doing that alone would be easy:

1. <img src="assets/images/<?php echo $imagearray[1]; ?>" alt=”” title=”” />

We want to make what selects the image a variable, so let’s create one called $pic and set it to a default value of 1 if no value for it exists:

1. <?php if (!$pic) { $pic = 1; } ?>
2. <img src="assets/images/<?php echo $imagearray[$pic]; ?>" alt=”” title=”” />

Now we want to allow the user to change the value of $pic. The easiest way to do that is via clicking on a link which passes a GET variable back to the page. First, we’ll add a line of code to the section above:

1. <?php $pic = $_GET['pic'];
2. if (!$pic) { $pic = 1; } ?>
3. <img src="assets/images/<?php echo $imagearray[$pic]; ?>" alt=”” title=”” />

Then create our link, which will increment whatever value $pic has by 1:

1. <a href="?pic=<?php echo ($pic + 1); ?>">Next</a>

This will advance our images through the array with each click on the Next link. (As always, one of the easiest ways to understand this is to look at the source code delivered from the browser). There’s just one problem: we can keep clicking the Next button past the actual number of images we have.

To solve this, we’ll make the appearance of the Next button conditional:

1. <?php if ($pic < $count - 1) { ?>
2. <a href="?pic=<?php echo ($pic + 1); ?>">Next</a>
3. <?php } ?>