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

Warning: WP_Syntax::substituteToken(): Argument #1 ($match) must be passed by reference, value given in /customers/7/5/b/pappmaskin.no/httpd.www/wp-content/plugins/wp-syntax/wp-syntax.php on line 383 Warning: WP_Syntax::substituteToken(): Argument #1 ($match) must be passed by reference, value given in /customers/7/5/b/pappmaskin.no/httpd.www/wp-content/plugins/wp-syntax/wp-syntax.php on line 383

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.

Av Morten Skogly

Creator of Things

17 kommentarer

  1. 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!

    1. 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 ;)

  3. 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 :-))))

  5. 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]

  7. 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?

  8. 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!

    1. 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 :)

  10. Warning: WP_Syntax::substituteToken(): Argument #1 ($match) must be passed by reference, value given in /customers/7/5/b/pappmaskin.no/httpd.www/wp-content/plugins/wp-syntax/wp-syntax.php on line 383

    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 :

Kommentarer er stengt.