WordPress: Automatic thumbnails of blogger or picasa hosted images

Migrating from Blogger to WordPress was fun! Getting the thumnails working was one problem though. Thanks to TimThumb Beta script, this problem is s-o-l-v-e-d.

You ask me what what’s new with TimThumb beta? By, default wordpress doesn’t make thumbnails of offsite images. This script can make thumbnails (server side resizing) of offsite images. And…don’t worry, no one can misuse it because it has the Allowed sites feature.

Anyways, starting my tutorial. The points in green is the explaination. Everything else for the newbies to follow.

Also read: [WordPress] How to publish pictures on Picasa Web Albums using Windows Live Writer

1) Download this (Right click –> save file). Rename it to “timthumb.php”. Upload timthumb.php to your template directory (wp-content/themes/yourtheme). I have included all the blogger image hosting domains in the allowed list. Plus, I have fixed a little bug.

You can actually upload it anywhere you want but, you’ll have to make subsequent changes in the following code.

1) Login to your WordPress Dashboard –> Appearance –> Editor. You’ll  need to edit some files here.

functions.php : Now, add this just after <php tag

// retreives image from the post
function getImage($num) {
global $more;
$more = 1;
$content = get_the_content();
$count = substr_count($content, '<img');
$start = 0;
for($i=1;$i<=$count;$i++) {
$imgBeg = strpos($content, '<img', $start);
$post = substr($content, $imgBeg);
$imgEnd = strpos($post, '>');
$postOutput = substr($post, 0, $imgEnd+1);
$image[$i] = $postOutput;
$start=$imgEnd+1;

$cleanF = strpos($image[$num],'src="')+5;
$cleanB = strpos($image[$num],'"',$cleanF)-$cleanF;
$imgThumb = substr($image[$num],$cleanF,$cleanB);

}
$space = array("%20", "+");
if(stristr($image[$num],'<img')) { $yo = str_replace("?imgmax=800", "", $imgThumb); } /*Removes the imagemax=800 slug from the blogspot image URL*/
$more = 0;
return $yo;
}
//retreive image ends

This code creates a function that pulls out the first image from the post (Automatic!). Thanks to Fikri Rasyad.

home.php :
Add this inside the loop. Since thumbnails are inserted before the post excepts or title, add it before the_content_limit or the_excerpt or something similar.You’ll need to edit some things in this code. I have commented about it (green colour)

<?php $height = 50 ; $width = 50 ; /* Edit here .. Height and width */ ?>
<?php if( get_post_meta($post->ID, "thumb", true) ): /* If the thumbnail field is defined*/?>
<a href="<?php the_permalink() ?>" rel="bookmark"><img class="thumb" src="/tools/timthumb.php?src=<?php echo get_post_meta($post->ID, "thumb", $single = true); ?>&amp;h=<?php echo $height; ?>&amp;w=<?php echo $width; ?>&amp;zc=1" alt="<?php the_title(); ?>" /></a>
<?php elseif ((preg_match("/ggpht.com/i", getImage('1'))) || preg_match("/blogspot.com/i", getImage('1'))): /* If the image is hosted on picasa or blogger*/ ?>
<a href="<?php the_permalink() ?>" rel="bookmark"><img class="thumb" src="<?php bloginfo('template_directory'); ?>/timthumb.php?src=<?php echo getImage('1'); ?>&amp;h=<?php echo $height; ?>&amp;w=<?php echo $width; ?>&amp;zc=1" alt="<?php the_title(); ?>" /></a>
<?php elseif(!getImage('1') == ""): /* If the image is present elsewhere */ ?>
<a href="<?php the_permalink() ?>" rel="bookmark"><img class="thumb" src="<?php echo getImage('1'); ?>" height=<?php echo $height; ?> width=<?php echo $width; ?> alt="<?php the_title(); ?>" /></a>
<?php else: ?>
<?php endif; ?>

If you want the complete loop with the post title, excerpts, thumbnails, here you go. Just replace your old loop with this one. Click on “show source”.

