Add EXIF to WordPress gallery image titles

12 September 2012 by kristarella

My Exifography plugin provides different ways for users to display EXIF data for their images in WordPress.

One of the ways people like to show EXIF is within the image title, like Sam does on daily dose of imagery. This allows the EXIF to show up in a tooltip when hovering over the image, or if you use a lightbox plugin it might include that information in the popup.

If you have a single image, or a small number of large images, on the page you can just add the Exifography shortcode within title="" to include the EXIF in the image’s title attribute. However, if you’re using the WordPress gallery shortcode, the title attribute is rendered automatically for you. Thankfully, all the attributes that are output with an image in WordPress can be filtered.

The following PHP in your theme’s functions.php, or custom_functions.php in Thesis, will add the EXIF data after the image name in the image’s title attribute (when Exifography is active).

function my_image_titles($atts,$img) {
	if (function_exists('exifography_display_exif'))
		$atts['title'] = trim(strip_tags( $img->post_title )) .' '. exifography_display_exif('all',$img->ID);
	else
		$atts['title'] = trim(strip_tags( $img->post_title ));
	
	return $atts;
}
add_filter('wp_get_attachment_image_attributes','my_image_titles',10,2);

Make sure that your Exifography display settings are suitable for the title attribute, which doesn’t render HTML; you will need to use plain text separators to format the EXIF data. Like the example below.

If you use a lightbox that uses both the title and alt attributes in the popup, you can modify the code to suit that. prettyPhoto, for example, uses the alt attribute as the image name and it uses the title attribute as the description. In that case you would want to remove trim(strip_tags( $img->post_title )) .' '. from before the Exifography function as to not repeat the image name.

WordPress uses the image name as the alt attribute by default if there’s not a different alt attribute set, so you shouldn’t need to worry about it, but if you do want to change it you can filter it in the same way the title is filtered using $atts['alt'] instead of $atts['title'].

Comments

Sebastian says

13 September 2012 at 00:19

Thank you so much for the tutorial! But on my homepage, it is just adding meta data to the picture on my front page.

It is not working with the other pictures 🙁
kristarella says

13 September 2012 at 10:12

Sebastian — What file did you add the code to? If it’s in functions.php, but is only working on the home page then maybe the theme is doing something with the gallery shortcode on other pages that isn’t being filtered… I just saw that you have CSS in the head of your site for NextGen gallery; is that what you’re using to display the galleries rather than the default WordPress shortcode? The output of the HTML looks like the default WordPress gallery shortcode, but I can’t be sure from this end.

Please provide more information about your setup.
Sebastian says

13 September 2012 at 16:18

I am using the built-in media gallery and added some features with “file gallery”, nextgen is installed, but is only used in two galleries.
I am also going to ask the theme developers, maybe they have any idea
kristarella says

13 September 2012 at 18:03

Sebastian — Ok, it’s probably that plugin rather than the theme then, since that plugin claims to extend the gallery shortcode.

I’ve looked at the plugin source. It looks like it gets the image source URL and all its attributes separately, rather than the function that WordPress uses to get the image source and attributes all in one, which is where this filter gets applied. To do what I’m doing above you would need to create a custom template for the File Gallery plugin to insert the EXIF to the title. It should be quite simple, just follow the File Gallery template instructions, and edit the default template where it says title="<?php echo $title; ?>", change to title="<?php echo $title .' '. if (function_exists('exifography_display_exif')) exifography_display_exif('all',$attachment->ID); ?>". I’m not sure if the image ID is going to get through to the exifography function properly, but looking at how the other variables get through I think should work.
Sebastian says

13 September 2012 at 19:26

WOW! Thank you so much for your support! It is working now!
I altered the code snippet a little bit to
title=”ID); ?>”

Thank you!!! 🙂
Joe says

5 October 2012 at 20:59

Hi Kristarella!
Thanks for this post!

I would like to ask you if you think it can works with the buddypress gallery (bp-gallery plugin).

As far as I know I can obtain the EXIF info from the original photos using this snippet :

