Walker News » PHP

How To Display WordPress EXIF’s Shutter Speed As Fraction?

Walker — Wed, 01 Jul 2009 20:57:40 +0000

Every photographers read shutter speed in fractional form, unless it’s slower than or equal to 1 second.

Why it’s like that? Well, I figure out that is probably easier to interpret speed in fractional form at a glance for most people (especially artists, not scientists). Isn’t easier to tell difference between 1/100 and 1/4000 than reading 0.01 and 0.00025?

However, the WordPress Gallery stores the EXIF’s shutter speed as decimal figure in database table. Apparently, computer programming is easier to deal with decimal than fractional.

So, in order to follow photography’s convention, there must be a way to render the decimal form of shutter speed stored in WordPress EXIF table in a fractional figure.

Unfortunately, there is no documented WordPress function to do this job (except the wp_get_attachment_metadata function), not even available in the latest WordPress 2.8 release.

Unless using WordPress plugin, you will have to create a image.php template file for the active WordPress theme, with a block PHP code to display decimal shutter speed as a fraction, if the speed is faster than 1 seconds; otherwise, the shutter speed should be displayed in integer or decimal form.

Sound scary? No worry, Andrew Kniowski figured that out and share it in his post titled Quick shutter-speed fix for WordPress EXIF.

I applied that code in my WordPress theme, but purposely removed this if-statement and hit a “divide by zero” error (for those photos without shutter speed or no EXIF data at all, e.g. screenshot):

 if (!empty($imgmeta['image_meta']['shutter_speed']))

After discovered that error, I put it back and now the screenshot looks better.

Add Shutter Speed, Aperture, EXIF, Or IPTC Data To WordPress Gallery

Walker — Wed, 24 Jun 2009 17:04:20 +0000

If you would like to run a photo-blog using the latest WordPress platform, you should be interested to know the way of extracting and displaying EXIF or IPTC information of the picture.

Most, if not all, of the digital camera write some profile data, better known as EXIF data, to each of photo taken. The EXIF data contains information of camera model, focal length, data/time, shutter speed, aperture, exposure mode, etc.

The best I can recall, WordPress 2.5 was the first version to introduce image gallery feature as well as functions to store and extract / display EXIF or IPTC information. Although the WordPress gallery shortcode is intuitive for posting a batch of photo in gallery mode, there is no easy option for one to display shutter speed, aperture, flash mode, etc, that interested by most photography enthusiasts.

Even the two bundled WordPress themes are not exampled with EXIF-related functions. But, there are always good people to share tricks with others, e.g. Sarah’s WordPress 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 data in WordPress could inspire you with her trick on adding GPS-tagging information to WordPress table, and of course showing them along with other EXIF information.

Sample image gallery

Click the above thumbnail to view higher resolution of photo as well as the associated EXIF data rendered by less-documented WordPress functions discussed here.

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

Walker — Thu, 16 Apr 2009 17:09:56 +0000

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

is changed to be

post_parent); ?>

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:

is replaced by this block of PHP + HTML code:



      





      ID, 'medium' ); ?>





   // 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'])."
";
       echo "Copyright: " . $imgmeta['image_meta']['copyright']."
";
       echo "Credit: " . $imgmeta['image_meta']['credit']."
";
       echo "Title: " . $imgmeta['image_meta']['title']."
";
       echo "Caption: " . $imgmeta['image_meta']['caption']."
";
       echo "Camera: " . $imgmeta['image_meta']['camera']."
";
       echo "Focal Length: " . $imgmeta['image_meta']['focal_length']."mm
";
       echo "Aperture: f/" . $imgmeta['image_meta']['aperture']."
";
       echo "ISO: " . $imgmeta['image_meta']['iso']."
";
       echo "Shutter Speed: " . $pshutter . "
"
   ?>


post_excerpt) ) the_excerpt(); ?>

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

Walker — Sun, 12 Apr 2009 16:33:20 +0000

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

 and ?>.


So, let’s take the classic theme bundled with WordPress 2.7.1 as example, this is the line



that should be replace with the following code:



      





      ID, 'medium' ); ?>





   // 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'])."
";
       echo "Copyright: " . $imgmeta['image_meta']['copyright']."
";
       echo "Credit: " . $imgmeta['image_meta']['credit']."
";
       echo "Title: " . $imgmeta['image_meta']['title']."
";
       echo "Caption: " . $imgmeta['image_meta']['caption']."
";
       echo "Camera: " . $imgmeta['image_meta']['camera']."
";
       echo "Focal Length: " . $imgmeta['image_meta']['focal_length']."mm
