Walker News

Turn On WordPress Feature To Display Photo EXIF Data and IPTC Information

WordPress supports EXIF and IPTC data extraction since WordPress 2.5. However, the functions to display the extracted EXIF and IPTC information have to be separately added to WordPress theme files.

Normally, the default WordPress theme bundled with WordPress archive provides reference on how to use new functions introduced by the latest release.
However, these EXIF-related functions are not exampled in both default and classic theme, not even found in the latest WordPress 2.7.1. The only thing I found is how to create template of image.php theme file, with reference to the default theme.

If you prefer not to install additional WordPress plugin since the core is already inbuilt EXIF-related functions, here I show you how to “turn” it on (if you do not mind my poor presentation).

Enable WordPress theme to display the EXIF and IPTC data of digital photograph

Example:


Steps:

First, create a image.php template file if your WordPress theme doesn’t have one. As shown in my previous post, it is easy to create one in no time.

You just need to duplicate single.php or index.php and rename it to image.php.

Edit the image.php template file, search for the PHP code that calling the_content() function and replace it with the codes that render image gallery as well as EXIF/IPTC information.

Note, the PHP code is referring to code that enclosed in a pair of <?php and ?>.

So, let’s take the classic theme bundled with WordPress 2.7.1 as example, this is the line
<?php the_content(__('(more...)')); ?>

that should be replace with the following code:
<!-- To display thumbnail of previous and next image in the photo gallery -->
<div style="float:right;">
      <?php next_image_link() ?>
</div><?php previous_image_link() ?><br />

<!-- To display current image in the photo gallery -->
<div style="text-align: center;">
      <a href="<?php echo wp_get_attachment_url($post->ID); ?>"><?php echo wp_get_attachment_image( $post->ID, 'medium' ); ?></a>
</div><br />

<!-- Using WordPress functions to retrieve the extracted EXIF information from database -->
<div style="padding:5px 0 5px 20px;border:1px dotted;">
   <?php
      $imgmeta = wp_get_attachment_metadata( $id );

// Convert the shutter speed retrieve from database to fraction
      if ((1 / $imgmeta['image_meta']['shutter_speed']) > 1)
      {
         if ((number_format((1 / $imgmeta['image_meta']['shutter_speed']), 1)) == 1.3
         or number_format((1 / $imgmeta['image_meta']['shutter_speed']), 1) == 1.5
         or number_format((1 / $imgmeta['image_meta']['shutter_speed']), 1) == 1.6
         or number_format((1 / $imgmeta['image_meta']['shutter_speed']), 1) == 2.5){
            $pshutter = "1/" . number_format((1 / $imgmeta['image_meta']['shutter_speed']), 1, '.', '') . " second";
         }
         else{
           $pshutter = "1/" . number_format((1 / $imgmeta['image_meta']['shutter_speed']), 0, '.', '') . " second";
         }
      }
      else{
         $pshutter = $imgmeta['image_meta']['shutter_speed'] . " seconds";
       }

// Start to display EXIF and IPTC data of digital photograph
       echo "Date Taken: " . date("d-M-Y H:i:s", $imgmeta['image_meta']['created_timestamp'])."<br />";
       echo "Copyright: " . $imgmeta['image_meta']['copyright']."<br />";
       echo "Credit: " . $imgmeta['image_meta']['credit']."<br />";
       echo "Title: " . $imgmeta['image_meta']['title']."<br />";
       echo "Caption: " . $imgmeta['image_meta']['caption']."<br />";
       echo "Camera: " . $imgmeta['image_meta']['camera']."<br />";
       echo "Focal Length: " . $imgmeta['image_meta']['focal_length']."mm<br />";
       echo "Aperture: f/" . $imgmeta['image_meta']['aperture']."<br />";
       echo "ISO: " . $imgmeta['image_meta']['iso']."<br />";
       echo "Shutter Speed: " . $pshutter . "<br />"
   ?>
</div>
      
<?php if ( !empty($post->post_excerpt) ) the_excerpt(); ?><br />

Next, look for the PHP code that present title URL (the code that call the_title() function) with these codes so that the parent post URL is used when rendering image gallery:
<a href="<?php echo get_permalink($post->post_parent); ?>" rev="attachment"><?php echo get_the_title($post->post_parent); ?> </a>

Once these are done, your WordPress theme is not only ready to render image gallery but also to show EXIF / IPTC information of the digital images.

Custom Search

  1. How To Create Optimized Image For Web Or Blog? 15-04-09@00:06

    […] with optimized settings, such as lower the JPEG quality (higher JPEG compression ration) and remove EXIF / IPTC data as well as JPG-comments (if any). Later, I found that the Photoshop CS3 Save For Web and Devices […]

  2. Add Shutter Speed, Aperture, EXIF, Or IPTC Data To WordPress Gallery 25-06-09@01:04

    […] Gallery and EXIF, Andrew Kniowski’s Quick shutter-speed fix for WordPress EXIF, myself on Turn On WordPress Feature To Display Photo EXIF Data and IPTC Information (with reference to the earlier two links). If you’re ambitious, Kristarella’s Geo exif […]

  3. How To Display WordPress EXIF’s Shutter Speed As Fraction? 02-07-09@04:57

    […] the photo shutter speed in WordPress EXIF as fractional figure. I applied that code in my WordPress theme, but purposely removed this if-statement and hit a “divide by zero” error (for those […]

  4. John 21-09-09@18:39

    This is real clever. How would one add additional information like description, keywords, and all the others you can add in Adobe Bridge?

  5. eeb 04-06-10@15:39

    Thank you so much for all the information. I would like to just display the description of the image how can I do this?

  6. Michel Desbordes 22-06-10@23:20

    Hello, thanks for these informations, it works. I have only a problem, when I display exif data I get a small picture. How can I manage the image size if I want to get a larger picture ?
    Regards

  7. Walker 23-06-10@17:29

    The code is written to display the medium size of image selected in the gallery.

    I guess you might have configured the medium image size to thumbnail size as well. To confirm this, go to Settings (on the left pane of WordPress admin page) and then Media.

  8. Michel Desbordes 23-06-10@17:45

    That’s it, thanks for your help and the very useful job.
    Regards

  9. Tal 15-01-11@02:35

    Thank you SO much for explaining with such clarity how to do this, I’ve been struggling all morning since there’s almost no info around and this is by far, the easiest and non-intrusive way to do it that I’ve found =)

    Thanks again!

2017  •  Privacy Policy