How to make the Get The Image WordPress plugin to work with TimThumb and Related posts

I’ve been using the wordpress plugin ‘Get the Image‘ by developer Justin Tadlock for a while. ‘Get the image’ does a fantastic job searching through posts looking for images, so you don’t have to add thumbnails manually, but it always bothered me that it downscaled images in the html instead of scaling and cropping them properly. I also use the lovely timThumb script on my blog, to scale, scrop and cache images on the fly, and I wanted to find a way to combine the two scripts into one.

The wordpress community is so huge, so I was certain that someone, somewhere, would have written about this, but to my surprise I couldn’t find any solution to this that didn’t involve writing a new plugin or adding code to functions.php. But I did find alot of people looking for the same as me.

But after taking a look at the source code to ‘Get the image’, I found the solution myself, and to my great joy there is no need to modify the plugin, which would have meant that it would break every time I’d upgrade ‘Get the image’. The trick is to use ‘format’ => ‘array’ to make ‘Get the Image’ return an array instead of a finished img tag. This option is not mentioned in the readme included with the ‘Get the Image’ plugin, for some weird reason, but you can see it defined in the code, defaulting to ‘format’ => ‘img’ . When returning the array, you can get hold of the url to the image, and with that you can build a you timthumb url.

After a few minutes of fiddling, I came up with the method I’m now running in the sidebar of pappmaskin.no to display the last 5 posts posted in my photography category (cat=3), and I wanted to share it with people looking for a fix. Here is the code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<div class="sidefeature">
 
<?php $recent = new WP_Query("cat=3&showposts=5"); while($recent->have_posts()) : $recent->the_post(); ?>
 
<div class="sidefeatureleft">
 
<?php if ( function_exists( 'get_the_image' ) ) 
 
//echo "test";
$get_the_image_as_array = get_the_image( array( 'image_scan' => true, 'format' => 'array', 'width' => 220 ) ); ?>
 
<?php //remove // on next line to output the array if you want to see what data you have avalable
//print_r($get_the_image_as_array); 
?>
 
<a href="<?php the_permalink(); ?>"><img src="http://pappmaskin.no/wp-content/plugins/wordpress-popular-posts/scripts/timthumb.php?w=220&amp;zc=1&amp;src=<?php echo $get_the_image_as_array[url]; ?>" width="220" alt="<?php echo $get_the_image_as_array[alt]; ?>"/></a>
 
</div>
 
<div class="sidefeatureright">
<a href="<?php the_permalink(); ?>" rel="bookmark"><?php the_title(); ?></a>
 
 
<br />  <br />                       
</div>
 
  <?php endwhile; ?>
</div>

Bonus: How to make the Get The Image WordPress plugin to work with Related Posts (YARPP)

Once you have Get The Image up and running, you can do even more interesting things, like adding thumbnails to your related posts. You can see it in action on the bottom of this article. There are numerous plugins for listing related posts, but I’ve been using Releated Posts (YARPP) off and on for a few years, and think It works greate. It doesn’t have support for thumbnails out of the box, but that is easy to fix, especially if you have Get the Image and timthumb up and running.

YARPP support templates, so create yarpp-template-post-thumbnail.php and put it in your theme folder. Then add the following code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<?php /*
Pappmaskin Template
Author:Morten Skogly
*/ 
?>
 
 
<?php if ($related_query->have_posts()):?>
 
<br/>
<h4>Related posts</h4>
<div class="related-posts">
	<?php while ($related_query->have_posts()) : $related_query->the_post(); ?>
	<div class="related-post">	
 
 
<?php if ( function_exists( 'get_the_image' ) )  {
 
//$get_the_image_as_array = get_the_image( array( 'image_scan' => true, 'format' => 'array', 'width' => 310 ) ); 
$get_the_image_as_array = get_the_image( array( 'format' => 'array' ,'default_image' => 'http://pappmaskin.no/wp-content/themes/journalist/images/related-default-126.png')  );
//print_r($get_the_image_as_array); 
 
?>
<?php 
if ($get_the_image_as_array[url]) { 
?>
<a href="<?php the_permalink(); ?>"><img src="/thumbs/?src=<?php echo $get_the_image_as_array[url]; ?>&amp;w=140&amp;h=94&amp;zc=1" width="140" height="94" alt="<?php echo $get_the_image_as_array[alt]; ?>"/></a>
 
<?php
 
}
 
else {
?>
 
<a href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><img src="http://pappmaskin.no/wp-content/themes/journalist/images/related-default-126.png" alt="<?php the_title(); ?>" width="126" height="54"/></a>   
 
<?php
}
?>
 
 
 
 
<?php } else { ?>
 
			<?php } ?>
			<a href="<?php the_permalink(); ?>" rel="bookmark"><?php the_title(); ?></a>
			</div>
 
	<?php endwhile; ?>
 
