WordPress Gallery and EXIF

Written by Sarah from Stuff By Sarah on July 20, 2008

The release of WordPress 2.5 included a built in gallery feature. Nothing major by any means, but it gave you the option of using a simple gallery to display your photos. It also included the ability to pull the EXIF data from your photos. However, whilst the features are there, there’s not much information or tutorials on using them. Hopefully this post will give you a bit more information on how to get the most from this new feature.

Create the Gallery

You can create the gallery in a post or a page. If you want to create a collection of galleries then you need to decide whether you’re going to use a static Page as the page parent, and then for each gallery you create a child page. Alternatively, you can create a Gallery category and then each gallery is a post within this category. Either method is fine, but for this example I’ll assume you’re going the post route.

So, you’ve got your category called Gallery (or whatever you wish to call in). Create a new post, giving it a title as usual. You can add in some content too if you like. Then click on the ‘Add an Image’ button by Add media in the top right of the post area. A popup should appear allowing you to upload your photos. You can do them individually or several at a time (note you may need to change the file permissions on your wp-content/uploads folder for this to work). Once they’ve uploaded, click on the Gallery tab at the top of the box. You can then go through each photo by clicking the Show link, and give each photo a title, caption and description. Once you’re done, click Save all Changes. Then click ‘Insert Gallery into Post’.

Your post will now have the gallery shortcode placed where the cursor was - [gallery]. You can easily move this if necessary. The gallery shortcode can accept a few options/parameters:

columns: Specifies how many columns the gallery should span. The default is 3.
size: Controls which size to display on the gallery page. The default is thumbnail, the options are thumbnail, medium and full.

Other options can be read about on the Gallery Shortcode codex page. To use these options you add them into the gallery shortcode eg.

[gallery columns="2" size="medium"]


Once you save this post and view it you should see the selected size photo for each photo uploaded, laid out in a simple gallery format, with the caption below each image. Clicking on the image opens up the medium version of the image and displays the image title above the image and the description given below it. This single image display page uses the single.php theme file. You can also use image.php or application.php, however I found the image disappeared with these!
To control the size of the thumbnail and medium size images go to Settings -> Miscellaneous in the WordPress Admin and change the values for the images there.
The EXIF Data
When you upload your photos the EXIF data is stored in the post meta data table. Information on how to extract this and display it is very thin on the ground, so if there’s a better method feel free to leave a comment, however the following works and should be futureproof.
To extract the complete field into a variable (which will then store as an associative, multi dimensional array) we use the following line of code within the loop (ideally perhaps after the_content() tag)

$imgmeta = wp_get_attachment_metadata( $id );

The $id is the attachment ID and is created by the loop so this is already set. There is a variety of data that you can then echo out:

$imgmeta['width']: The width of the original photo uploaded.
$imgmeta['height']: The height of the original photo uploaded.
$imgmeta['image_meta']['aperture']: The aperture used.
$imgmeta['image_meta']['credit']: The person credited for taking the photo.
$imgmeta['image_meta']['camera']: The camera used.
$imgmeta['image_meta']['created_timestamp']: The timestamp of when the photo was taken.
$imgmeta['image_meta']['copyright']: The copyright on the photo.
$imgmeta['image_meta']['focal_length']: The focal length used in mm.
$imgmeta['image_meta']['iso']: The ISO used
$imgmeta['image_meta']['shutter_speed']: The shutter speed used in seconds.
$imgmeta['image_meta']['title']: The title given to the photo.
$imgmeta['image_meta']['caption']: The caption given to the photo.

Some of this data will not be available without it being added via a program such as Photoshop. Other additional data may be available depending on your camera’s settings (I’ll continue to add to this list as I find more details available).

So we can take what we want from this data and display it with the photo. A couple of items will need formatting, for example the timestamp is in seconds so we need to convert it to a normal date and time using PHP, and the shutter speed will need rounding off to a couple of decimal places. We also only want this displayed if we’re displaying an image. So a final list could look like

< ?php
if (is_attachment()) :
	$imgmeta = wp_get_attachment_metadata( $id );
	echo "<ul>\n";
	echo "<li>Dimensions: " . $imgmeta['width']." x ".$meta['height']."</li>\n";
	echo "<li>Aperture: f/" . $imgmeta['image_meta']['aperture']."</li>\n";
	echo "<li>Camera: " . $imgmeta['image_meta']['camera']."</li>\n";
	echo "<li>Date Taken: " . date("d-m-Y H:i", $imgmeta['image_meta']['created_timestamp'])."</li>\n";
	echo "<li>Copyright: " . $imgmeta['image_meta']['copyright']."</li>\n";
	echo "<li>Focal Length: " . $imgmeta['image_meta']['focal_length']."mm</li>\n";
	echo "<li>ISO: " . $imgmeta['image_meta']['iso']."</li>\n";
	echo "<li>Shutter Speed: " . number_format($imgmeta['image_meta']['shutter_speed'],2)." seconds</li>\n";
	echo "";
