Latest Announcemnent
New thread

How to Integrate Timthumb With Wordpress

Status
Not open for further replies.
RT

RT

Active Member
5,314
2009
1,571
85
Post updated on May 18 2013.
​

First step - Fetching the first image on the post:
----------------------------------------------------------------------

This code basically gives us the ability to fetch the first image in the post. So, an image (cover for example) in the post is required for this to work.

Code: 
function catch_that_image() {
  global $post, $posts;
  $first_img = '';
  ob_start();
  ob_end_clean();
  $output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
  $first_img = $matches [1] [0];

  if(empty($first_img)){ //Defines a default image
    $first_img = "/images/default.jpg";
  }
  return $first_img;
}
Second step - Integrating Timthumb into your theme:
--------------------------------------------------------------------

Go here and download the latest Timthumb script, then upload the script to your theme's folder.

http://timthumb.googlecode.com/svn/trunk/timthumb.php

Then, find the files you want to edit, for example:

--index.php
--category.php
--archives.php
--author.php
--content.php
...etc.

Note that not all themes use the same files, so that's up to you to figure out.

Add this code where you want the thumbnail to show:

Code: 
<div class="post_thumb">
<a title="<?php the_title(); ?>" href="<?php the_permalink(); ?>"><img src="<?php echo get_template_directory_uri(); ?>/timthumb.php?src=<?php echo catch_that_image() ?>&[COLOR=Red]w=100&h=100&zc=1[/COLOR]"  alt=" " width="100" height="100" /></a>
</div>
Make sure you edit the width/height to fit your needs.

h= height.
w= Width.
zc = zoom crop.

If you want to be able to fetch external images, open timthumb and find //Image fetching and caching around line 32 (as of this version) and set ALLOW_ALL_EXTERNAL_SITES to "true".

Third step - Adding some css code:
--------------------------------------

Get your style.css file and add this somewhere in there:

Code: 
.post_thumb {
    padding: 0 10px 10px 0;
    float:left;
}
You can style it as you see fit, add background, border, shadow...etc. That's it, now you have fully functional automated thumbnails.
 
Last edited:
21 comments
Hey Mr-R-T,

I removed this part cause it wasn't displaying internal images on the server...

Code: 
$host = $_SERVER["HTTP_HOST"];
$src = str_replace($host, "", $src);
$host = str_replace("www.", "", $host);
$src = str_replace($host, "", $src);
:)

Btw why did you turn off cache check?
 
Last edited:
The script works for external sources, but I found out its not working on images hosted on the server itself. Like I said above, I just removed this one:

Code: 
$host = $_SERVER["HTTP_HOST"];
$src = str_replace($host, "", $src);
$host = str_replace("www.", "", $host);
$src = str_replace($host, "", $src);

I also enabled cache handling and added some site filtering so it would be more secure :))
 
Not really a php coder so my codes are really messy :P

But you can secure it a little by storing your sites in an array and doing something like this:

Code: 
strpos($src, $mysites);

Which would return a boolean true or false if it has detected your designated sites or not...

But really I don't think this is secure as there are other ways to work around it. I'm still finding a better secure solution for the designated urls :facepalm:
 
Last edited:
here's the code in my functions.php file..

d59c3fde.png


I don't really get Step 2. is it in timthumb.php? or stil in functions.php? Added timthumb.php in my theme's folder. chmod is 644..

also I don't really get where to put this:
4cdff59a.png


Edit my Reading settings change it to summary and edited my style.css

but still not working..

any help please.
 
Please post your site Ryza.

Edit: and the second step goes in ur functions.php file.
 
Last edited:
This one:
Code: 
<div class="post_thumb">
<a title="<?php the_title(); ?>" href="<?php the_permalink(); ?>"><img src="http://yourdomain.com/path/to/timthumb.php?src=<?php echo catch_that_image() ?>&w=100&h=100&zc=1" title="<?php the_title(); ?>" alt="<?php the_title(); ?>" /></a>
</div>

Don't forget to change the path of timthumb in that code - http://yourdomain.com/path/to/timthumb.php -
 
plz check this m8 i only replaced timthumb & did nothing but its not showing img but some text

Code: 
http://reloadedcrack.com/wp-content/themes/Polished/timthumb.php?src=http://img684.imageshack.us/img684/8200/978772195950front.jpg&h=164&w=164&zc=1&q=90

it is creating thumbnail i can see it in cache folder with 777 chmod...
 
Last edited:
What about more than one thumbnail? I do siterips so there is easily 100+ videos, only Lulzimg can handle that much without timing out/error out.
 
Yea, but how do I make it generate more than one thumbnail? My posts sometimes has 50-100 video screenshots that I'd like to turn into thumbnails to speed up the page loading process.
 
Status
Not open for further replies.
Back
Top