GET is the simplest method with which to caption images in a portfolio or gallery. The technique expands upon the earlier method I showed of creating a simple PHP gallery, with the difference being that we create two variables (one for the large image filename, and another for its caption) rather than one. So our links change to look like this (note that I’m using PHP syntax shortcuts for the echo function, and leaving the alt and title values for the thumbnail empty for the sake of simplicity):
- <ul id=thumbnails">
- <li>
- <a href="?img=masai-mara.jpg&caption=Lone tree in Masai Mara Park, Kenya">
- <img src="masai-mara-thumbnail.jpg" alt="" title="" />
- </a>
- </li>
- .. more linked thumbnail images ..
- </ul>
(Also note the use of the ampersand between the variables, encoded as anHTML 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. (For this example, I’m using Creative Commons licensed photographs by John Schinker.) I'll create the image and caption in HTML5 for the purposes of illustration:
- <figure>
- <img src="<?=$img?>" alt="<?=$caption?>" title="<?=$caption?>" />
- <figcaption>
<?=$caption?></figcaption> - </figure>
While this works, there are three disadvantages to the method: it creates a rather long and ugly URL, it requires quite a bit of extra typing to create the caption, and the technique cannot be used with the Automatic PHP portfolio method. As such, it doesn’t offer many advantages over the Simple CSS Gallery technique. To eliminate those issues and gain more efficiency, we’ll need a different method: one that uses either the image’s filename or metadata to create the caption.