defsounds

http://revisedagain.com/wp-content/themes/r

.Htaccess With WordPress & TimThumb

Posted on March 23rd, 2011 .Htaccess With WordPress & TimThumb

The problem: A highly visited site needs to be light and fast–which sometimes means implementing any optimization you can.

The site which is constantly on the front page of Digg–is very image heavy and runs on wordpress so loading times and server loads aren’t ideal. After some ridiculously high loads, the host enforced a rate limit on the server and suggested:

We are seeing traffic like this in the logs:

“GET /wp-content/themes/domain/tools/timthumb.php?src=http://www.domain.com/wp-content/uploads/2010/04/Petra-Cubonova-Swimwear-8-595×660.jpg&h=90&w=90&zc=1

As you can see, the ? is being used. If the ? is used then the Varnish caching is disabled. This causes a highly inefficient repetitive download of the same content directly from the storage pools. Additionally, after the question mark, full http://www.domain.com/…  paths are used. This is also highly inefficient, as httpd has to resolve that dns back to itself. Relative paths should be used instead.

Modifying your code to utilize caching and using relative paths will significantly increase your site efficiency. If the way the links are handled is not modified, this issue will certainly happen again the next time you have content that is posted on a site like digg.com, which is what occurred this time.

So there it is, we need to optimize our code to use relative URLs when linking to images and bypass the variable in the Timthumb script.

Relative URLS

WordPress by default doesn’t allow relative URLs. So we’ll just create a quick function to strip the url from the image links.

 

  
function makerelative($content) {

$content = str_replace(get_bloginfo('url'), "", $content);
return $content;
}

 

This takes the $content variable and removes your blog’s URL from it. Once you place this in your theme’s functions.php, you can fire it up

  
<?php echo makerelative(get_post_meta($post->ID, "thumb", $single = true)); ?>

It’ll echo out the relative path to the image.

1st problem solved.

.Htaccess

WordPress uses .htaccess for SEO friendly URLS. However, when it’s turned on–any other custom rewrite rule you may have gets ignored.

What I want to achieve is, firing up Timthumb via a custom dynamic URL. For example..instead of timthumb.php?src=images/hi.jpg ..I’d like to have it fired up with a friendly URL. Ie. http://domain.com/resizeme/500×600/hi.jpg

Here’s Our rule to do that:

Options +FollowSymLinks
RewriteEngine On
RewriteRule  /(.*)x(.*)/r/(.*) wp-content/themes/themename/timthumb.php?src=http://revisedagain.com/$3&h=$2&w=$1&c=1

I’ll explain what that is in a sec.

That works fine, without wordpress’s custom URLS on.  However, with wordpress rewrite:

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ – [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>

It’s a no go. So how can we combine the two?

We can’t fire this up from the root of the installation..so we’ll create a folder that’s exempt from all of wordpress’s rules. Let’s call it resize.

Next we upload Timthumb.php in there and create a folder called Cache, CHMOD it to 777.

Then we can combine our rules:

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_URI} !^/(resize) [NC]
RewriteRule . /index.php [L]
RewriteRule ^resize/(.*)x(.*)/r/(.*) resize/timthumb.php?src=http://domain.com/$3&h=$2&w=$1&c=1
</IfModule>

After the last Rewritecond (Rewrite continued) that wordpress creates, we toss in our own ..right before the index.php rewrite rule:

RewriteCond %{REQUEST_URI} !^/(resize) [NC]

This tells wordpress that it’s rules apply to everything except our folder in the root of the wordpress installation called resize.

Then we create our rule and add our folder before all the variables and shit that’ll drive you nuts if you even began to think about it.

RewriteRule ^resize/(.*)x(.*)/r/(.*) resize/timthumb.php?src=http://domain.com/$3&h=$2&w=$1&c=1

This rule tells the server that

http://www.domain.com/resize/160×130/r/wp-content/uploads/2011/03/pic.jpg

should be interpreted as

http://www.domain.com/resize/timthumb.php?src=/wp-content/uploads/2011/03/pic.jpg&h=130&w=160&c=1

Hint: each (*.) corresponds to a $ in the latter part in order that they appear. IE. (*.)(*.) = $1 $2 respectively.

The last part was to go through the theme files and change the timthumb.php link to our new relative urls.

9 Comments for .Htaccess With WordPress & TimThumb



La migliore alternativa a TimThumb ? Ridimensionamento immagini con PHP, Mod Rewrite e Cache » Italia SW

[...] stati “richiamati” dal proprio hosting provider.Risposta parzialeJay di Revised Again (LINK) presenta una mini funzione da inserire in functions.php che, assieme a delle istruzioni da [...]

Yohay

Thanks for your tips. It worked like a charm on my site!

hearing aids

Great blog, how about links exchanging? Please contact me asap, Thanks.

vietpha

My blog use thesis theme. How to rewrite timthumb url for seo !
Please help me

Fask

great, very interesting to use relative URLs, to make more efficient the load on the server. Thank you.

vietpha

I use thesis theme, how to write function in custom_function.php ?
And i want to url structure: http://vietseo24h.com/wp-content/upLoads/{Year}/{month}/image-name.jpg

admin

which function?…the url Structure–you should be able to set that in the permalinks settings within the wordpress admin

Rohit Sharma

Can you tell me where I have to create the resize folder and Cache folder and I have to keep the timthumb in Chache folder also when it is already there in the theme folder ?



Leave a comment