Using TimThumb with WordPress MU

by Curtiss   |   last updated April 11, 2012   |   PHP Tutorials · Web 2.0 ·

A few days ago, I saw a post on Smashing Magazine outlining ten tips to give your WordPress blog a little more personality. While most of the tips don’t really apply to the blogs on which I’m currently working, tip number two piqued my interest.

Tip number two explains how to display a list of “related posts” at the bottom of each post, and tells you how to add icons to each of those related posts. Unfortunately, when I attempted to implement the tip on one of my WordPress MU blogs, I found that it didn’t work for a few reasons.

1. The tip uses a meta element called “post-img” which, as I’ve found since attempting to implement the tip, isn’t a standard WordPress element.
2. TimThumb doesn’t work with WordPress MU out-of-the-box.

So, I set out trying to figure out how I should implement the tip. Following are the results of my tinkering.

Post-Img Meta Element

As I mentioned, the “post-img” meta element is not something that WordPress (the regular version or the MU flavor) generates on its own. Instead, you need to create it yourself. The way I implemented post-img was to create a new “Custom Field” (on the “Add New Post” screen) called “post-img” (without the quotes, obviously).

Then, I used the WordPress uploader to upload an appropriate image to my server. Rather than inserting the image into the post, though, I copied the file URL and pasted it as the value of the new post-img custom field I created.

Then, for accessibility reasons, I created another custom field called “post-img-alt” to hold the value I plan to use in my alt tag wherever I show the post-img.

Using TimThumb with MU

I then set about trying to figure out how to get TimThumb working with WordPress MU. I posed a simple question on Twitter and got a little tip from @andrea_r. Andrea apparently runs a Web site with tips for WordPress MU users, so it was great to hear from her. Her response gave me a good place to start searching for information on WPMU functions, and after working on a few things and exchanging a little conversation with her, I found all of the pieces I needed to make TimThumb work.

For those of you that want to know why TimThumb doesn’t work with WPMU, you can read the article to which @andrea_r linked me when I told her I was working with TimThumb. I had already been working on my own solution by the time I read that article anyway, and found that my solution was a little more flexible, as it won’t break if the WPMU user changes the path to which files are uploaded for each individual blog. BinaryMoon’s article assumes that the WPMU administrator left everything set to the default parameters when the blog was set up. If you aren’t ever planning to create a WPMU blog with a custom upload path, BinaryMoon’s solution is perfectly usable. However, if there’s a remote possibility you might use a custom upload path (for instance, if you decided to use the same upload path for multiple blogs), you will need to adjust it the way I explain below.

Following is the code I developed using TimThumb with WPMU. The code below assumes that you saved timthumb.php inside of a directory called timthumb within your current theme’s directory.

<img src="<?php bloginfo('template_directory'); ?>/timthumb/timthumb.php?src=<?php echo get_current_site(1)->path; echo str_replace(get_blog_option($blog_id,'fileupload_url'),get_blog_option($blog_id,'upload_path'),get_post_meta($post->ID, "post-img", true)); ?>&amp;h=150&amp;w=200&amp;zc=1" alt="<?php echo (get_post_meta($post->ID, "post-img-alt", true)) ? htmlspecialchars(get_post_meta($post->ID, "post-img-alt", true)) : the_title(); ?>" class="alignright" style="width:200px; height: 150px;" />

Code Explanation

1. First of all, we use the bloginfo(‘template_directory’) function to pull the directory in which you’ve saved the timthumb.php file. If you’ve saved timthumb.php somewhere else on your Web server, you should adjust that accordingly.
2. Next, we echo the get_current_site(1)->path parameter, which will be the actual URL (relative to the root domain) at which your main WPMU blog is located. This will be the actual root of the path that leads to your uploads directory. As @andrea_r pointed out to me on Twitter, WPMU uses the term “site” to refer to the root of the WPMU installation, and, since it is apparently possible to install multiple “sites” within WPMU, the ID of 1 will always refer to the initial “site” you installed.
3. I’ve then written a small snippet of code that replaces the permalink URL of your uploads directory with the actual URL to your uploads directory. To do that, I’m using the PHP str_replace function to search for the fileupload_url (which is the WPMU taxonomy for the permalink version of the uploads URL) and replace it with the upload_path (which is the WPMU taxonomy for the actual path to your uploads directory; but it’s relative to the root of the WPMU installation, which is why I added the path of the root WPMU install in the first item mentioned above). That str_replace function is searching and replacing within the “post-img” meta element we set for the post (which, if you followed the steps I outlined in the first portion of this post, should be the URL that WordPress provided you when you uploaded the file).
4. The rest of the code can be completely customized for your needs. You can adjust the width and height of the image that TimThumb returns by adjusting the “w” and “h” parameters in the query string (if you adjust the width and height, you will need to adjust them in the style definition, too) and you can specify whether TimThumb simply resizes the image or if it partially crops it when it resizes it (recommended).
5. I then wrote a small snippet of code that checks to see if the post-img-alt meta element is set. If it is, we use that as the alt tag for the image. If it isn’t, we use the title of the post as the alt tag.

What Can You Do With This?

Using the post-img meta element you created and the TimThumb script as I’ve shown above, you can use the same original image to dynamically show it in multiple sizes across your blog.

For instance, you could shrink it to an icon size and use it in the related posts area as shown in the Smashing Magazine article. You can size it to a thumbnail size and use it when showing a list of blog entries (for instance, on your blog’s home page). You can then resize it again to a almost full size for use within the post itself. In fact, you could even use the TimThumb script twice in your index.php template file to show a banner-sized image on the first blog post and a thumbnail-sized image on the rest of the posts; if you were to work on implementing the third suggestion in the Smashing Magazine article (a great example of a blog using that type of home page is the dotEduGuru blog).

However, before implementing any of the suggestions in the Smashing Magazine article, you should make sure to review the code (and, hopefully you have a good understanding of PHP and WordPress functions), as there are (at the time of this writing) quite a few errors in the code examples. For instance, in suggestion number three, the author says that you can show three entries at the top, but uses $postnum<=3 (which would go from 0 to 4, rather than 0 to 3) to test and see if the post should be styled differently. Also, as someone in the comments pointed out, the author failed to increment the $postnum variable within the code sample.