demosthenes.info

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

featured articles

popular favourites

Automatic HTML5 Image Captioning With metadata and PHP

To gain access to image metadata, you must first load the image with a server-side language. You can dynamically load the image in any way you please, including the methods I’ve shown in the past: the only condition is that PHP must be able to address the image file. Here, to make things clearer, I’ll use the image’s filename directly, rather than using a variable.

From PHP’s perspective, IPTC metatags are secreted in the getimagesize function. To make this information visible, we’ll create an array, fill it with getimagesize data, and then use print_r to make the keys of the array visible (I’ll wrap the print_r in a <pre> to format the array in a more presentable fashion:

  1. <?php $picinfo = array();
  2. getimagesize('lighthouse_spain.jpg', $picinfo);
  3. echo "<pre>";
  4. print_r(array_keys($picinfo));
  5. echo "</pre>"; ?>

The result of our print_r will be somewhat obfuscated:

  1. Array (
  2. [0] => APP1
  3. [1] => APP12
  4. [2] => APP13
  5. [3] => APP14
  6. )

What you need to know is that the ITPC information lies within that third slot. “APP13” is an array unto itself; we could see its contents by using the itpcparse function, and then printing the results out:

  1. if(isset($picinfo['APP13']))
  2. { $iptc = iptcparse($picinfo['APP13']);
  3.     print_r($iptc);
  4. }

Now we’re getting somewhere. I’ll show just the relevant parts of the array:

  1. Array (
  2. [2#105] => Array
  3.    ([0] => Lighthouse at dusk in Asturias, Spain)
  4. [2#080] => Array
  5.    ([0] => René González) 
  6. [2#055] => Array
  7.    ([0] => 20111016)
  8. [2#090] => Array
  9.    ([0] => Asturias) 
  10. [2#101] => Array
  11.    ([0] => Spain)
  12. )

This matches the information that we entered into the image in PhotoShop. Now we just need some PHP to extract it and put the results into variables, with a little help from the substr, date, and mktime functions:

  1. if(isset($picinfo['APP13']))
  2. {
  3. $iptc = iptcparse($picinfo["APP13"]);
  4.  if (is_array($iptc)) {
  5. $description = $iptc['2#105'][0];
  6.     $time = $iptc['2#055'][0];
  7.     $year = substr($time, 0, 4);
  8. $month = substr($time, 4, 2);
  9. $day = substr($time, -2);
  10. $datetaken = date('l F jS Y', mktime(0, 0, 0, $month, $day, $year));
  11. $city = $iptc["2#090"][0];
  12. $country = $iptc["2#101"][0];
  13. $creator = $iptc["2#080"][0];
  14. }

Now we can caption any image read this way with the following information. (Here I’ve gone back to assuming we can address the image itself with a variable.)

  1. <figure>
  2. <img src="<?=$image?>px;" alt="<?=$description?>" title="<?=$description?>" />
  3. <figcaption>
  4. <?=$description?>. Taken by <?=$creator?> on <?=$datetaken?>
  5. </figcaption>
  6. </figure>

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.