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 or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my projects

CSSslidy: an auto-generated #RWD image slider. 3.8K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

Captioning of Portfolio Images With GET

php / images

Estimated reading time: 1 minute, 16 seconds

Masai Mara Captioned Image GalleryGET 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>
<li>
<a href="?img=masai-mara.jpg&amp;caption=Lone tree in Masai Mara Park, Kenya">
<img src="masai-mara-thumbnail.jpg" alt="" >
</a>
 
</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:

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

<figure>
<img src="<?=$img?>" alt="<?=$caption?>" >
<figcaption><?=$caption?></figcaption>
</figure>

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.

comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.