Tuesday, November 10, 2009

WordPress Fast thumbnails

I have an idea on how to make fast WordPress thumbnails. There are two methods used inWordPress. One is to use a special custom field that contains the thumbnail name, this requires filling in that field for every item and also uploading the thumbnails for every item.

The second method is to use an add on program like 'TimThumb' that makes thumbnails from the images and then sends the thumbnails to your computer. Your computer then caches them so after the first time they are instantly there. The problem is that it takes time for the web server to shrink the images down so a cache of images is maintained on the server as well.

I have a third solution that works very fast. When pictures are uploaded to WordPress it sets them up with three sizes, large, medium, and small. They are 600x600 pixels, 300x300 pixels, and 150x150 pixels. They are identified by 600x600, 300x300, or 150x150 being added on to the end of the pictures name. You select the size that you want to use for your article.

Now notice that the 150x150 size is 1/16 the total size of the full 600x600 sized image. Why not just select the 150x150 image, send that as the thumbnail and have your browser shrink it to 100x100 or whatever thumbnail size that you want? The images could then be selected totally automatically and sent with very little work by the web page server. All the work would then be done by the user's computer and that would be very little work they would have to do.

The program would find the image reference in the post, then strip off the last 4 characters (usually '.jpg') then add '-150x150' on the end, then put back the last 4 characters. It sounds simple but it is only about 90% successful so far. The problems are that if the image was smaller than 150x150 to begin with then there is no 150x150 image, so it would have to go back to the original image. The next problem is that if you selected the 300x300 image. In that case the last 7 characters would have to be stripped off before the 150x150 was added onto the end.

Sorry the code listing here on BlogSpot is not turning out well. The code goes in the functions as a replacement for get_the_image that uses timthumb. In live testing this code is about 2 times faster using a database of about 500 items. However about 5 % of the thumbnails did not work, so thumbnails had to be manually created and uploaded to fix that problem. One last change fixed problems where the .JPG was capitalized in the uploaded image but was lower case in the thumbnails.

/* For Getting the Image FASTER */
//GET-POST-IMAGE1 quicker than the script by Tim McDaniels

function get_post_image1 ($post_id=0, $width=0, $height=0, $img_script='') {
global $wpdb;
if($post_id > 0) {
$sql = 'SELECT post_content FROM ' . $wpdb->posts . ' WHERE id = ' . $wpdb->escape($post_id);
$row = $wpdb->get_row($sql);
$the_content = $row->post_content;
if(strlen($the_content)) {
preg_match("/< img src\=('|\")(.*)('|\") .*( |)\/> /", $the_content, $matches);
if(!$matches) {
preg_match("/< img class\=\".*\" title\=\".*\" src\=('|\")(.*)('|\") .*( |)\/> /U", $the_content, $matches); }
$the_image_ext = substr($matches[2],-4);
if ($the_image_ext == ".JPG") {  $the_image_ext = ".jpg"; }
$the_image_num = substr($matches[2],-11,-7);
$the_image_src = substr($matches[2],0,-4);
$the_image_150 = $the_image_src . '-150x150' . $the_image_ext;
$the_image_src = substr($matches[2],0,-12);
$the_image_300 = $the_image_src . '-150x150' . $the_image_ext;
if ($the_image_num=="150x" || $the_image_num=="300x" || $the_image_num=="600x" ) {
$the_image = '< img alt="" src="' . $the_image_300 .'" width="' . $width . '" height="' . $height . '" /> ';
} else {
$the_image = '< img alt="" src="' . $the_image_150 . '" width="' . $width . '" height="' . $height . '" /> '; 
return $the_image;

I tried posting the code as a gif, but it was too small to read. Thanks to makeblogpopular.blogspot.com I now have readable code!

No comments: