In this post I will talk about how to display EXIF data for an image in a WordPress post or native gallery.
In order to do this you need to modify your sites theme.
First start by adding the below function to your themes function.php file.
[sourcecode rel="php"]
/*********************************************************************************
Using WordPress functions to retrieve the extracted EXIF
information from database
*/
function mdr_exif() { ?>
<div id="exif">
<h3 class=’comment-title exif-title’>< ?php _e(‘Images EXIF Data’, ‘millytheme’); ?></h3>
<div id="exif-data">
< ?php
$imgmeta = wp_get_attachment_metadata( $id );
// Convert the shutter speed retrieve from database to fraction
$image_shutter_speed = $imgmeta['image_meta']['shutter_speed'];
if ($image_shutter_speed > 0) {
if ((1 / $image_shutter_speed) > 1) {
if ((number_format((1 / $image_shutter_speed), 1)) == 1.3
or number_format((1 / $image_shutter_speed), 1) == 1.5
or number_format((1 / $image_shutter_speed), 1) == 1.6
or number_format((1 / $image_shutter_speed), 1) == 2.5){
$pshutter = "1/" . number_format((1 / $image_shutter_speed), 1, ‘.’, ”) ." ".__(‘second’, ‘millytheme’);
} else {
$pshutter = "1/" . number_format((1 / $image_shutter_speed), 0, ‘.’, ”) ." ".__(‘second’, ‘millytheme’);
}
} else {
$pshutter = $image_shutter_speed ." ".__(‘seconds’, ‘millytheme’);
}
}
// Start to display EXIF and IPTC data of digital photograph
echo "<p>" . date("d-M-Y H:i:s", $imgmeta['image_meta']['created_timestamp'])."</p>";
echo "<p>" . $imgmeta['image_meta']['camera']."</p>";
echo "<p>" . $imgmeta['image_meta']['focal_length']."mm</p>";
echo "<p>f/" . $imgmeta['image_meta']['aperture']."</p>";
echo "<p>" . $imgmeta['image_meta']['iso']."</p>";
echo "<p>" . $pshutter . "</p>"
?>
</div>
<div id="exif-lable">
< ?php // EXIF Titles
echo "<p><span>".__(‘Date Taken:’, ‘millytheme’)."</span>";
echo "<p><span>".__(‘Camera:’, ‘millytheme’)."</span>";
echo "</p><p><span>".__(‘Focal Length:’, ‘millytheme’)."</span>";
echo "</p><p><span>".__(‘Aperture:’, ‘millytheme’)."</span>";
echo "</p><p><span>".__(‘ISO:’, ‘millytheme’)."</span>";
echo "</p><p><span>".__(‘Shutter Speed:’, ‘millytheme’)."</span>"; ?>
</p></div>
</div>
< ?php }[/sourcecode]
Then add the following to your style.css
[sourcecode lang="css"]
/*EXIF table*/
#exif { overflow: hidden; margin: 0; padding: 0 10px 0 0; }
#exif-lable { margin: 0 0 0 15px; width: 125px; }
#exif-lable p { margin: 0; }
#exif-lable span { font-weight:bold; }
#exif-data { overflow: hidden; margin: 0; float: right; width: 540px; }
#exif-data p { margin: 0 10px; }
[/sourcecode]
And lastly you need to add the function you created above to your image.php file. This may be the most difficult part. Depending on your theme, you need to find a space for the EXIF table to live on the image page. You will also need to play with the style.css entry you added to make it look correctly on your site.
Thanks for this, could you explain what to add to the image page as well?
It all depends what you would like to do. Check out https://github.com/mattrude/wp-theme-milly for an example from http://mattrude.com