Walker News

How To Create Image Template File For The Classic WordPress Theme?

WordPress image gallery is good for those who are running photo-blog or posting photograph regularly. With WordPress 2.5 and above inbuilt the feature at out of the box, you might not need to rely on more third party WordPress plugin.

According to WordPress template hierarchy, the WordPress 2.5 uses image.php template file to render a zoom-in image of the thumbnail being clicked.

In case there is NO such template file, it looks for attachment.php, followed by single.php, and finally the index.php template file.

Therefore, it’s perfectly fine to apply image gallery even if the active WordPress theme does not come with image.php template file.

However, it is good to have this dedicated template file to gain most (if not all) features of WordPress image gallery. For example, it’s easier to include image gallery related functions in this new template file, to display hyperlinked thumbnail of next and previous image in gallery as well as the photograph EXIF or IPTC data (such as Copyright info, shutter speed, aperture, ISO, focal length, camera model, etc).

So, how to create an image.php template file, if your active WordPress theme does not have one?

Let me use the Classic WordPress theme bundled with WordPress 2.7 as an example. If you look at your WordPress installation, there is no image.php, single.php, or attachment.php template file in the classic directory.

Instead of creating a new template file from zero, it’s easier to use index.php template file as a base. So, just duplicate (copy) the index.php and name it as image.php:
cp index.php image.php

Next, open the image.php file for modification:

1) Replace the_permalink() and the_title() functions with image gallery functions, in order to present hyperlink of parent post instead of permalink of the medium size (zoom-in) image.

In this case, the original line
<a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a>

is changed to be
<a href="<?php echo get_permalink($post->post_parent); ?>" rel="bookmark"><?php echo get_the_title($post->post_parent); ?></a>

2) Look for the_content() and replace it with new functions that display hyperlinked thumbnail of previous and next image in gallery, the medium size image of thumbnail being clicked, and the photograph EXIF / IPTC data (if any).

So, this orginal line:
<?php the_content(__('(more...)')); ?>

is replaced by this block of PHP + HTML 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 />


Custom Search

  1. Clare Swindlehurst 13-09-09@16:34

    Thanks for sharing this – I was tearing my hair out trying to sort out the image page – and now it works!

  2. Sameer 26-08-10@20:34

    Hey dude you have done a awesome job…
    Thank you very much for this beautiful article

2014  •  Privacy Policy