bp_get_media_meta ($media_id, “media_meta”);
//it will give you all the meta data read by ‘wp_read_image_metadata’

This because bp-gallery generate 3 files after uploading the original one (thumbnail, medium size, large size).

I’ve edited the plugin adding the lightbox function, to show on click the original file in a pop-up, and at the moment I’m using the title to show the autor’s title. Actually I don’t need to show it.. I can use the title for the exif informations..

My code :

<div class=’single-media’ id="gallery_media_<?php bp_media_id();?>">
<h3 class=’media-title’><?php bp_media_title();?></h3>
<?php// bp_media_html();?>
<a href="<?php bp_media_full_src()?>" target="photo" title="<?php bp_media_title();?>">
<img src="<?php bp_media_mid_src()?>" alt="<?php bp_media_title();?>"/></a>
<p><?php bp_media_description();?></p>

</div>

Thanks,
Joe.
- kristarella says
  
  6 October 2012 at 09:36
  
  Joe — I think you can probably replace bp_media_title(); with exifography_display_exif('all',bp_media_id());.
Joe says

6 October 2012 at 21:18

Hi Kristarella!

In the setting page I’ve this error
Warning: in_array() expects parameter 2 to be array, null given in
[…]/public_html/wp-content/plugins/thesography/exifography.php on line 425

My WP is 3.3.1 version.

As soon as I’ve selected and save at least one default display option (like iso, aperture… ), the error has gone.

But..
I don’t have any kind of exif.. I just have the ID of the pic.. not the infos.. 🙂

Maybe I’ve to check if on my server the php has been compiled to read and store the exif informations.. or maybe exifography_display_exif('all',bp_media_id()); it’s not the right variable..

Do you have another idea or suggestion ?

Thanks,
Joe
- kristarella says
  
  7 October 2012 at 00:34
  
  Hi Joe,
  
  It’s a known issue. I thought it might have been fixe in the current version, but maybe I haven’t uploaded the fix yet.
  
  The warnings are not actual “errors” and won’t cause anything to break, they are just ugly.
  
  It will be fixed in the next update.
- kristarella says
  
  7 October 2012 at 01:22
  
  Joe — sorry, it’s very late & I’m on my mobile; I glossed over the second part of your question. I guess from your description that bp_media_id() must echo the image ID, but we need it to be returned & not echoed or printed… If there’s a function called bp_get_media_id or something like that it would likely be what you need in the second parameter of the exifography function. I won’t be at a computer for another day or so to check that out for you, but you seem pretty able so you might find it.
Joe says

7 October 2012 at 01:16

Hi Kristarella,

yes.. It’s not a problem, also ’cause now they’ve disappeared.. so it’s not a big deal 🙂

But.. what about the exif ? Can you suggest me another way to show ’em ?
’cause at the moment with that variable, I obtain just the image id (database id) and not the exif..
Should I check if the php was compiled to store them ?

Thanks,
Joe.
Joe says

7 October 2012 at 05:05

Kristarella,
don’t worry at all.. I’m writing from London… 🙂

I’ve activated the exif on my server but this wasn’t the problem.
I mean.. check this page http://londonschoolofphotography.net/exif.php

It’s just an example.. to check if the exif was working or not.

But with buddypress gallery nothing works properly.
As far as I’ve understood, bp-gallery generate 3 files and delete the original one.
I’ve checked the database, and in the table where all these infos should be stored, everything is 0 (iso=0 aperture=0 etc..).
This is because those files have been generated by the GD library.. and we lost the exif during the passage.
I’ve found how to display all the info.. but, as I’ve told, everything is 0..
Even using the bp_media_id() to obtain the original id..

Let me say that this script (bp-gallery) it’s totally a mess, ’cause is made by 10238102831823192^n echos, returns, variables… and zero reference manual.. or something like.
Actually it works very well for standard usage.. but if someone needs to edit something.. bloody hell.. !

By the way.. I’ve to find a solution.. it’s a challenge! 🙂
Have a nice Sunday and rest! 🙂

Joe.
Joe says

9 October 2012 at 05:10

