Adding TimThumb To Your WordPress Theme

TimThumb PHP Script is a custom image-sizing script, that allows you to produce a cropped and sized version of an image. These are great to use along with a WordPress Magazine Theme. TimThumb has recently been released as open source, and here I will walk you through adding TimThumb to your WordPress theme.
Using TimThumb will require the use of WP Custom Fields.

01. Setting Up The Script

Lets grab the TimThumb.php source code, and save it to our theme directory.
To keep things organized, lets save it in a scripts directory in our theme.
yourdomain.com/wp-content/themes/your-theme/scripts/timthumb.php
Now create a new directory inside of scripts, and name it “cache”
yourdomain.com/wp-content/themes/your-theme/scripts/cache/
Make sure that both directories /scripts/ and /cache/ are set to 755 so they’re writable by the server.

02. Adding The Call To Our Theme Template

Depending on whether you use home.php or index.php, open the appropriate template file up, and lets find The Loop. Look for the calll to the post title, and lets insert the call somewhere below the title, or meta information.
I’m presenting you with 3 options for the call. You can pick which one might suit you best.
Option 01 – Show Image Only

<?php 
 // This will show only the image. 
 //Alter the width and height (in both places) to your needs.
?>     
<?php
  if ( get_post_meta($post->ID, 'thumb', true) ) { ?>
    <div class="postthumb">
            <img src="<?php bloginfo('template_directory'); ?>/scripts/timthumb.php?
            src=<?php echo get_post_meta($post->ID, "thumb", $single = true); ?>&h=150&w=150&zc=1" 
            alt="<?php the_title(); ?>" width="100" height="57" />
    </div>  
<?php } ?>

 
Option 03 – Show image and link image to URL of your choice. Requires
 additional custom field of “imglink”. Could be used for outgoing links,
 or linking a thumb to a full version of the image. This option would 
work best inside of your single.php template.
 
  // This will show the image and link it to anything you place into another 
custom field of "imglink".
  // Alter the width and height (in both places) to your needs.
  ?>
 
 if ( get_post_meta($post->ID, 'imglink', true) ) { ?>
 
echo get_post_meta($post->ID, "imglink", $single = true);   ?>" rel="bookmark" title="Permanent Link to the_title(); ?>"> }   ?> bloginfo('template_directory'); ?>/scripts/timthumb.php?src=   echo get_post_meta($post->ID, "thumb", $single = true); ?>&h=150&w=150&zc=1" alt=" the_title(); ?>" /> if ( get_post_meta($post->ID, 'imglink', true) ) { ?> } ?>
} ?>
 

03. Making Use of Custom Fields

 For creation and use of custom  field refer the post

How to get the custom feild value of post or page in wordpress?

Reference:http://vonlind.com/2008/06/adding-timthumb-to-your-wordpress-theme/

0 comments:

Post a Comment