Exif for WordPress Galleries

Update 2020-09-28: I just discovered that a recent update to FooBox removed the hook I was using in the code below, and I couldn’t find a replacement. So this part won’t work anymore. Adding Exif(ography) information to the WordPress image attachments themselves still works as described. Time to uninstall the Foo stuff and revert to basic galleries or Jetpack Carousel I suppose.

Pictures taken with digital cameras usually hold Exif (Exchangeable image file format) metadata about the camera type, shutter speed, and so on. When you want to show this metadata along with your images in a WordPress gallery you have a problem: neither the built-in media attachment viewer nor most custom viewers (“lightboxes”) show Exif data. Jetpack Carousel does, but in my testing its image descriptions are nearly unreadable on iOS – I can only suspect some strange incompatibility with my aging (and customized) Twenty Twelve theme.

So when I recently started migrating my smaller galleries from Google Photos to WordPress, I started with the default attachment view and later moved on to Foo Gallery. Neither supports Exif by default but I managed to add it using Exifography. The following sections cover all these plugins and use cases. All plugins are free; Foo offers paid upgrades but these aren’t required for Exif display (and don’t provide it either, from what I can tell).

WordPress Caveats

Theme Hacking — You have to be comfortable with modifying the functions.php file of your WordPress theme (or child theme). This is not terribly hard for a programmer on a self-hosted WordPress installation, but you must take care to restore your modifications whenever the theme is updated, unless you are using a child theme. Moreover, you may be completely unable to edit this file if your installation is not self-hosted.

Media Library — You can technically use the Exif data extracted by Exifography with any image viewer, but you can only use Exifography itself if your images are stored in a standard WordPress media library created by the built-in uploader. That uploader automatically extracts Exif metadata from all uploaded media and stores it in the WordPress database, associated with the attachment post that the uploader also automatically creates for each image. Exifography relies on these database entries, so if you show images from direct URLs or another source you won’t be able to use the techniques described below.

Exifography (Thesography)

Kristarella’s Exifography plugin (formerly called Thesography) provides both shortcodes and PHP functions to extract and display the Exif metadata stored in WordPress media libraries. You’ll need to install and activate this plugin for the following sections. Exifography is quite flexible and very useful, but importantly it’s not a gallery or lightbox plugin: you need to figure out for yourself where and how to show the extracted Exif data.

Kristarella’s blog provides full instructions and also a tip on adding Exif data to titles which inspired me to use a similar method to add Exif data to image descriptions instead. As the latter post mentions, you’ll have to change Exifography’s default HTML markup for showing its data in a compact inline form. The default markup is an unordered list (<ul>) which takes up way too much space. I simply changed all the tags to HTML spans separated by en-dashes (–) and spaces. The following screenshot shows the relevant fields of my Exifography configuration:

There’s an invisible space after the dash in the first field. I left the default id and class attributes intact for potential further display customization, but I don’t currently use any. So in the examples below, the Exif data uses the style of the surrounding text. If you’re sure that you never want to use CSS customization, you could also make the generated HTML smaller and simpler by completely removing the <span> tags and just using dashes and spaces (or other plain text characters).

WordPress Gallery

Standard WordPress galleries publish their contents in separate attachment posts which show a single image each. Descriptions are simply stored as textual post content, rendered normally. WordPress provides a filter called the_content to modify such post content before it is displayed. Adding the following filter function to your theme’s functions.php file will append the specified Exifography fields to the existing image description:

add_filter( 'the_content', function( $content ) {
    global $post;
    if ($post->post_type == 'attachment' && function_exists('exifography_display_exif'))
        return $content . exifography_display_exif(
            'aperture,camera,focal_length,iso,shutter_speed', $post->ID);
    else
        return $content;
});

Note that this function only checks that post_type equals attachment. Should you have attachment posts that don’t constitute gallery images you may want to add more specific criteria, though if no image exists Exifography should simply output nothing.

Also note that all Exif fields you want to output must be specified explicitly in the call to exifography_display_exif. The defaults you can select on Exifography’s settings page only appear to affect the shortcode, not this function call. I picked a reasonably small selection of the most relevant fields. Here’s how it looks, using the first image in the Munich Jagdmuseum gallery as an example:

Foo Gallery & FooBox

FooBox is a nice image lightbox that works fine on both desktop browsers and iOS devices (and presumably Android which I haven’t tested). It’s best used in conjunction with Foo Gallery since that gallery tags its thumbnails with titles and descriptions for FooBox. We hook into this tagging process to show Exif data in the FooBox light box.

Function foogallery_get_caption_desc_for_attachment, currently defined at line 579 in file foogallery/includes/function.php, conveniently calls an optional filter called foogallery_get_caption_desc_for_attachment with the “caption” (i.e. image description) it has discovered so far, and the attachment post containing the image and its metadata. You can define a filter function in your WordPress theme’s functions.php file that adds Exif data if available:

function add_exif_to_foogallery( $caption, $attachment_post ) {
    if (function_exists('exifography_display_exif'))
        return $caption .'<br>'. exifography_display_exif(
            'aperture,camera,focal_length,iso,shutter_speed', $attachment_post->ID);
    else
        return $caption;
}
add_filter( 'foogallery_get_caption_desc_for_attachment', 'add_exif_to_foogallery', 10, 2 );

The filter concatenates the existing $caption and the Exifography result for the specified $attachment_post, just as before. We don’t need to check post types since this filter only ever gets called on gallery images. However, we need an extra <br> element because Foo Gallery and FooBox don’t wrap image descriptions in paragraph tags.

The surprising arguments 10, 2 at the end of the add_filter call are required by the howling shrieking madness that is WordPress PHP. The 10 is just the default priority value which we aren’t interested in. The 2 however is required to indicate that yes, our filter does indeed take two arguments rather than the default of one. You’ll actually get a PHP error if you don’t specify this!

At any rate, it works and produces the following output for the same sample image as above. Foo Gallery is currently activated on this blog, so you can see for yourself by simply clicking on the first image in the gallery post.