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.

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>";
print_r(array_keys($picinfo));
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:

if(isset($picinfo['APP13']))
	{ $iptc = iptcparse($picinfo['APP13']);
    print_r($iptc);
}

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:

if(isset($picinfo['APP13']))
{
$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.)

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