demosthenes.info

A blog by Dudley Storey on , , , , , , and anything else that strikes his fancy.

featured articles

popular favourites

Captioning of Portfolio Images With GET

Masai Mara Captioned Image GalleryGET 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):

  1. <ul id=thumbnails">
  2. <li>
  3. <a href="?img=masai-mara.jpg&amp;caption=Lone tree in Masai Mara Park, Kenya">
  4. <img src="masai-mara-thumbnail.jpg" alt="" title="" />
  5. </a>
  6. </li>
  7. .. more linked thumbnail images ..
  8. </ul>

(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:

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

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 for the purposes of illustration:

  1. <figure>
  2. <img src="<?=$img?>" alt="<?=$caption?>" title="<?=$caption?>" />
  3. <figcaption><?=$caption?></figcaption>
  4. </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.

web developer guide

featured comment

by JoelB in Goodbye, JQuery Validation: HTML5 Form Errors With CSS3

what i'm reading

A Storm of Swords: A Song of Ice and Fire: Book Three
A Storm of Swords: A Song of Ice and Fire: Book Three

what i'm watching

Californication: The Third Season
Californication: The Third Season

what i'm playing

Mass Effect 3 Collector's Edition
Mass Effect 3 Collector's Edition

what i'm hearing

Dub FX
Dub FX

blogs

podcasts

no ads ever

This blog is free of advertising, and always will be.

creative commons licensed

The content of this blog is free to use in whatever way you wish under the Creative Commons license.