Theming Your WordPress Gallery

By Sarah | WordPress Coding & Design

Jul 27

Last week I wrote about using the WordPress Gallery and EXIF features, introduced in WordPress 2.5. This week I want to explain how to create your large photo theme file.

Last week (if you’ve not read last week’s post, I do recommend it before proceeding!) you may remember that I mentioned that when you click one of the thumbnails it will display the medium sized photo, and that you should be able to create a theme name image.php to control this display, otherwise the single.php file would be used. However, at the time I duplicated single.php to image.php and the image didn’t display.

Well, after a bit of research I’ve found the tags required to get these images displaying. Again, lack of information on the web didn’t help! I actually found this information in the image.php file in the default theme (somewhere I don’t tend to look as it’s not coded very well!), so it may be useful to open that file up and have a look yourself, but I’ll explain the tags here. Note, none of these are echoed out by default.

This returns the link to the gallery post that contains that photo.
Returns the title of the gallery post that contains the photo.
This will get the link to the original image (useful if the originally uploaded image is a lot larger than can fit on the single image display page).
wp_get_attachment_image( $post->ID, ‘medium’ )
This returns the full image tag with the source as the medium sized image. You can change the ‘medium’ parameter to be ‘full’ if you want to display the original, unresized image
This will print the caption given to the photo
This will print out the full description given to the photo
This will echo out a link to the previous image in the gallery as a linked thumbnail
This will echo out a link to the next image in the gallery as a linked thumbnail

For the last two options, only the previous and next thumbnails are displayed and linked to. Not something I’d personally want to have. Luckily a plugin to create plain text links is available from Full Throttle Development.

So with these tags, plus the EXIF data, you can create a more customised single image page. Remember, these tags need to be kept within the loop, so if you take your single.php theme file as a guide, and alter what you need to in that, then you should be fine. Putting this into practice should give you final code of:

[sourcecode language=”php”]< ?php if (have_posts()) : while (have_posts()) : the_post(); ?>

post_parent); ?>” rev=”attachment”>< ?php echo get_the_title($post->post_parent); ?>
< ?php echo wp_get_attachment_image( $post->ID, ‘full’ );
$meta = wp_get_attachment_metadata( $id );

echo “

    echo “
  • Dimensions: ” . $meta[‘width’].” x “.$meta[‘height’].”
  • \n”;
    echo “

  • Aperture: f/” . $meta[‘image_meta’][‘aperture’].”
  • \n”;
    echo “

  • Camera: ” . $meta[‘image_meta’][‘camera’].”
  • \n”;
    echo “

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

  • Copyright: ” . $meta[‘image_meta’][‘copyright’].”
  • \n”;
    echo “

  • Focal Length: ” . $meta[‘image_meta’][‘focal_length’].”mm
  • \n”;
    echo “

  • ISO: ” . $meta[‘image_meta’][‘iso’].”
  • \n”;
    echo “

  • Shutter Speed: ” . number_format($meta[‘image_meta’][‘shutter_speed’],3).” seconds
  • \n”;
    echo “


< ?php comments_template(); endwhile; else: ?>

Sorry, no attachments matched your criteria.

< ?php endif; ?>[/sourcecode]

This puts your full size image above your description and EXIF data, with next and previous thumbnail links and the comment form at the bottom.

Next week I’ll explain how you can modify your index theme file to list your gallery and normal blog posts together, neatly.

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


About the Author

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.

This is a very interesting post and one that I'll have to give some consideration in the future. We've been toying with the idea of instituting a gallery on our site and this info will come in handy!

Sarah July 28, 2008

Good to hear John. Don't forget next week's post will end the 3 parter, with a few more tricks to use :)

Elaine July 29, 2008

where are you supposed to put the code in the image.php file? because it didn't work for me, it just printed out the code on my page.. i don't want to see a bunch of php code in my gallery… guess i'll have to find another way of extracting the EXIF

Elaine July 29, 2008

well i have an image.php files and tried replacing the code in there, and i tried it in the single post too, but that did nothing, but yeah it showed up as code when i put it in the image.php file, and i didn't see any reason why, as in your last post about getting exif data, the code was just another php statement, so it should have worked, but just printed out the code, perhaps i should have posted my problem on your last week's post about getting exif data

Elaine July 29, 2008

in fact, i'll go back to last weeks post and post that code, and then you can see by going to my gallery

Sarah July 29, 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>


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

Anyway, hope that fixes your problem. Let me know if it doesn't :)

Elaine July 29, 2008

btw Sarah, this post was very helpful and I'm so glad I found it, I bookmarked it for future template modifications :) thank you so much for your work!

Sarah July 29, 2008

The code I posted above replaces the wordpress loop code in the single.php file. I assume you’ve duplicated your single.php (or index.php if single.php doesn’t exist) and renamed it image.php. The look for the first line of the code above, which is the start of the loop, and look for the end of the loop which should look similar to the last couple of lines of the code above.

Then delete this code in the file and replace it with all of the code above (note you’ll need to remove the space between the question mark and ‘php’ if you copy the code. Side effect of the plugin used unfortunately).

Then if you view an image from your gallery it should output everything correctly. If you’re still seeing PHP code then check for the spaces between <? php, otherwise post up a link to the file here and I can take a look for you.

Comments are closed