Last week, after I got my camera I started working to customize my photo galleries through the Wordpress gallery shortcode. Like everyone else who’s tried, my inspiration was the near perfect design of Ma.tt. One of my favorite features of his gallery is the inclusion of the EXIF profile for each photo on it’s attachment page.
For those who don’t know, EXIF is the exchangeable image file format used to encode details about a photo in the file itself. It records things like shutter speed, aperture, and camera model. Among other things, it can help others see how you achieved the shot, or record where you were (via GPS data, which you can add in Picasa).
I couldn’t get my fields to populate, and found out that there is a required server extension, php_exif, that was probably not enabled on my hosting server. I called my provider, sat on hold for 30 minutes, and got the rough word that it’s not allowed on my shared hosting plan. I’d have to shell out $25/month, or find another way.
I came across php library called Exifer, written by Jake Olefsky, and maintained at Zen Photo. It parses the EXIF data, turning the numerical keys in to strings, and placing them in a multilayer array.
This plugin uses the library to extract the data and displays it as an unordered list on the attachment page below the photo. When you create your gallery make sure you set it to link to “attachment page”. The plugin will automatically insert the code after the image, unless you are using an attachment.php or image.php template. And if your image has no EXIF data, nothing will display.
If you are using one of those templates, simply insert this after the image in your template file:
<?php ec_get_image_exif(); ?>
If you’d like to see the raw output, you can uncomment this in gallery-exif-reader.php (if using a template, place the function on the page):
add_filter('the_content', 'ec_exif_reader_debug', 1);
You can look at this output to see if there’s any other info you want to include, then add it in this form:
$output .= "<li><span class="\"exifTitle\"">Aperture</span> " . $exif_array['SubIFD']['ApertureValue'] . "</li>\n";
For template users:
echo "<li><span class="\"exifTitle\"">Aperture</span> " . $exif_array['SubIFD']['ApertureValue'] . "</li>\n";
You can style the output through the included css file. The date is set to display “mm.dd.yyyy”. You can adjust it by changing
$exif_date
to your preferred format. Check out PHP.net for usage.
Changelog:
** 0.9.3 (6/8/09) **
Added new function (ec_get_item_exif) which takes either the url of the full-sized image (including “http://”) or the attachment ID.
** 0.9.2 (4/7/09) **
By default the date will display in the format set in Settings > General.** 0.9.1b (3/29/09) **
Not all files were included in subversion-generated zip archive.** 0.9.1a (3/29/09) **
Repaired incorrect path to stylesheet.< **0.9.1 Bugfix (3/29/09)**
After editing Picasa strips “ApertureValue” from the data in favor of “FNumber”. WPG-ER now checks both.
Forced FNumber to round to 1 decimal.
Shooting date is now determined by “DateTimeOriginal”, rather than “DateTime”.
Download WP Gallery EXIF Reader (220).
baron
Works great, thank you
More from authorStephen
I have been playing around with this plugin, it’s probably going to be the one I use, except I didn’t like how the dates were formatted.
I want the dates to be formatted the same throughout the site so instead of repeating the format within the plugin I changed lines 53 and 102 to:
$exif_date = get_option('date_format');So now I can change the date format for everything in a single location.
More from authorCharles
Stephen -
Great idea, I’ll add it for the next revision. Thanks!
Bim
Hi there.
Great plugin but I just can’t seem to get it to work. I’ve installed the plugin but nothing more appears underneath all my images.
Sorry if I being a bit dumb. Your help will be great appreciated. Thank you
Bim
More from authorCharles
Bim,
I’m sure it’s something easily overlooked that just hasn’t presented itself yet.
Do you use an
attachment.phporimage.phpto display your single images? If so you’ll need to addto your template for the info too display.
If you’re not using one of those templates, post the code of you’re
single.phphere in the comments section and I’ll look through it.Jason
Having the same issue as Bim… love the concept of the EXIF display, will fill a nice spot in the page… here’s the relevant code from my
single.php<div id=”post-” class=”">
© pixelens photography
<?php wp_link_pages(‘before=’ .__(‘Pages:’, ’sandbox’) . ‘&after=’) ?>
/div>
Here’s the code of
the_post_image('large')– I’m pretty sure the issue lies somewhere between the two snippets of code!// Post Attachment image function. Direct link to file.
function the_post_image($size=thumbnail) {
global $post;
$linkedimgtag = get_post_meta ($post->ID, ‘image_tag’, true);
if ( $images = get_children(array(
‘post_parent’ => get_the_ID(),
‘post_type’ => ‘attachment’,
‘numberposts’ => 1,
‘post_mime_type’ => ‘image’,)))
{
foreach( $images as $image ) {
$attachmenturl=wp_get_attachment_url($image->ID);
$attachmentimage=wp_get_attachment_image( $image->ID, $size );
echo ”.$attachmentimage.”;
ec_get_attachment_exif($attachmentimage);
}
} elseif ( $linkedimgtag ) {
echo $linkedimgtag;
} elseif ( $linkedimgtag && $images = get_children(array(
‘post_parent’ => get_the_ID(),
‘post_type’ => ‘attachment’,
‘numberposts’ => 1,
‘post_mime_type’ => ‘image’,)))
{
foreach( $images as $image ) {
$attachmenturl=wp_get_attachment_url($image->ID);
$attachmentimage=wp_get_attachment_image( $image->ID, $size );
echo ”.$attachmentimage.”;
}
} else {
echo ”;
}
}
Thanks for the great plugin and thanks in advance for taking a look at the code… also, any quick and dirty way to make the exif appear next to the image bottom right?
More from authorCharles
Jason, I see the problem.
ec_get_attachment_exifandec_get_image_exifaren’t designed to take arguments, they’re set to use the post-ID. I’m working on a function that will take the image path as an argument.I’ll post it as soon as it’s tested.
Jason
Grrr… the pre tags didn’t work for the first bit of code:
<div id="post-" class="">
© pixelens photography
More from authorJason
Haha delete this and the previous one, basically single calls the the_post_image function…
More from authorJason
One last try, I think I spotted your trick
<div id=”post-” class=”">
© pixelens photography
More from authorJason
Charles, thanks for quick the response… I thought it was because when I try
More from authorec_get_attachment_exif();I get the error “Warning: Missing argument 1 for ec_get_attachement_exif in gallery-exif-reader.php on line 37″ – dunno if that helps at all.Charles
That’s because
ec_get_attachment_exif();has to be in the loop, and requiresthe_content();. I looked at your layout. Try usingec_get_image_exif();instead. I’m still working on a function that will take an argument.Jason
Thanks again Charles, tried using
More from authorec_get_image_exif();and it doesn’t return any exif at all… I know the images have exif unless the Wordpress uploader strips it somehow?Charles
The uploader doesn’t strip it, the resizer does. The function is designed to use the post ID to call the full size version and extract the data.
In the next couple of days I’ll have the function ready that can take the file URI as an argument.
Jason
Awesome – thanks!
More from authorElla
Hi…! This rocks. You rock. Thank you for sharing and helping people out. I send you a virtual beer
More from authorCharles
Thanks! Although I will have to decline…I think my job would be in jeopardy. How about a virtual Pepsi?
Charles
The new function is almost ready. Be looking for an update in the next few days.
Felix E. Drud
A very nice plugin. Or well it looks nice. I can’t get it to work.
I’m using the theme called Nishita (http://wordpress.org/extend/themes/nishita)
I can’t the the plugin to work. I have added “” to the page.php file:
Could you please help me?
More from authorCharles
Felix,
I’m sorry you’re having trouble. Can you do me a favor and use the <code> tags to show the php you’re using?
morten
Hi,
This would be great if the Exif information was displayed as a pop-up when mouse-over the photo. Thus the user will only see this information when pointing on it, and the information will not permanently use up space nor clutter the visual feel of the gallery.
I’m definitly in if this is implemented.
Morten
More from authorCharles
Morten,
It’s something I’ve thought about, and will probably add, but right now I’ve got a two-week old, and less than two weeks until my first full-time semester of grad school.
It’s something that could easily be added to an image.php file using the jQuery Tools tooltip function. Just put the
ec_get_image_exif();inside your tooltip div. I may add some sample code to this post soon.David
Great plugin! Thanks for putting it together.
Two questions:
1) I would like to use two rows as shown here, (roll over the image) http://www.davidkohlmeyer.com/Photography/test-1/ but how can I line up the titles and data so they are in columns? And how do I change the font color so it’s no longer grey?
2) How can I use the plugin variables like ExifImageWidth in my single.php to say if height > width, format like this, else format like this? I can handle the formating part but no idea how to write the if statement.
Thanks a lot!
Charles
David,
You can edit the styles by adding rules to your css file with more specificity than the included css. Basically add
bodybefore all of the tags (body ul#exifData, etc.)And you’d be much better off basing your styling on WP code. Using
wp_get_attachment_image_src();the resulting array holds the width and height in keys 1 and 2. A simple if statement would be$att_img = wp_get_attachment_image_src( $post->ID ); //width is [1] and height is [2] if ($att_img[2] >= $att_img[1]) { do stuff... } else { do other stuff... }ovidiu
one more suggestion: maybe display the data as an overlay? I am using this plugin so not using the attachment page: http://wordpress.org/extend/plugins/shutter-reloaded/
More from authorCharles
If you can work with jQuery, tryout one of the tooltip or overlay plugins and stick the php snippet inside. That will display it within the overlay, and you can style with CSS.
Michel777
unfortunatelly it doesn’t work. the generates no output.
Checked:
1) ec_get_image_exif put immediatelly after img
2) The img has EXIF Data (Camera Canon EOS 5D)
3) Either attachment.php nor image.php is using.
4) Versions: WP 2.8.4 , WP Gallery EXIF Reader 0.9.3 (enabled)
5) For Tracing ec_exif_reader_debug put here
6) For getting row data add_filteradd_filter(‘the_content’, ‘ec_exif_reader_debug’, 1); is uncommented.
7) Also calling doesn’t work
Any ideas ?