I’ve shown how to make galleries using only HTML and CSS in the past. While you can create a spectacular gallery page using just those technologies, the amount of code required is quite high, and grows linearly with the number of images.
We can use PHP to address each of these issues. We won't use CSS for the sake of simplicity and clarity, but there is nothing to prevent you from adding as many presentation rules as you like (see the end of this article for an example.
To understand the central concept of what we’re about to do, it make help to take a form.html and formhandler.php page (as I developed in a previous article) and make a single change to the form tag on the first page:
<form action="formhandler.php" method="get">Go ahead and submit the form as before. You should see that formhandler.php does not display the form information in the body, but now in the URL resembles something like the following:
http://localhost:8888/formhandler.php?firstname=Dudley&lastname=Storey
The GET method places the information from the form in the URL. This is inherently insecure, and for that reason the method is rarely used with forms… but we can use a variation on the technique to create a gallery. The important thing is the format used: there is a question mark after the page name, then the name of the first variable and what its value is, an ampersand, and the second variable and its value.
For this simple gallery exercise, you’ll need several thumbnail images that are approximately the same size, along with full-size versions of the same images. We’ll start as if we were making an HTML page with standard markup: create a page called gallery.php and add markup like the following:
<ul>
<li><a href="#">
<img src="landscape1_thumb.jpg" alt>
</a>
<li>
<a href="#">
<img src="landscape2_thumb.jpg" alt>
</a>
<li>
<a href="#">
<img src="landscape3_thumb.jpg" alt>
</a>
</ul>
<figure>
<img src="landscape1_large.jpg" alt>
<figcaption>Caption</figcaption>
</figure>We want to use the links to inform PHP which “hero” image we wish to show. To do this, we’ll use a variation of the GET method. Let’s take the first link as an example:
<li><a href="gallery.php?img=landscape1_large.jpg">
<img src="landscape1_thumb.jpg" alt></a>Saving and uploading the page and clicking on the first thumbnail won’t produce any change in the body of the page, but you should see the URL being modified. Essentially we are looping back on gallery.php, passing a variable and its value when we do so. Because we are not moving to a new page, we can drop the filename in the link:
<li><a href="?img=landscape1_large.jpg">
<img src="landscape1_thumb.jpg" alt></a>Now go ahead and add information to the other links as well, specifying the appropriate filename as the value of the img variable in each link.
Next, we want to gain the value of the variable and use it in PHP. We used $_POST['name'] in our form example, and this gallery uses the GET method: how do you think we do that?
Let’s echo the variable to replace the name of the large static image. Note that we have to retain the path information: PHP knows the value of the variable, but not where the associated image is.
<figure>
<img src="<?php echo $_GET['img']; ?>" alt>
<figcaption>Caption</figcaption>
</figure>Uploading the page, you should find that clicking on the thumbnails now produces the associated large image. In addition, a user returning to this page from a bookmark will see the same large image that was present when they bookmarked the page, as doing so records the entire URL, including the GET information. Our code always reads the URL to determine which large image to show.
Right now, our caption doesn’t change. Let’s fix that by adding another variable to the URL. We have to be careful when doing so: adding a simple ampersand will render the HTML of our page invalid, so we must separate the variable/value pairs with an HTML entity equivalent instead:
<li>
<a href="?img=landscape1_large.jpg&caption=Landscape 1">
<img src="landscape1_thumb.jpg" alt>
</a>Now we have two variables, $_GET['img'] and $_GET['caption']. We can use the latter much as we did the former:
<figure>
<img src="<?php echo $_GET['img']; ?>" alt>
<figcaption>
<?php echo $_GET['caption']; ?>
</figcaption>
</figure>You can (and should) also use this caption variable for other purposes too: as the value for alt attribute for the large image, for example, or within the <title> of the page.
There is just one remaining issue. When the page is first loaded, neither $_GET['img'] nor $_GET['caption'] is set as a variable. Therefore, our page will come up without a large image very first time it is visited, and PHP will very likely produce an “unknown variable” error.
A better option would be to check to see if $_GET['img'] had been set, and if not, to set the variable to a default value: the large image we would prefer our first-time visitor to see. In addition, the variable names themselves are getting a little long to type. To solve both problems we will add the following code to the top of the page:
<?php if (!isset($_GET['img']) {
$img = "landscape1_large.jpg"; $caption="Landscape 1";
} else {
$img = $_GET['img'];
$caption = $_GET['caption'];
} ?>Referring back to the previous section on if conditional statements, these lines of code do three things: test if the $_GET['img'] variable exists, and if it does, create new, shorter variables that have the same values as the longer $_GET variables, making them easier to reference; if it does not, set both $img and $title to default values.
It is now required that we change the references to these variables later in the code:
<figure>
<img src="<?=$img?>" alt="<?=$caption?>">
<figcaption><?=$caption?>
</figcaption>(I’m using PHP shortcuts for the echo statements in this case).
We can now build up an entire gallery from this simple template: all we have to be careful about is that filename references we use in the links match real files uploaded to the correct location on our server. It shouldn’t surprise you that there’s an even more efficient way to do this, but before we get there we’ll take a step that will help us on the way: displaying random images.
Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.
