Masai Mara Captioned Image Gallery

GET is the simplest method with which to caption images in a . The technique expands upon the simple PHP gallery, with the difference that you will create two variables: one for the large image filename, and another for its caption. So the links change to look like this (note that I’m using PHP syntax shortcuts for the echo function, and leaving the alt value for the thumbnail blank for the sake of simplicity):

<ul id="thumbnails">
		<a href="?img=masai-mara.jpg&amp;caption=Lone tree in Masai Mara Park, Kenya">
			<img src="masai-mara-thumbnail.jpg" alt >
<!-- more linked thumbnail images -->

(Also note the use of the ampersand between the variables, encoded as an HTML entity to pass validation).

The rest of our PHP code becomes:

<?php $img = $_GET['img'];
$caption = $_GET['caption’];
if (!$img) { $img = "masai-mara.jpg"; }
if (!$caption) { $caption = "Lone tree in Masai Mara Park, Kenya"; }

Below all of this would be the full-size image:

	<img src="<?=$img?>" alt="<?=$caption?>" >

While this works, there are three disadvantages to the method:

  • It creates a rather long and ugly URL
  • The technique requires quite a bit of extra typing to create the caption
  • It cannot be used with the Automatic PHP portfolio method.

As such, the method doesn’t offer many advantages over the Simple CSS Gallery technique. To eliminate those issues and gain more efficiency, you need a different method: one that uses either the image’s filename or metadata to create the caption.

Creative Commons licensed photographs by John Schinker.

Enjoy this piece? I invite you to follow me at to learn more.