<?php $recent = new WP_Query("cat=1&showposts=5"); /* Edit here.....The usual query. No. of posts and category*/ while($recent->have_posts()) : $recent->the_post();?>
<?php if( get_post_meta($post->ID, "thumb", true) ): /* If the thumbnail field is defined*/?>
<a href="<?php the_permalink() ?>" rel="bookmark"><img class="thumb" src="/tools/timthumb.php?src=<?php echo get_post_meta($post->ID, "thumb", $single = true); ?>&amp;h=50&amp;w=50&amp;zc=1" <?php /* Edit here .. Height, width and timthimb.php source */ ?> alt="<?php the_title(); ?>" /></a>
<?php elseif ((preg_match("/ggpht.com/i", getImage('1'))) || preg_match("/blogspot.com/i", getImage('1'))): /* If the image is hosted on picasa or blogger*/ ?>
<a href="<?php the_permalink() ?>" rel="bookmark"><img class="thumb" src="<?php bloginfo('template_directory'); ?>/timthumb.php?src=<?php echo getImage('1'); ?>&amp;h=50&amp;w=50&amp;zc=1" <?php /* Edit here .. Height, width and timthimb.php source */ ?> alt="<?php the_title(); ?>" /></a>
<?php elseif(!getImage('1') == ""): /* If the image is present elsewhere */ ?>
<a href="<?php the_permalink() ?>" rel="bookmark"><img class="thumb" src="<?php echo getImage('1'); ?>" height=50 width=50 /* Edit here .. Height and width */ alt="<?php the_title(); ?>" /></a>
<?php else: ?>
<?php endif; ?>
<strong><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></strong>
 <?php the_content_limit(80, ""); ?>
  <hr/>
  <?php endwhile; ?>

How does this work?
1) Checks in the “thumb” custom field. So, you can use your own thumbnail images.
2) if not, it pulls out the first image from the post.
3) If it is hosted in blogger. It makes a thumbnail of it.
4) If the image is not hosted on blogger, it just shows the image with the img src=”pic.jpg” alt=”” width=”50″ height=”50″ tag (not server side resizing)

How to use your own thumbnails?

While posting a blogpost, enter “thumb” in the Name field and the image path in the Value field (for eg: http://yourblog.com/mypic.jpg).
custom field thumbnails blogger

If you have any questions, please comment.


So lazy that he can't even fill this column out.

  • Pingback: [Wordpress] How to publish pictures on Picasa Web Albums using Windows Live Writer | Suhas Tech()

  • Reality Good ! Thanks.

  • Pingback: The perfect Blogger to Wordpress Migration | Suhas Tech()

  • Great tutorial. Thanks !!

  • How about using plugin from linkwithin.com?

  • Ta giving this error here can help me?

    Parse error: syntax error, unexpected T_STRING in /home/…/public_html/dvdrip/wp-content/themes/…/index.php on line 19

    trying to use the images from picasa.

  • @marcio … Can I look at the source code (i mean index.php) … it could be a missing semicolon or something

  • Hi,
    First of all, very thankful to you for your modifications to TimThumb script. I actually migrated from Blogger to WordPress and had the same problem you mentioned. It worked 90% on my site http://techlikes.com. But the problem is, it’s having trouble for some of the posts, though that posts have images. I’m using “Arthemia Premium” theme in WordPress. I only used modified TimThumb script and didn’t make any changes to other files you mentioned, because those changes are already incorporated in the theme. I use “first image” to show as thumbnail. Please help.

  • Hi Palla,

    I saw you site, most of your images have “www.techlikes.com” in the image path. While timthumb is processing “www.” and deleting “techlikes.com”.. Obviously, with the path wrong, it wont work… Look through the script that might be causing it…

    for eg:
    This image :
    G0/ZgHp42nO0lg/www.techlikes.com-thumbnail-preview-not-working_thumb[1].png
    gives me this error
    file not found temp/www.-thumbnail-preview-not-working_thumb[1].png

    Hope this helps,
    Suhas

  • Hi Suhas,
    Thanks for the reply. Actually i started placing “www.techlikes.com” to my image names, only recently. Earlier, the images were with normal name, so the path is also normal. For eg: on the homepage of http://www.techlikes.com, i have featured posts called “ipad”. In that list, http://www.techlikes.com/2010/06/how-to-fix-ipad-charging-problem.html. this post does not show the thumbnail, although it has normal image path. Whats’ the wrong? Also I’m new to php and wordpress, you have to tell me what needs to be modified?

  • Thanks! This was great. Do you know any automated way of moving all photos from Blogger or Picasa to WordPress? I want to close my old Blogger account. Thanks!

  • in digital statment theme home.php not ther what can i do now…

  • @naren … it will be something similar… look for index.php

  • i have tryed there itselt but its not working bro 🙁
    when u come online just ping me in yahoo messanger plz….
    i need help urgent….

  • Naren, I don’t use yahoo… I use gtalk…

    Got your email… I did reply to it, but yahoo sent me an auto response .. 🙁

    edit: Sent you an invite on yahoo messenger..

  • ok add me in [email protected]

  • @915fefb3eed488981f6f17441bde49da:disqus  i totaly confuse with this can u plz explain more ???

  • Ashiq Ullas

    Great Tutorial.Thanks for the post Suhas

© 2010 Suhas Tech. All rights reserved.
Proudly powered by Wordpress.