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

A Sass color keyword system for designers. Replaces CSS defaults with improved hues and more memorable, relevant color names.

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.

Lighthouse in Spain

Automatic HTML5 Image Captioning With metadata and PHP

php / images

Estimated reading time: 2 minutes

To gain access to image metadata, you must load the file 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:

<?php $picinfo = array();
getimagesize('lighthouse_spain.jpg', $picinfo);
echo "<pre>";
echo "</pre>"; ?>

The result of our print_r will be somewhat obfuscated:

Array (
	[0] => APP1
	[1] => APP12
	[2] => APP13
	[3] => APP14

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:

	{ $iptc = iptcparse($picinfo['APP13']);

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

Array (
[2#105] => Array
   ([0] => Lighthouse at dusk in Asturias, Spain)
[2#080] => Array
   ([0] => René González) 
[2#055] => Array
   ([0] => 20111016)
[2#090] => Array
   ([0] => Asturias) 
[2#101] => Array
   ([0] => Spain)

This matches the metadata 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:

$iptc = iptcparse($picinfo["APP13"]);
 if (is_array($iptc)) { 
	$description = $iptc['2#105'][0];
   	$time = $iptc['2#055'][0];
   	$year = substr($time, 0, 4);
	$month = substr($time, 4, 2);
 	$day = substr($time, -2);
 	$datetaken = date('l F jS Y', mktime(0, 0, 0, $month, $day, $year));
 	$city = $iptc["2#090"][0];
 	$country = $iptc["2#101"][0];
 	$creator = $iptc["2#080"][0];

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.)

<img src="<?=$image?>px;" alt="<?=$description?>" >
<?=$description?>. Taken by <?=$creator?> on <?=$datetaken?>
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.