endif;
?>

For US format for the timestamp use the following:

echo "<li>Date Taken: " . date("m-d-Y H:i", $imgmeta['image_meta']['created_timestamp'])."</li>\n";

For more options for this see the PHP Date reference.

Conclusion

This new feature should allow you to use WordPress as a standalone photo gallery or as part of a bigger site, without the need for plugins. Of course the various photo gallery plugins out there will give you a lot more options, but with a bit of thought, this gallery can be quite powerful. Using the post method means your galleries index is automatically updated with the latest gallery at the top, just like a usual blog category and blog post format.

The best (and really only) use I’ve seen of this new feature is from Matt Mullenweg’s Gallery. Whether he’s manually put in the photo count, used a bit of PHP to query the number of images in the gallery (perhaps there’s a template tag for that which I’ve not come across yet?), or it’s a potential future feature, who knows. But it’s a nice use and goes to show the potential for what this gallery has.

(Code not working? Be sure to remove the additional space between the <? and php. It’s added by the code plugin unfortunately)

Written by Sarah from Stuff By Sarah on July 20, 2008 | Filed Under WordPress Coding & Design

42 Responses so far | Have Your Say!

Dean Saliba | July 20th, 2008 at 12:55 pm #

Thank you, I have found this very helpful in setting up the gallery on my blog.
Richard Bui | July 20th, 2008 at 2:52 pm #

Thanks for the info on how to display the EXIF, you are right, there is no documentation existent anywhere!

As far as image.php, you need to put this in there for the image to display:

ID); ?>”><?php echo wp_get_attachment_image( $post->ID, ‘medium’ ); ?>
<?php if ( !empty($post->post_excerpt) ) the_excerpt(); // this is the “caption” ?>

Also you can use this to navigate with thumbnails for galleries:

<?php previous_image_link() ?> & <?php next_image_link() ?>

Here’s an example on my website: http://bui4ever.com/blog/2008/07/16/national-geographic-2477-bag-review.php/20080715-national-geographic-2477-003
Richard Bui | July 20th, 2008 at 2:53 pm #

Sorry, my code got crunched:

ID); ?>”><?php echo wp_get_attachment_image( $post->ID, ‘medium’ ); ?>
<?php if ( !empty($post->post_excerpt) ) the_excerpt(); // this is the “caption” ?>
Richard Bui | July 20th, 2008 at 2:54 pm #

Grrr, sorry:

<p class="attachment"><a href="<?php echo wp_get_attachment_url($post->ID); ?>"><?php echo wp_get_attachment_image( $post->ID, 'medium' ); ?></a>
<div class="caption"><?php if ( !empty($post->post_excerpt) ) the_excerpt(); // this is the "caption" ?>
Michael | July 20th, 2008 at 3:30 pm #

Very useful information, thank you!
Sarah (Post Author) | July 20th, 2008 at 4:07 pm #

Dean and Michael, you’re welcome.

Richard, cheers for the code. I’ll try adding that in when I finally get around to setting up my photo blog. I’m still confused as to why image.php should require extra code though as saving single.php as image.php doesn’t work, yet image.php is still clearly being used for the output template, the image just doesn’t display.

However I think the reason documentation is thin on the ground is simply because it’s still in its infancy and doesn’t always work. But I could be wrong, maybe no one’s got around to writing it yet?
Richard Bui | July 21st, 2008 at 12:28 am #

Sarah,

Not sure why copying and pasting contents of single.php to image.php doesn’t work, but I’m definitely glad they give you a template to allows for further customizations.

My problem right now is that for some reason when I upload images via the media button, it won’t import all my EXIF data. I’m 100% sure that the EXIF data is intact because I’ve checked on all my images.
Sarah (Post Author) | July 21st, 2008 at 3:33 am #

If you’re comfortable looking at the seralized data in the table, then if you go into something like phpMyAdmin, open up the post meta table and look for one of the meta keys - _wp_attachment_metadata. This will then relate to one of the photos. In there is the exif data. You’ll see the title that you’d need to use to call the data out eg. ‘aperture’ and then the value comes after it. Maybe your photos have differently named meta? I’m not 100% clued up on EXIF. I only learned what it was less than a year ago!

Otherwise, if it appears like it’s not extracting it, double check the photo has the EXIF in it, for example by uploading it to Flickr (if you have an account) or opening it up in a decent image program and checking in there. I use Irfanview and have the EXIF plugin installed, all of which is free. If the EXIF is still there then this could be one of the issues I seemed to read about where people were saying it seemed a bit flakey.
Richard Bui | July 21st, 2008 at 9:31 am #

