TimThumb is a popular image resizing script that was created for Mimbo Pro - but it's never worked properly with WordPress MU, so I wanted to change that.
The reason it doesn't work is quite simple. Because of the way WordPress MU runs multiple blogs it uses a server rewrite rule to point to media uploads. This in turn means that the file paths for the images do not actually exist in the way they are used in blog posts.
People have asked me how to make TimThumb work with mu quite a few times, but now I've looked into it I have concluded that TimThumb doesn't need changing - it does what it's told to (resize images). What needs to change is the file path of the media being resized - which means we need to alter our themes to work with MU. For reference all Pro Theme Design themes, including Elemental, already have this functionality included.
When using TimThumb I would recommend using the latest version of the plugin, and passing it the absolute url of the image you want to resize - however for WordPress MU the path on the server does not match the website path, and you need to take this into account.
The first thing to do is create a function to grab the image path (and not just echoing a get_post_meta value). This will make future changes easier.
We should then do a series of things to get the correct file path for the image.
- Determine if the theme is being used on WordPress mu or WordPress normal
- Determine if the image is on the blog domain or some other domain
- Work out the WPmu blog ID
- Calculate the file location based on the gathered info
Which turns into code that looks something like this:
$theImageSrc = 'path/To/Image.jpg';
global $blog_id;
if (isset($blog_id) && $blog_id > 0) {
$imageParts = explode('/files/', $theImageSrc);
if (isset($imageParts[1])) {
$theImageSrc = '/blogs.dir/' . $blog_id . '/files/' . $imageParts[1];
}
}Pulling this together
Since most themes use a custom field to store the thumbnail image path a PHP function to calculate the image location would look something like this:
function get_image_path ($post_id = null) {
if ($post_id == null) {
global $post;
$post_id = $post->ID;
}
$theImageSrc = get_post_meta($post_id, 'Image', true);
global $blog_id;
if (isset($blog_id) && $blog_id > 0) {
$imageParts = explode('/files/', $theImageSrc);
if (isset($imageParts[1])) {
$theImageSrc = '/blogs.dir/' . $blog_id . '/files/' . $imageParts[1];
}
}
return $theImageSrc;
}
67 Responses to “How to make TimThumb work with WordPress mu” Leave a reply ›
Awesome.
I'm gonna be handing this out to everyone now. Especially the devs of themes that aren't working right. 
That's great Andrea - thanks
I've tested it a reasonable amount myself but I really hope it works for others, and would welcome any feedback you might have.
Andrea redeems his promise! I came here using his reference!
Thanks, Andrea and Ben
Hi Ben,
This is really great, thanks for posting it!
Hey Adam - let me know how you get on with this, I am sure it could do with some tweaking
Thanks a lot Ben!
I'll implement this into our themes at Woo, so there will be no more tweaking the path in thumb.php manually for WPMU users
Hey Magnus - that's great. Let me know if you need any help. Happy to help improve the process
Hi Ben, great post. By a fluke I was working on exactly this last week for a site running WPMU and using the Arras theme. I implemented a fix for it using the exactly four steps you mentioned, which I completely agree with.
The Arras theme has a library file (/wp-content/themes/arras-theme/library/template.php) that prepares calls to timthumb as well as doing other stuff. The following code is the tweaked version of the arras_get_thumbnail function, I found that three lines fixed Arras for WPMU... I think that this tweak should work for most sites:
function arras_get_thumbnail($w = 630, $h = 250) {
global $post;
$thumbnail = get_post_meta($post->ID, ARRAS_POST_THUMBNAIL, true);
if (!$thumbnail) {
return false;
} else {
// *** Added lines follow, copy these into your template.php file ***
global $blog_id, $current_site;
preg_match( "/\/files\/(.*)$/i", $thumbnail, $matches );
$thumbnail = "http://" . $current_site->domain . $current_site->path . "wp-content/blogs.dir/" . $blog_id . "/files/" . $matches[1];
// *** end of added lines ***
if (ARRAS_THUMB == 'phpthumb') {
return get_bloginfo('template_directory') . '/library/phpthumb/phpThumb.php?src=' . $thumbnail . '&w=' . $w . '&h=' . $h . '&zc=1';
} else {
return get_bloginfo('template_directory') . '/library/timthumb.php?src=' . $thumbnail . '&w=' . $w . '&h=' . $h . '&zc=1';
}
}
}
Hope that's helpful,
J
Hey James - that's great. Good that we both came up with basically the same solution as well, it confirms that I was thinking along the right lines
You should point the developer of Arras this way so that he can update the core theme to work properly.
Brilliant James. I was about to pull all of my hair out trying to get Arras to work with WPMU, but this works perfectly.
Thanks for posting it.
Hey Dan,
Did you manage to get Arras displaying thumbnails from secondary blogs on the master blog page on your WPMU installation? It doesn't seem to work correctly
thanks
Mark
Hmm.. just in time for WP 2.9's (and presumably MU 2.9) Post Thumbnail feature
Seriously though, having used TimThumb in a few projects, I know the benefits (and some pitfalls too), but others may not. Perhaps a followup post about how TT compares with 2.9's Post Thumbnail feature.
You know what - I was thinking about this as well
The new post thumbnail functionality is nice but there are too many drawbacks for (serious?) theme developers to want to use it. Nice idea though - and I will probably be using the new function as part of the theme process... but it will still tie into TimThumb in the end
That sounds great! This I want to see!
It will only be great if it works
I'm trying hard to get a handle on making this work in mu. I went ahead and added the function you gave us in 'pulling this code together' to my theme functions.php file.
Now I am trying to modify the template to work with the new function.
Here is an example of a thumbnail being put onto a page in my theme, prior to the wpmu upgrade
<img class="box" src="/thumb.php?src=ID, "thumb", $single = true); ?>&h=180&w=581&zc=1&q=80" alt="" />Here is my 'best guess' at what it now should be with the new function from my theme's functions file, although it does not seem to work.
<img class="box" src="/thumb.php?src=&h=180&w=581&zc=1&q=80" alt="" />
Could someone please let me know what I am doing wrong, and why I am wrong so that I can learn from this?
thanks
code did not paste in above properly, let me try another route with spaces added where they should not be to see if this blog allows it to show up right.
<img class="box" src="/thumb.php?src=ID, "thumb", $single = true); ? >&h=180&w=581&zc=1&q=80" alt="" />
my moded vs.
<img class="box" src="/thumb.php?src=ID, "thumb", $single = true); ? >&h=180&w=581&zc=1&q=80" alt="" />
Ok, I give up trying to paste in code here as it keeps changing what I am putting in, and I can't edit my comments.
I uploaded a txt file http://anointed.net/downloads/timthumb.txt with the functions I am using.
If someone could take a peek and give me some direction, I would really appreciate it as I am still trying to learn php.
thanks
please, can anyony explain. where to insert the code? (filename)
thx, peter
Hi Peter - unfortunately "where" you place this code will differ from theme to theme, so I can't tell you where specifically. I would recommend asking the original theme author if they will help you integrate this as they will know how to do it the best.
Hi,
I've been working with James on the above post. We successfully got the script working on MU. Came across another problem though
http://trashedmag.com/members/blog/category/recent/
It's pulling in the posts from the blogs to the main page fine, but the thumbnail script doesn't seem to work in this instance. Does anyone have any ideas on how to fix this problem
thanks
Mark
Trying to get this to work on a site that I am developing. Rather then using a custom field, I am using the awesome catch_that_image function. Having a few issues, wondering if anybody has thoughts on how to get my code to work...
Here it is on PasteBin
Thanks!
Thanks that will come in handy.
Hey Ben! Thanks for this! I've been struggling for timthumb to work on wpmu and it finally does!
I implemented this for the The Morning After theme, because the plugin it natively uses totally meses up wpmu to the point that when activated the Dashboard is completely unaccessible! So I tried using timthumb and I noticed the url problem.
I had to edit your function only slightly:
$theImageSrc = '/wp-content/blogs.dir/' . $blog_id . '/files/' .
I have been working two weeks to get proper Thumbnails on my site!
Thanks again!
Hi Alec, glad it works for you. And thanks for the tip for getting TimThumb to work on your site. I can see that being useful for other people as well.
Alec, I'm also struggling with timthumb on my wpmu site. Could you tell me what previous code on your theme you had to replace with the function Ben outlined?
Hey, Peter. I changed the single line I posted on my previous comment.
A lot of people have trouble getting timthumb to work. The best way to go is to identify first if the script itself is not working or if the problem lies with your hosting company.
1. Put timthumb on your root folder. Create the cache folder.
2. Copy a random image to you root folder.
3. Now call the image from your browser using timthumb http://www.domain.com/...&zc=xxx&h=xxx&w=xxx
If it works but it doesn't work in your theme it's because of wpmu's strange url system. That's where Ben's code comes in handy! At first it still didn't work but it was only a question of adding "/wp-content" to the full path. See my previous comment.
I am calling the thumbnails in my theme thus:
<img src="/timthumb.php?zc=1&w=470&h=175&src=" />I am with Hostgator. When I first used timthumb with the Theme "Magazeen" it worked. Then I switched to Mimbo, the theme is was actually developed for and it stopped working. Odd. That was with the "normal" wp, not wpmu! Then I decided to go for the theme "The Morning After" with wpmu but using timthumb instead of Post Thumb Revisited. With Ben's code - thanks again, Ben! - and this advice http://code.google.com/...imthumb/issues/detail?id=8#c16 my problems were solved!
Ben,
Could you clarify - where do I put the followings: (Do I have to replace something else in the process?)
"function get_image_path ($post_id = null) {
if ($post_id == null) {
global $post;
$post_id = $post->ID;
}
$theImageSrc = get_post_meta($post_id, 'Image', true);
global $blog_id;
if (isset($blog_id) && $blog_id > 0) {
$imageParts = explode('/files/', $theImageSrc);
if (isset($imageParts[1])) {
$theImageSrc = '/blogs.dir/' . $blog_id . '/files/' . $imageParts[1];
}
}
return $theImageSrc;
}"
Peter, you have to copy that code into your theme's functions.php file.
Some code in my last post wasn't rendered correctly. I call the thumbnails thus:
Ben, if the code is still not correctly rendered, could you edit my comment? Thanks.
Hi Alec,
Thank you for suggesting that test.
It does indeed work on my server, but I can't get it to work in my theme (Magazine Basic - WPMU)
This is the code I added to function.php
function get_image_path ($post_id = null) {
if ($post_id == null) {
global $post;
$post_id = $post->ID;
}
$theImageSrc = get_post_meta($post_id, 'Image', true);
global $blog_id;
if (isset($blog_id) && $blog_id > 0) {
$imageParts = explode('/files/', $theImageSrc);
if (isset($imageParts[1])) {
$theImageSrc = '/wp-content/blogs.dir/' . $blog_id . '/files/' . $imageParts[1];
}
}
return $theImageSrc;
}
Where do I put bit?
Hi Alec,
Thank you for suggesting that test.
It does indeed work on my server, but I can't get it to work in my theme (Magazine Basic - WPMU)
This is the code I added to function.php
function get_image_path ($post_id = null) {
if ($post_id == null) {
global $post;
$post_id = $post->ID;
}
$theImageSrc = get_post_meta($post_id, 'Image', true);
global $blog_id;
if (isset($blog_id) && $blog_id > 0) {
$imageParts = explode('/files/', $theImageSrc);
if (isset($imageParts[1])) {
$theImageSrc = '/wp-content/blogs.dir/' . $blog_id . '/files/' . $imageParts[1];
}
}
return $theImageSrc;
}
Where do I put THIS bit?
img src="/timthumb.php?zc=1&w=470&h=175&src=" /
Hi Peter - sorry I didn't respond earlier. The code you have posted looks like it should function correctly. Do you have a link I can look at to see if I can suggest anything else?
Thanks Alec,
I have isolated the issue and it is definitely timthumb having trouble working with WPMU. As Ben stated above, the more correct view is that the theme author did not design it to work for WPMU. I followed your suggestions Alec but still unable to get the theme to work. I think my php is not good enough to fix this. After 6 days, I'm cutting my lost and looking for a different theme. Thanks again for all your time and help.
I'm a design and not a developer but I've been asked to work with the Arras theme and I can't get the Timthumb.php to work. I'v tried everything and I'm slowly loosing my marbles! If there is anyone that could help I would be grateful. The site is still work in progress and hasn't a domain yet. So if you can contact me directly I will pass the access details on by mail.
If I can't get the site working I'm going to need to change themes which at this stage isn't the best solution. Or if you can tell be the easily way to disable this function, that would also be great.
thanks nik
Hi Nik - There is a contact page in the footer of my site
I tried visiting your site but it seems to require a login to view anything. If you can send me a working link to your website and an ftp login then I should be able to get TimThumb working really quickly.
Hi Ben, sorry to post comment bunch like this. regarding last comment on this post, my timthumb script cannot use full domain url (starting from http). if src=/wp-content/ then it's fine. but if start from http://domain.com/wp-content/uploads/image.jpg it will return no image. i'm googling around for this for whole day today. thanks for help. I really appreciate your time.
Not to sound like a dick, but it sounds pretty self explanatory to me. If your using custom fields simply remove domain.com from the field, ie. /wp-content/uploads/image.jpg
Or alternately, not positive as I use the method above, add your domain to "$allowedSites" on line 546.
Not to be a dick but your self explanatory solution doesn't work for WPMU subdomains since each blog is created in a different directory folder such as: wp-content/blogs.dir/1/files/2010/01/logo-300x67.jpg which can be a real pain in the ass if anyone expects their computer illiterate customers to upload an image and then figure out what blog/year/month folder their image resides.
I've been working on trying to get this to work with a theme all day long with no luck so far.
Basically I am trying to write a function that will grab the first image in a post, so that I can reference that function within the template for timthumb to make a call to it.
Could you please provide a simple function that will search a post for the first image, and return a url that can be used with timthumb?
I did manage to use your function to successfully grab the thumbnail if it's defined as a custom field, but would like to expand that to simply search the post for the first image instead.
that is where I keep getting stuck.
thanks so much for your time
I should add that I am using wpmu
How would I go about adding this to "WooTube Theme"? I have tried numerous times and failed.
Here is the code:
function woo_get_image($key, $type, $width = 0, $height = 0, $class = "thumbnail", $quality = 90) {
global $post;
$custom_field = get_post_meta($post->ID, $key, true);
if($custom_field) { //if the user set a custom field ?>
<a title="Permanent Link to " href=""><img src="/thumb.php?src=&h=&w=&zc=1&q=" alt="" class="" />
<a title="Permanent Link to " href=""><img src="" alt="" class="" />
Hi,
I'm ussing news theme from studiopress. I have a wordpress MU installed on my root folder as subdirectories.
The news theme has a file named timthumb.php and in the main page has this code:
have_posts()) : $recent->the_post();?>
ID, "thumb", true) ): ?>
<a href="" rel="bookmark"><img class="thumb" src="/tools/timthumb.php?src=ID, "thumb", $single = true); ?>&h=&w=&zc=1" alt="" />
Could anyone help me please please, i'm willing to pay something (my budget is tight) to fix this,
Thanks,
Link bait. I ended up using the WP plugin Get This Image... Not the solution I wanted.
Looking at it Ben, I'd like to point out that it outputed this URL, which is a broken image, if you visit it, it says "file not found /resources/2009/12/Kerli1226-213x300.jpg"
http://fairhaven.tv/...0.jpg&w=100&h=50&zc=1
Okay, I take that back. I discovered something interesting to point out.
I looked around for the cache directory that stores these thumbnails, figured out it was set to 755. It is located under [theme_directory]/cache - I chmod the directory to 777, BAM, works. Why does it not work with 755? How can I make it so that it works automatically without having to chmod the directory every new theme???
It's a security issue. 755 is more secure the 777. You are effectively limiting write privileges.
hello Ben! i would like to ask a question. im using the infamous original premium news wordpress theme. the problem is about the infamous FEATURED feature... not showing the image and such. i used the timthumb script, it worked on my offline wordpress site. But its not working on my online wordpress site. my host is 000webhost. could it be about the host? thanks!
What if the theme I'm using (studiopress' agent theme) uses several different custom fields?
The "thumb" field is used for the home page (I have this working with the code here), but the listing page uses a custom field and each is numbered:
_photo_1_large
_photo_2_large
_photo_3_large
_photo_4_large
How can I incorporate all of these fields into the code? If I take the line:
$theImageSrc = get_post_meta($post->ID, "thumb", $single = true);and change it to
$theImageSrc = get_post_meta($post->ID, "_photo_1_large", $single = true);then that particular custom field works. So (because I'm a terrible coder) how do I edit this code to be able to work with multiple fields?
Whew, thanks for even reading this far!
I'd change the get_image_path function to accept some extra parameters
get_image_path ($post_id = null, $fieldname = 'Image') {
and then change the get_post_meta command
$theImageSrc = get_post_meta($post_id, $fieldname, true);
then you can tell each area which custom field to use
Thanks for the reply! I'm stoked to get a response.
I've updated the get_image_path as you specified and indeed when I set the $fieldname to any of the custom field names I get the desired results...
But alas, I am still too ignorant to see how that allows me to do multiple items. Can I create an array for $fieldname? Should I simply specify the custom field somewhere else in the code? I will find the answer to this! Of course, any more guidance you can offer is much appreciated.
-masonjames
I am afraid I don't know how the theme is made so without seeing it being used I can't really suggest any more.
What I would do is look through the templates for where the thumbnail is being inserted and then call the get_image_path function in the correct location changing the fieldname depending upon what is required.
Thanks for sharing this... Finally it's works on my MU blog.
Hi Ben,
Any chance of doing a video tutorial? The lingo is all new to me so being able to see someone actually go through the motions is a big help.
Thanks!!
Courtney
I don't think this is practical. Every theme is different so making the customisations for one theme would not work in another theme so any video would have to be done for every theme. I should think most programmers will be able to work through the description I posted above and if there is anything in particular that's not clear just let me know and i'll see if I can clarify what I mean.
To anyone who can help fix timthumb:
Here is the php code that calls timthumb:
<img src="/timthumb.php?src=ID, "image_value", true ); ?>&w=320&h=320&zc=1" />
Here is the file post-image.php:
get_the_ID(),
'post_type' => 'attachment',
'numberposts' => 1,
'post_mime_type' => 'image',)))
{
foreach( $images as $image ) {
$attachmenturl=wp_get_attachment_url($image->ID);
$attachmentimage=wp_get_attachment_image( $image->ID, $size );
$imagelink=get_permalink($image->post_parent);
echo ''.$attachmentimage.apply_filters('the_title', $parent->post_title).'';
}
}
}
function getimage($size=medium) {
if ( $images = get_children(array(
'post_parent' => get_the_ID(),
'post_type' => 'attachment',
'numberposts' => 1,
'post_mime_type' => 'image',)))
{
foreach( $images as $image ) {
$attachmenturl=wp_get_attachment_url($image->ID);
}
}
return $attachmenturl;
}
?>
Can someone please help me. I am relatively new to wp & with my theme, i am running into this issue--the thumbnails wont appear because i am using wpmu. I know this post is the solution, but i just can't work it out into the code. any specific guidance would be amazing. really, all i want is to get my site running. i need to know where exactly the code goes and what needs to be replaced. sorry for being wp illiterate, but im trying to learn.
thanks so much. any help would make my day =)
I am using this with wpmu just fine, but I just ran into an issue I can't seem to solve.
My primary install is xyz.com using subdirectories, so I would have an account 123.xyz.com
Doing that works perfectly.
Where I run into problems is when I use the domain mapping plugin. This results in 'remote host not allowed' errors.
example:
http://cpnc.org/
Notice the thumbs do not show. Yet if you open the thumbnail image in another window you get the error about remote hosts not allowed.
Now if I change the url to the 123.xyz.com instead of the mapped domain, then the image shows up.
What is the solution to this?
(what is really strange is it was working perfectly until today. The only change I made was adding in the members plugin. Even uninstalling the plugin makes no difference, so really I have no idea why it just stopped working all the sudden)
thanks
To add to my comment about domain mapping above:
If I try to add in the 'mapped domain' to the timthumb file, then it tries to create the thumb in the directory which of course does not work, because the file is already on the server.
Basically the problem is only with mapped domains in wpmu
Looking forward to getting this to work
Anyone get this working with Woos Newspress theme?
Just wanted to thank Ben by the way. Very saddend that woo (Woothemes)would not help in this case :'(
Using "premium news" wootheme.
What am I missing? I added the code from this blog to the Functions.php file.
I then changed the code in the default page
from:
<img src="/thumb.php?src=ID, "image", $single = true); ?>&h=57&w=100&zc=1&q=90" alt="" class="th" />
to:
<img src="/thumb.php?src=&h=57&w=100&zc=1&q=90" alt="" class="th" />
Yet now it outputs
"no image specified"
What am I missing?
I noticed the issue when I moved over and all thumbs were grey blocks (they still are). When however I rightclick on one and then choose "view image".... it downloads timthumb.php. I mean really the php file itself which then resides on my harddisk.
See: http://farmvillechicken.com unless you read this after a day then hopefully I have coded something. I have posted a thread in the forum of the theme I am using hopefully someone will create an update for it: http://swiftthemes.com/...hp?435-TimThumb-php&p=1460
THANX for the blogpost! took me a long time before I found this post, but definitely worth reading the post and the comments.
Ben,
Thanks for this wonderful plugin. I have managed to integrate it very successfully with my theme, Suffusion.
However I am facing a few hiccups with getting it to work with MU. The point where I believe it is failing is the check for $blog_id, I believe. Based on your code, if we are on MU only then $blog_id will be existing and non-zero. However when I try this with my regular WP installation it returns a value of 1. Ideally this wouldn't have been a problem, because the subsequent condition, exploding $theImageSrc on the "/files/" wouldn't work in a WP installation, so the file source will remain untainted.
Where I am facing a problem is that I had changed the back-end file paths in the actual script to write to the "uploads" folder. So my "cache" and "temp" folders are both in "uploads" in a WP installation. I guess you can see where this is going - since the paths on my back-end are different from what you have in the script by default, I have to change the path if the installation is of MU. Unless there is a foolproof way of determining if the installation is a WP or a WPMU installation, this cannot be done.
To cut a long story short my question is whether this can be conclusively determined? Or should I wait for version 3.0 of WP? I did see your post on WPTavern, where you too were looking for a concrete method to draw the distinction between WP and MU.
Thanks,
Sayontan.
As far as I am aware it does work in that format. This problem only occurs if the theme is poorly developed. If you use my own theme, Elemental, then the image urls are automatically detected and the computer illiterate clients don't need to do anything besides upload an image.
can you help get it to work for this theme? fullscreen wordpress theme:
http://graphpaperpress.com/...ullscreen-wordpress-theme/