";
       echo "Aperture: f/" . $imgmeta['image_meta']['aperture']."
";
       echo "ISO: " . $imgmeta['image_meta']['iso']."
";
       echo "Shutter Speed: " . $pshutter . "
"
   ?>


post_excerpt) ) the_excerpt(); ?>



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:

post_parent); ?> 


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.


Add Shutter Speed, Aperture, EXIF, Or IPTC Data To WordPress Gallery
How To Display WordPress EXIF’s Shutter Speed As Fraction?
How To Create Image Template File For The Classic WordPress Theme?
How To Create image.php Template File For WordPress Theme To Display Photo Gallery?
How To Change WordPress Image Caption Text Style To Superscripts?
How To Insert Multiple Images In WordPress 2.6 Without Using Shortcode?
How To Embed SWF In HTML Code Or WordPress Post?



How To Change WordPress Image Caption Text Style To Superscripts?
Walker — Mon, 08 Sep 2008 16:36:03 +0000
WordPress 2.5+ rewrite the image/file uploader interface to include some most wanted features, e.g. multiple images per single upload, WordPress Gallery Shortcode, image caption text, image size and alignment, etc.



Question: How could you force WordPress image caption text to appear as superscripts text style, rather than sharing the common post body text style?

What is that superscripts text style? 


Superscripts text style is usually 75% smaller than its original size and appears at upper position of the same text line, e.g. the blue colour text in Walker^News or 7^th.


Why rendering WordPress image caption text in superscripts style? 