Sarah,

That was the first thing I did was check the database. It’s not there. At the point where the photos are uploaded, camera, aperture, and shutter are cut from the EXIF. Copyright, date, and everything else works. I’ve used photos that I’ve uploaded to Flickr and they have EXIF data just fine. I’m not sure if maybe my upgrade to MU 2.6 had a corrupt file or not.
Codrut Turcanu I Remarkable Blogging dot Com | July 22nd, 2008 at 2:39 am #

Very informative post Sarah!

It’s a great feature as we can use WordPress as a standalone photo gallery.
Elaine | July 29th, 2008 at 6:49 am #

ok, i plugged in the above code, and you can go look at my gallery if you like… i don’t want to keep it that way for long tho. thnx!!
Sarah (Post Author) | July 29th, 2008 at 6:56 am #

Hi Elaine. Just took a look at your gallery and the additional space is in there. If you change the first line of the EXIF code from

< ?php if (is_attachment()) : $imgmeta = wp_get_attachment_metadata( $id );

to

<?php if (is_attachment()) : $imgmeta = wp_get_attachment_metadata( $id );

It should be fine As I mentioned, it’s an annoying side effect with the plugin that a space is inserted in the middle of the opening PHP tag, which prevents all the code from being parsed on the server. Trouble is the code tags are not great for outputting code as there’s no colouring, line numbering or indentation. I’ve now added a comment about this to the bottom of my posts.

Anyway, hope that fixes your problem. Let me know if it doesn’t
Elaine | July 29th, 2008 at 6:57 am #

ok, chagrin, i removed the extra space in the php statement and now it works fine lol my bad, sorry for bothering you, and thanks
Sarah (Post Author) | July 29th, 2008 at 7:07 am #

No problem Elaine. Glad to hear it’s working for you
slee | July 31st, 2008 at 3:42 am #

Great post it was a bit odd that they implemented the gallery yet didnt actually post how to use it.

i was wondering how easy would it be to hook this up with lighbox is any of the javascript scripts?
Sarah (Post Author) | July 31st, 2008 at 3:51 am #

Cheers Lee. I think they’ve not documented yet because either they don’t have time and no one else has got that far yet, or because there are still a few issues to iron out. I’m not 100% sure but I’ve not found any problems myself yet.

As for using lightbox, depends which point you want to use it on. I’m guessing the gallery where it displays all the photos? Maybe with a bit of JS trickery but I’d have to look at that and get back to you! On the individual pages it’d be easy by editing the template explained in theming your WP gallery.
Richard Bui | August 3rd, 2008 at 2:12 am #

OK, so now that I figured out my EXIF display issues…does anyone know how to display the shutter speed as a fraction rather than decimal?
Sarah (Post Author) | August 3rd, 2008 at 5:31 am #

Richard, you’ll need to do a search for a php function to convert decimals to fractions. I did take a quick look myself for this but haven’t gone further with it yet.
archshrk | August 7th, 2008 at 7:41 pm #

Thanks for this great post. I found it because I wanted to link back to the parent post but found a whole lot more. Still needs tweaking but it’s close to what I want. Any improvements you recommend are welcome.
Grant H | August 8th, 2008 at 12:26 pm #

What a fantastic find! I applaud you, I’ll be using this extensively on my photoBlog. Really indispensable stuff, thanks again.
SarahG | August 8th, 2008 at 1:40 pm #

You’re welcome Grant. I look forward to seeing your photoBlog
archshrk | August 11th, 2008 at 5:17 pm #

I’m wondering how to modify the EXIF output so that blank items are not listed. For example, some images I use don’t have the camera info while others do. How would I format the code so that only the info I have is shown?
archshrk | August 11th, 2008 at 7:12 pm #

BTW - I think there is a problem with some of the data output. I’m pretty sure my images weren’t all taken on 31/12/1969 19:00. Anyone else notice this?
Sarah (Post Author) | August 12th, 2008 at 2:43 am #

archshrk, to answer your first question. You can use the if (!empty()) PHP code (if not empty), so

if (!empty($imgmeta['image_meta']['aperture'])) echo "Aperture: f/" . $imgmeta['image_meta']['aperture']."\n";

This needs to go before each line and the value that’s checked of course relates to the value that’s being echoed.

With regards to your second question about the date, The date you’re getting is behind time as far as the timestamp is concerned (as the timestamp is measured as the number of seconds since 1st January 1970), so my guess is your camera has not been set up with a time and it’s just assigning 00/00/0000 as the date. Check your camera settings. If the date is set and correct then upload one of the photos that you’re using, via FTP, to somewhere on your server and leave a link to it here then I can check the EXIF and tell you what it currently says.
YouON | August 18th, 2008 at 3:04 pm #