<br style="clear: left; "/>
</div>
<?php else: ?>
<?php endif; ?>

Issues and things to be aware of

1. You can put timthumb anywhere on your server, but I noticed that it came bundled with the ‘WordPress popular posts‘ plugin. I use that plugin in the sidebar so instead of installing timthumb again, I simply point to the same script. ‘WordPress popular posts’ is a really useful and well written plugin, and it also has the same functionality as the ‘Get the image’ plugin buildt in.

2. Timthumb can only scale images that are stored on the same server, for security and cpu reasons. There are other scripts out there for sucking in external images, scale and cache them, like Autothumb, but I haven’t had time to look at it yet.

3. Because timthumb demands an image stored on the same server, and because of the order ‘Get the image’ scans for images in a post, I ran into a litte problem with the default thumbnail size in the WordPress media settings. I wanted the images in the sidebar to be 220 pixels wide, but because I had set the wordpress thumbnail size to 183px wide the images that are show in the sidebar are too small. Get the images automatically looks for images attached to a post, and when I upload an image, wordpress automatically scales a thumbnail of it set to 183px wide, so that is the image ‘Get the image’ delivers. To solve this I’ve changed the media settings on my blog to generate an image that is 220 px, but that means I have to go in manually and eighter upload a new image (and remove earlier images), or add an image url to a customfield (the default custom fields is “thumbnail” I believe, but you can define your own).

