demosthenes.info

I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter.

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.

You must be signed up in order to leave comments.

web developer guide

featured comment

by Aisling Brock in New Business Card Design

what i'm reading

A Feast for Crows: A Song of Ice and Fire: Book Four
A Feast for Crows: A Song of Ice and Fire: Book Four

what i'm watching

Prometheus: Collector's Edition (Bilingual) [Blu-ray 3D + Blu-ray + DVD + Digital Copy]
Prometheus: Collector's Edition (Bilingual) [Blu-ray 3D + Blu-ray + DVD + Digital Copy]

what i'm playing

Borderlands
Borderlands

what i'm hearing

Planets
Planets

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.