Hi Kristarella,
hope your’re well!

Finally I’ve found the way to create a variable for this code-salad to capture the original file path.
it’s

But.. I can’t use with your plugin.. I mean.. nothing appears..
these exif are driving me crazy.. definitely..

Any suggestion? (you don’t have to reply me now.. I don’t know what time is there ..so just do it as soon as you can.. 🙂 )

Thanks,
J.
Joe says

9 October 2012 at 05:12

ahemm..
I forgot to encode the php.. 😛

<?php echo get_full_media_original_path(); ?>

cheers!
kristarella says

9 October 2012 at 08:40

Joe — I’m back at my computer now (I wasn’t when I was replying before), so I can attempt to look at the plugin code, but if it’s the plugin from BuddyDev I can’t download it without signing up, which I don’t care to do.
The image URL won’t do anything, you need the image ID for the exifography function. There are lots of image related functions in WordPress, but I have no idea how the plugin might be using, misusing or bypassing any of those.
Joe says

11 October 2012 at 21:44

Hi Kristarella,
just a quick message to tell you I’ve solved the problem.

Was quite tricky to find the solution..
I didn’t use your plugin.. I’ve used just php.

By the way, really thanks for your support!
cheers.
Joe.
TAKA says

5 February 2013 at 21:09

Hello, first of all great work !

Well then I’m using the «PHOTOLUX» theme with prettyphoto and I would need as a default for galleries fields corresponding first to icons then to prettyphoto lightbox :.

File EXIF file name goes to WP gallery Caption textfield
IPTC comment goes to WP gallery Title textfield

Regards …
Gary says

6 February 2013 at 16:59

Hi,

I have a question about Exography,
I want to display exif data in the gallery of wordpress.
When I turn on “Automatically display exif”, if work fine but other post will display exif too, that’s not what I want.

I had copied the code above to theme’s functions.php but it don’t work.
Is there any setting I need to do? Thx so much
Sorry for my bad English

Here is the sample of my page need to display exif
http://www.enterpr1se.info/201.....-4-photos/
kristarella says

7 February 2013 at 10:58

Gary — The code you used did work: hover over your gallery images. You just didn’t change the HTML settings so it doesn’t show the HTML in the tooltip.

I haven’t figured out yet how to automatically add it as a caption.
Sebastian says

28 February 2013 at 19:21

Hi,
I reinstalled wordpress and tried to install exifography like in my first comments above.
In added this code to the FileGallery plugin:
title=”ID); ?>”
But the title in the fancybox is still blank:
http://www.ilikephotos.de/blog/kids/

Title in fancybox is working, I just changed the title tag to the code above.

Can you help me?
Sebastian says

28 February 2013 at 19:22

And again, here is the code I used in the filegallery default template:
title="<?php if (function_exists(‘exifography_display_exif’)) exifography_display_exif(‘all’,$attachment->ID); ?>"
Sebastian says

28 February 2013 at 19:58

Ok, I got it 🙂
This is the right code:

title="<?php if (function_exists(‘exifography_display_exif’)) echo exifography_display_exif(‘all’,$img->ID); ?>"
Sebastian says

28 February 2013 at 23:56

Okay, after installing “jetpack” and activating the nice looking tiles-feature the exif-information is gone again.
see: http://www.ilikephotos.de/blog/kids/
Hover and Lightbox is showing the name of the image as title. title and alt have no exif-information.

Kristerella, do you have any idea do show exif in tiles-view?
Randy Preising says

17 March 2013 at 01:34

Is it possible to add the EXIF info in a widget? I’ve had a tough time finding a WP theme that supports BOTH responsive layout and EXIF display. I’ve been trying to get going with the BigFormat theme.

Here’s a link to a mockup I did. The EXIF info is at lower right.

https://www.evernote.com/shard/s54/sh/bb585018-7a4b-4088-b76f-3b778c9ee65f/d8e325ae1863210b514f2c1055d14030

BTW – The developers say they are not planning on releasing any updates to support EXIF, so I need to find another way.

Thanks in advance.