it doesnt work to me :(((

http://youon.it/demo/wordpress/attualita-politica/prova-exif/

i’ve verified the EXIF data is correctly stored in db.

<?php if (is_attachment()) : $imgmeta = wp_get_attachment_metadata( $id ); echo "\n"; echo "Dimensions: " . $imgmeta['width'].” x “.$meta['height'].”\n”; echo “Aperture: f/” . $imgmeta['image_meta']['aperture'].”\n”; echo “Camera: ” . $imgmeta['image_meta']['camera'].”\n”; echo “Date Taken: ” . date(”d-m-Y H:i”, $imgmeta['image_meta']['created_timestamp']).”\n”; echo “Copyright: ” . $imgmeta['image_meta']['copyright'].”\n”; echo “Focal Length: ” . $imgmeta['image_meta']['focal_length'].”mm\n”; echo “ISO: ” . $imgmeta['image_meta']['iso'].”\n”; echo “Shutter Speed: ” . number_format($imgmeta['image_meta']['shutter_speed'],2).” seconds\n”; echo “”; endif; ?>
Sarah (Post Author) | August 18th, 2008 at 3:15 pm #

Looking at your page you’ve added the photo in to a post. The code above will only display the EXIF data when you view the image via the gallery, not when you insert an image into a post. For that to work you’d either have to know the specific ID of the image and use the get_posts() code in the final post of this series, or if there is only one photo per post uploaded, then in the final post of this series you can get the code to get the attachment data for the post ID.

Look under ‘Retrieve a Photo’ on Mixing Gallery and Blog Posts, but remove the ‘orderby’ parameter, as you would only be pulling out one photo. Then use the $attachment->ID in the code you’ve posted above (without the if is attachment statement) in the wp_get_attachment_metadata() function.

So you’d use get_posts() to get the attachment ID, then pass that to the wp_get_attachment_metadata() function to then get the meta data.

I hope that all makes sense.
YouON | August 19th, 2008 at 12:54 am #

ok Sarah, really thanks for your patience.

with the gallery method works perfectly, now i’m gonna study the other method you show me

thanks again, Alessio
Jack R | August 20th, 2008 at 10:36 am #

Hi, Thanks for the tutorial. Would you know of a way that I can include “Star Ratings” for each picture. Assuming I use any of those ratings plugins.

-jack
Sarah (Post Author) | August 20th, 2008 at 4:36 pm #

Hi Jack. I don’t know about WordPress plugins for ratings, but I know the AJAX star rating script would work fine with this. Just use the attachment ID in the script for each rating.
Andrew | August 30th, 2008 at 8:23 am #

Thanks for the code Sarah.
I figured out the code to display the shutter-speed as a fraction and its now posted on my blog
here.
-Andrew
Tyler @ Building Camelot | September 16th, 2008 at 12:18 pm #

Thank you Sarah! This was a big help once I realized I needed to turn on the visual editor. Off to go use this in my next post. Have a good one
Hannes | September 23rd, 2008 at 5:14 pm #

Thanks - I wanted to display the EXIF info like Matt and this was exactly the info I needed

But it looks like you’re missing </ul> from your code example.
Sarah (Post Author) | September 24th, 2008 at 2:29 am #

Hannes - annoyingly the code plugin tends to remove some of the code at times. Line 13 is where it should have been in the last but one code block. I’ll try editing the code and making it ‘appear’.
Shane | September 30th, 2008 at 1:04 am #

Where exactly do you check to see that the EXIF data is being pulled and stored in the db? I’m obviously having some problems because mine are all coming up as 0’s w/ a date taken as 1969. Yet if I download the full size version and view the file info in PhotoShop, the EXIF data is still intact to the file.

Any help is greatly appreciated!
Sarah (Post Author) | September 30th, 2008 at 2:29 am #

Shane - The EXIF should be in the post_meta table. Find out the post ID of the image from the posts table, and then find the corresponding record in the post_meta for that image. The data is serialised however it should be easy enough to read.

It sounds like it’s not extracting it though. For the extraction to work, your server will need the exif extension added/activated so you may need to check in the phpinfo() to see if Exif is installed, and if not contact your host and see if they’ll enable it for you.
Shane | September 30th, 2008 at 8:03 am #

Thank you Sarah for the reply!

Turns out that it is not extracting it. Would you happen to know of any plugin or whatnot that could get it to extract the data from already uploaded images?

I’ve already done a few posts with hundreds of pictures to post. I wish I had checked this before because I had planned on displaying all of this data.
Sarah (Post Author) | October 1st, 2008 at 4:23 am #

Hi Shane, I’ve had a brief look around and I think the only way to do what you need would be to use a custom script that would loop through each photo and extract the EXIF for you. I can’t see a plugin doing the job you need, however have a search around for online photo EXIF extraction and you may find a prewritten function to alter to suit the WordPress db.