4. I believe timthumb caches 200 images and then start deleting older thumbs. But ‘Get the image’ doesnt seem to have any methods to reduse the stress on the server. That means that every time you list 5 posts like I do, you have to scan the posts again and again and again, every time someone visits your blog, and if you use the plugin in many places in combination with timthumb, chances are that you have to scale the thumbnails over and over again as well. I have found a couple of people who’ve made a fix for this, storing the url to the thumbnail as a custom field, and setting up get the image to scan for this customfield first. if found, there is no need to scan any further. I think I will look into improving the logic there at a later date.

  • http://www.twitter.com/kathy_darling Kathy

    As far as point 2- TimThumb now lets you resize images hosted on external servers. In combination w/ a preg_match I will be using it to resize youtube thumbnails.

    And for point 3 – in WP 2.9 you can define extra thumbnail sizes in your theme. I believe you can add as many as you want and then call them wherever you want. this post explains it quite well:
    http://markjaquith.wordpress.com/2009/12/23/new-in-wordpress-2-9-post-thumbnail-images/

    while Get-The-Image is pretty brilliant, I am hoping to be able to rely on the built in WP functionality… with timthumb for youtube thumbs. But it is nice to know, thanks to your post, that I can make the 2 play nice together.

    Cheers!

    • http://pappmaskin.no Morten Skogly

      Thanks for the info! I wasn’t aware that timthumb now can scale external images, that is extremely useful.

      I’m testing the new wp post thumbail feature on another blog and I have found two issues: first that you seem to manually have to select which image you want to use as a thumbnail, and the other is that sometimes the age you select isn’t scaled at all physically, only in the HTML. I didn’t dig too deep into this, but it seemed to me that I had to upload a new age into an old post before it allowed it to be scaled.

      I need to research this more but get the image does what I need so I’m in no hurry ;)

  • http://www.twitter.com/kathy_darling Kathy

    well i havent run into that issue yet as i am just getting started with it. but you make a good point… if it ain’t broke! and while this post:

    http://hardiannazief.com/12/create-thumbnail-from-offsite-image-using-timthumb-beta/

    does a great job of explaining how to use timthumb to catch an image… get-the-image already does that. perhaps i spoke too soon about abandoning it.

  • Denis

    Hi people :-)

    Our website is 100% made from syndicated posts, all automatically, without any human action… So you can imagine how tough it is to handle images, thumbnails, etc, as articles come from “all over”.

    Well, timthumb + our own modified version of a kind of “get the image” script (that we integrated in the functions.php file), and boom! it works :-)

    Look here :

    http://www.chretiente.info/

    Three things, now :

    1. Timthumb with remote images is still in Beta stage, as far as we know).

    2. It’s not such a problem, as scripts like W3Cache or HotLinkedImageCacher allow to copy automatically the images on your local HDD.

    3. There is a patch for Timthumb that allows to CHOOSE the position of the cropping, here :
    http://blog.studio-xl.com/timthumb-cropping-mod/
    Implementing it is our next step, to stop cutting people’s heads in our thumbnails :-))))

  • Denis

    One more thing.
    You may want to read this :

    http://www.speedingupwebsite.com/2010/01/26/statify-dynamic-images-from-timthumb/

    It’s a side-topic, but it will improve your website speed for sure if you use timthumb.

  • http://tarpontech.net Adam

    Thank you for this!
    Here’s a child-theme friendly version, just swapped out your static path to timthumb.php…

    [code]
    true, 'format' => 'array' ) ); ?>

    <a href=""><img src="/includes/plugins/timthumb.php?w=220&zc=1&src= " alt=""/>
    [/code]

  • Pingback: Tarpontech - Computer Repair - Web and Graphic Design - Cape Coral - Ft. Myers - Pine Island | Get-the-Image, TimThumb, and Wordpress 3.0 Blog Networks

  • Michael

    Have you ever looked at Smart Image Resizer? I hear it is better than TimThumb. It even sharpens images automatically. http://shiftingpixel.com/2008/03/03/smart-image-resizer/

    Would love to know your opinion on TimThumb vs. Smart Image Resizer.

    • http://pappmaskin.no Morten Skogly

      Havent’t tried that

  • Kathy

    Months later I find myself returning to your post to in fact use timthumb w/ get_the_image. i am stumbling on the link however:

    $get_the_image_as_array[link]

    when I print_r($get_the_image_as_array) there is no link attribute. only src and url which are identical thanks to a line of code setting them equal to one another. i can get the link if i swap

    $out['url'] = $out['src'];

    with

    $out['url'] = get_permalink( $post_id );

    am i missing something obvious?

    • http://pappmaskin.no Morten Skogly

      Hm, which version of gettheimage are you running? I havent upgraded to the latest version, perhaps there have been some changes to it?

    • http://pappmaskin.no Morten Skogly

      The link is gone, use get_permalink() instead!

  • Kathy

    Figured out that Justin must’ve eliminated that from version .5 b/c it is sort of redundant and can be found a number of other ways. serious moment, but still. thanks!

    • http://pappmaskin.no Morten Skogly

      Hm, as I thought. Well, please tell me if you find another way to do this, I’ll just keep the old version of the plugin for a while, kind of busy at work these days :)

  • Kathy

    this works for me:
    http://pastebin.com/iurC1hkX

    and then i just call it w/ height and width parameters

    timthumb_thumbnail( ‘width’ => ’183′, ‘height’ => ’100′, );

  • http://www.gamedware.com/ dd

    Hello, thanks for your tips, I was using another function (http://pioupioum.fr/outils-astuces/wordpress-recuperation-avancee-images-article.html) but I was having problems because it gives me the first image uploaded and not the first image in the content. However your tip didn’t work for me, so I decide to make a little custom function and to share it for others if needed. The problem I encountered was the absolute path of the url, I need to have the relative path of the url image, so this is the custom function I inserted in my function.php :

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    
    function gd_get_image1 ($gd_w, $gd_h) {
    if ( function_exists( 'get_the_image' ) )
    							global $post, $posts;
    							$get_the_image_as_array = get_the_image( array( 'image_scan' =&gt; true, 'format' =&gt; 'array' ) ); 
    							$img1 = $get_the_image_as_array[url]; 
    							$url = get_bloginfo('url');
    							$img1 = str_replace($url, '', $img1);
     
    							echo '
    							" alt="'.$get_the_image_as_array[alt].'"/&gt;
    							';
    }
    ?&gt;

    Now you can use it anywhere, change the width and height, this is the call :

  • http://www.gamedware.com/ dd

    Sorry, this the pastbin url for the function,
    http://pastebin.com/AF6HuC06