PureNews

PureNews is an amazingly sleek and powerful news theme with unlimited color variations.

View full feature list Check out the live demo Buy this theme today

WordPress Gallery and EXIF

Posted by on 20th Jul 2008 | 40 comments

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

[sourcecode language=”php”]< ?php
if (is_attachment()) :
$imgmeta = wp_get_attachment_metadata( $id );
echo "

    \n”;
    echo “
  • Dimensions: ” . $imgmeta[‘width’].” x “.$imgmeta[‘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;
    ?>[/sourcecode]

    For US format for the timestamp use the following:

    [sourcecode language=”php”]echo “

  • Date Taken: ” . date(“m-d-Y H:i”, $imgmeta[‘image_meta’][‘created_timestamp’]).”
  • \n”;[/sourcecode]

    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)


A PHP Developer using WordPress to power both blogging and commercial CMS sites. I've written and released a couple of plugins for WordPress and am currently writing plugins for use on commercial websites.

40 comments - Leave a reply
  • Posted by Dean Saliba on 20th Jul 2008

    Thank you, I have found this very helpful in setting up the gallery on my blog.

  • Posted by Richard Bui on 20th Jul 2008

    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:

    <code>

    <a>ID); ?>"><?php echo wp_get_attachment_image( $post->ID, 'medium' ); ?>

    <?php if ( !empty($post->post_excerpt) ) the_excerpt(); // this is the "caption" ?></code>

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

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

    Here's an example on my website: http://bui4ever.com/blog/2008/07/16/national-geog

  • Posted by Richard Bui on 20th Jul 2008

    Sorry, my code got crunched:

    <code><a>ID); ?>"><?php echo wp_get_attachment_image( $post->ID, 'medium' ); ?>

    <?php if ( !empty($post->post_excerpt) ) the_excerpt(); // this is the "caption" ?></code>

  • Posted by Richard Bui on 20th Jul 2008

    Grrr, sorry:

    <code><p class="attachment"><a href="<?php echo wp_get_attachment_url($post->ID); ?>"><?php echo wp_get_attachment_image( $post->ID, 'medium' ); ?>

    <div class="caption"><?php if ( !empty($post->post_excerpt) ) the_excerpt(); // this is the "caption" ?></code>

  • Posted by Michael on 20th Jul 2008

    Very useful information, thank you!

  • Posted by Sarah on 20th Jul 2008

    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?

  • Posted by Richard Bui on 20th Jul 2008

    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.

  • Posted by Sarah on 20th Jul 2008

    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.

  • Posted by Richard Bui on 21st Jul 2008

    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.

  • Posted by Codrut Turcanu I Rem on 21st Jul 2008

    Very informative post Sarah!

    It's a great feature as we can use WordPress as a standalone photo gallery.

  • Posted by Elaine on 29th Jul 2008

    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!!

  • Posted by Sarah on 29th Jul 2008

    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

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

    to

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

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

  • Posted by Elaine on 29th Jul 2008

    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

  • Posted by Sarah on 29th Jul 2008

    No problem Elaine. Glad to hear it's working for you :)

  • Posted by slee on 30th Jul 2008

    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?

  • Posted by Sarah on 30th Jul 2008

    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.

  • Posted by Richard Bui on 2nd Aug 2008

    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?

  • Posted by Sarah on 3rd Aug 2008

    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.

  • Posted by archshrk on 7th Aug 2008

    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.

  • Posted by Grant H on 8th Aug 2008

    What a fantastic find! I applaud you, I'll be using this extensively on my photoBlog. Really indispensable stuff, thanks again.

  • Posted by SarahG on 8th Aug 2008

    You're welcome Grant. I look forward to seeing your photoBlog :)

  • Posted by archshrk on 11th Aug 2008

    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?

  • Posted by archshrk on 11th Aug 2008

    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?

  • Posted by Sarah on 12th Aug 2008

    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.

  • Posted by YouON on 18th Aug 2008

    it doesnt work to me :(((

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

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

    <code>

    <?php

    if (is_attachment()) :

    $imgmeta = wp_get_attachment_metadata( $id );

    echo "
    ";

    echo "Dimensions: " . $imgmeta['width']." x ".$meta['height']."
    ";

    echo "Aperture: f/" . $imgmeta['image_meta']['aperture']."
    ";

    echo "Camera: " . $imgmeta['image_meta']['camera']."
    ";

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

    echo "Copyright: " . $imgmeta['image_meta']['copyright']."
    ";

    echo "Focal Length: " . $imgmeta['image_meta']['focal_length']."mm
    ";

    echo "ISO: " . $imgmeta['image_meta']['iso']."
    ";

    echo "Shutter Speed: " . number_format($imgmeta['image_meta']['shutter_speed'],2)." seconds
    ";

    echo "";

    endif;

    ?>

    </code>

  • Posted by Sarah on 18th Aug 2008

    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.

  • Posted by YouON on 18th Aug 2008

    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

  • Posted by Jack R on 20th Aug 2008

    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

  • Posted by Tyler on 16th Sep 2008

    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 :grin:

  • Posted by Hannes on 23rd Sep 2008

    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 <code></code> from your code example.

  • Posted by Sarah on 23rd Sep 2008

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

  • Posted by Shane on 29th Sep 2008

    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!

  • Posted by Sarah on 29th Sep 2008

    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.

  • Posted by Shane on 30th Sep 2008

    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.

  • Posted by Sarah on 1st Oct 2008

    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.

  • Posted by Dreamcolor on 29th Nov 2008

    There maybe some error in it.

    Line 5:

    echo "Dimensions: " . $imgmeta['width']." x ".$meta['height']."

    maybe should like this:

    echo "Dimensions: " . $imgmeta['width']." x ".$imgmeta['height']."

  • Posted by Sarah on 30th Nov 2008

    Thanks for spotting that. I've fixed it in the original too.

  • Posted by Ronny on 19th Dec 2008

    I am experiencing that WordPress actually removes my EXIF information when I use the media uploader within WP 2.7. Anyone else experiencing this?

  • Posted by Mihai Albu on 30th Dec 2008

    Thank you for this tip!

  • Posted by dzu on 3rd Dec 2010

    i want to display the exif data which the image is inserted into the post. only one image in one post. i think this plugin cannot do that.

    can someone help me how can i achieve this. i've searched around the net but so far none is working for me.