×

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

Published mars 27th, 2010 by

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="https://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' => 'https://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="https://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.

Posted in Code, Open Source