Image caption text is deemed as “alternative text” of an image, i.e. text that describes the image (so that search engine knows what is the image about. That’s why you should write little text for the image alt=”" attribute!


If the article itself is enough to tell story of the image, I think it’s better to “hide them” or just display the caption text in superscripts style for better reading experience or presentation.


How to get WordPress 2.6.1 to display image caption text in superscripts style?


Edit wp-includes/media.php file

 
Look for this function img_caption_shortcode($attr, $content = null)

 
Change this line
. $content . '' . $caption . '
';

to become

. $content . '
^{' . $caption . '}';



There are at least 3 media.php files in 3 different directories, and this WordPress mod is using the wp-includes/media.php.


If you can’t find the mentioned function, make sure you’re editing the right media.php file. Otherwise, this trick is only tested in WordPress 2.6.1 (and might not working in other version?). Good luck.


How To Insert Multiple Images In WordPress 2.6 Without Using Shortcode?
WordPress: Adds wp-caption-text To CSS File For Image Caption Styling
How To Create Image Template File For The Classic WordPress Theme?
How To Edit And Rewrite Post Slug / Permalink In WordPress 2.5?
How To Embed SWF In HTML Code Or WordPress Post?
How To Display WordPress EXIF’s Shutter Speed As Fraction?
Add Shutter Speed, Aperture, EXIF, Or IPTC Data To WordPress Gallery


How To Insert Multiple Images In WordPress 2.6 Without Using Shortcode?
Walker — Sun, 07 Sep 2008 15:45:19 +0000
Starting from WordPress 2.5, uploading multiple images or files is as easier as those who are using New Blogger platform provided by Google Inc. Question: Other than using shortcode, is there other ways to do so?



Intro: WordPress 2.5+ could upload multiple files in one go


Unlike New Blogger image uploader, the WordPress 2.5+ “select files to upload” dialog box works exactly a standard Windows file selection dialog box – press CTRL+A to select all images files; CTRL+Mouse-click to select multiple files; highlight first picture file and press SHIFT key while selecting the last picture file to select all files in between, inclusively.


The WordPress 2.5+ image file uploader allow any number of images per upload in one go. I.e. you’re not limited to a maximum 5 images per single upload, as in New Blogger. 


It’s cool, isn’t it? Not only that. With WordPress 2.5+, you could also use “WordPress Gallery Shortcode” to insert multiple images to the post editor!


As the name suggest, the WordPress Gallery Shortcode is like Linux alias command but it’s pre-defined in WordPress core files (i.e. general user couldn’t redefine the shortcode in the plain/default WordPress admin pages).


However, some WordPress fans is not really keen on the image shortcode for some reasons, e.g. it can’t define which image of the gallery to display or not to display, the sequence of displaying each image in the gallery, etc.


How to insert multiple images in WordPress 2.6.1?


I am using WordPress version 2.6.1 for this topic, but the original trick I’m referring to was suggested by beardedknight in WordPress forum for WordPress 2.5 (so, it supports to work fine for version 2.5+).


Edit the wp-admin/includes/media.php file (read carefully the path specified here, it’s not wp-includes/media.php or elsewhere – there are at least 3 media.php files in WordPress 2.6.1. installation directory):
function media_send_to_editor($html) {
        ?>

        //exit;
        return;
}

As shown here, look for the media_send_to_editor($html) function and make little changes, as those highlighted in “blue colour” PHP code:


remark the original exit; line
add one single PHP code return;

 


Edit wp-admin/js/media-upload.js:
function send_to_editor(h) {
        if ( typeof tinyMCE != 'undefined' && ( ed = tinyMCE.activeEditor ) && !ed.isHidden() ) {
                ed.focus();
                if (tinymce.isIE)
                      ed.selection.moveToBookmark(tinymce.EditorManager.activeEditor.windowManager.bookmark);

                if ( h.indexOf('[caption') != -1 )
                        h = ed.plugins.wpeditimage._do_shcode(h);

                ed.execCommand('mceInsertContent', false, h);
        } else
                edInsertContent(edCanvas, h);

        //tb_remove();
}

As shown here, look for the send_to_editor(h) function and remark the original tb_remove(); function call (the “blue colour” JavaScript code).


If you’re not comfortable with this simple PHP code modification (PHP mod), then just stick to the default behaviour or look for some good WordPress gallery plugin. Good luck.


How To Change WordPress Image Caption Text Style To Superscripts?
How To Edit And Rewrite Post Slug / Permalink In WordPress 2.5?
How To Create Image Template File For The Classic WordPress Theme?
WordPress: Adds wp-caption-text To CSS File For Image Caption Styling
Update WP_TITLE To Display Blog Name On The Right
How To Display WordPress EXIF’s Shutter Speed As Fraction?
Add Shutter Speed, Aperture, EXIF, Or IPTC Data To WordPress Gallery


Update WP_TITLE To Display Blog Name On The Right
Walker — Mon, 21 Apr 2008 15:13:33 +0000
For those who have upgraded WordPress powered blogs to WordPress 2.5 and having the blog name appears on the right hand of post title, now is the time to update WordPress theme files that using WP_TITLE template tag.



On most WordPress themes, the header.php is usually the only PHP files that calls WP_TITLE function.


According to WordPress Codex, WordPress 2.5 introduces a new function parameter (i.e. seplocation) to WP_TITLE:

function wp_title($sep = '-', $display = true, $seplocation = '') {
............
............
............
       // Determines position of the separator
        if ( 'right' == $seplocation )
                $title = $title . $prefix;
        else
                $title = $prefix . $title;
...........
...........

The seplocation allows WordPress theme designer to fix the blog name to appears on either left (default) or right, in addition to the character (i.e. separator) used to separate the blog name and post title.


Before there is seplocation parameter, I used to modify wp-includes/general-template.php (one of the WordPress core files) to fix “Walker News” on the right hand of each post titles.


Having said that, now everyone who prefers post title comes first then followed by blog name can remove plugin installed for this purpose or modification made to general-template.php file.

The WordPress powered blog is easier to maintain, as the modular concept breaks it down into three components:


core files (the engine of WordPress powered blogs),
plugins (the extensions build on top of WordPress core engine to facilitate features and creativities enrichment)
themes (the fashion or costume of WordPress powered blogs)


By keeping the WordPress core files intact, most general users could have less (or none) hassles to perform subsequent WordPress version upgrades.

Thus, fix the blog name appearance location in theme files (header.php) keeps the next WordPress version upgrade easier and less worries.


How to display blog name on the right hand of post title in WordPress powered blog?


Open the header.php file of WordPress theme, search for the wp_title() function call and put in the three parameters value that corresponding to separator character, display blog name (Boolean flag) and blog name appearance location.


For example, to display blog name on the right of post title and using dash character as separator, update the wp_title call in header.php theme file as this:

<?php wp_title(<span style="color:#F00;font-weight:bold;">'-',true,'right'</span>); ?><?php bloginfo('name'); ?>

After saving the changes, press CTRL+F5 to force browser refresh the cached content and verify the effect.


How To Insert Multiple Images In WordPress 2.6 Without Using Shortcode?
How To Edit And Rewrite Post Slug / Permalink In WordPress 2.5?
How To Create Image Template File For The Classic WordPress Theme?
How To Change WordPress Image Caption Text Style To Superscripts?
Favicon: How To Create A Website Icon For A Blog?
Windows Media Player: How To Embed WMV File In HTML Code?
WordPress: Adds wp-caption-text To CSS File For Image Caption Styling