Walker News » Weblog

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(); ?>

Latest Google Favicon Adds Colour To Bookmark List

Walker — Sat, 10 Jan 2009 18:04:48 +0000

Google official blog announced the latest favicon marks another branding move. If it’s not the 3rd Google favicon in its history, I am sure this is not the last.

Favicon, is a little icon but give a significant difference if it looks outstanding as you open the Bookmark or Favorites list.

After celebrating the 10th birthday, Google Inc embraces another decade, looking forward a teenage-hood with countless excitements and explosive energy.

Andre Resende, a computer science undergraduate student at the University of Campinas in Brazil, who inspired the Internet giant with a design of colourful, vivid “g” that should perfectly iconize Google 10 years vision:

^{A list of user-submitted Google Favicon that highlighted by Google blog}

So, have you made a favicon for your own site/blog? If not, follow my lousy guide to create a simple favicon in no time :-)

Although WalkerNews.net favicon is not updated for a new year, I’ve made tonne of changes in this blog (lousy but serve well for recording my notes for reference) – some changes are visual, some are not (e.g. optimization, security, etc).

How Easy To Change WordPress 2.7 Post Permalink With Post Slug

Walker — Mon, 15 Dec 2008 16:53:40 +0000

If WordPress is setup to use “Pretty Permalink”, then the weblog software automatically convert the post title into a permanent URL of the post or page (i.e. the Permalink). Although the permalink is not necessary contains the exact words in post title (due to simplification / truncation logic).

If you have a reason to change the default “Pretty Permalink”, WordPress allows you to edit or change the permalink, just as you wish.

For example, I change the permalink of earlier post “How To Change Google Chrome 1.0.154.36 User Agent String?” by eliminating version number 1.0.154.36.

Prior to WordPress 2.5 (that I know), the post slug feature allows blogger to define an alternative post title which is then referred and converted into a permalink of the post.

Then, WordPress 2.5 (and 2.6, if not mistaken) removed the post slug button from weblog interface. As a replacement, the “edit” link of Permalink was used for the purpose.

Now, post slug make a “hidden” comeback in latest WordPress 2.7. As compare to edit the “Pretty Permalink” directly, post slug allows user to write an alternative post title as normal, without worry about the dash character that form the permalink structure.

As mentioned, WordPress 2.7 doesn’t show Post Slug interface by default. In order to display Post Slug text box, click the “Screen Option” on upper-right corner (below the Log Out link), select “Post Slug” and look for the Post Slug input box at bottom of post editor:

Update To Latest WordPress 2.6.5 To Fix XSS Exploit

Walker — Wed, 26 Nov 2008 18:46:00 +0000

If you host a WordPress blog and expect it to live under your full control, then you should never wait for another days to update the core files whenever there is a new release for download (absolutely free from WordPress.org).

According to Ryan’s post, the latest WordPress 2.6.5 fixes one serious security threat (XSS exploit) and three bugs – prevents accidentally saving post meta information to a revision, prevents XML-RPC from fetching incorrect post types, and adds some user ID sanitization during bulk delete requests.

All these fixes involves changes on 5 existing core files of WordPress 2.6.3. That’s to say, you can simply update these affected core files only, if you’re not ready to update all core files of WordPress 2.6.3.

Because there was a fake, trojaned version of WordPress 2.6.4 “released” by the bad guys, the WordPress team decided to skip “contaminated” version 2.6.4 and jump from 2.6.3 to 2.6.5.

WordPress 2.6 Presents The Matrix Easter Egg

Walker — Wed, 26 Nov 2008 16:20:20 +0000

According to Donncha, the WordPress 2.6 Matrix Easter Egg is new to him. So am I. If not his post appears in News feed, I wouldn’t know there is such an intentional hidden message in WordPress.

The Easter Egg themed after The Matrix movie has been known for months, is exists in WordPress version 2.6 and betas of version 2.7.

I am not sure is this Easter Egg exists in WordPress MU (otherwise registered bloggers of WordPress.com could also try to trigger the hidden function) or the code will be continue exists in final release of WordPress 2.7. If you’ve the answer and don’t mind to share the findings, please leave a comment.

Anyway, you may “disable” the Matrix Easter Egg by turning off Post Revision In WordPress 2.6, which is the trigger point of showing this Easter Egg.

Trigger WordPress 2.6 Matrix Easter Egg

If you have access to WordPress 2.6 weblog, you may try to activate the WordPress Matrix Easter Egg with these few steps:

Edit a post, be it new or archive, so long as the Post Revisions (at bottom of page) has at least one entry.
Click either one of the entries and it will redirect you to next page.
Scroll down to bottom again, select Current Revision entry (the radio buttons of the entry are both selected, as shown in the follow screenshot), and click the Compare Revisions button.

^{How to activate the Matrix Easter Egg in WordPress 2.6?}

Soon after you click the Compare Revisions button, the Matrix Easter Egg appears, initiated with message that says “Self-comparison detected. Initiating infinite loop eschewal protocol. Self destruct in 3…2…1″.

Finally, there is the classic Matrix theme (blank and green) that shows “Wake Up, Walker…The Matrix has you. Follow the white rabbit. Don’t let this happen again. Go Back.”

WordPress: Adds wp-caption-text To CSS File For Image Caption Styling

Walker — Wed, 10 Sep 2008 17:20:42 +0000

Question: Is there a WordPress plugin or alternative ways than editing wp-includes/media.php file if I want to format WordPress image caption text?

Answer: Yes. There are many ways to Rome, and editing WordPress core file is certainly not the only solution for this topic.
Indeed, it’s not a good practice to “hack” WordPress core files unless you don’t mind to keep track of mods that you’ve done and happily re-apply the mods during each WordPress upgrade processes.

In WordPress 2.6.1, the Add Media interface automatically enclose image caption in the paragraph tag with a CSS class that named as wp-caption-text (i.e. ).

So, the better way of formatting WordPress image caption text is by adding this CSS class (i.e. wp-caption-text) to style.css file of your active WordPress theme.

That’s to say, you might define superscripts CSS style in the wp-caption-text class, so that image caption text will appears in superscripts format. Otherwise, you could also specify a different font style, text colour, underline, etc, so long the image caption text appears differently than post body font style that you’re looking for.

For example, I try to use vertical-align:top; and font-size:xx-small; to achieve superscript style in CSS code as suggested by some references. All you need is to add this block of CSS class to style.css file in your WordPress theme directory:

.wp-caption-text {
        font-size:xx-small;
        color:#66FFFF;
        vertical-align:top;
}

And, here are two samples of WalkerNews “trademark” that showing the difference of using HTML superscript tag and CSS superscript definition:

^{Using HTML superscripts and CSS style of superscripts to create WalkerNews trademark.}

Personally, I prefer superscripts style that rendered with HTML tag.

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.