Create Thumbnail From Offsite Image Using Timthumb Beta

December 27, 2009 Published in geeks

thumbnail
by petervanallen

I host most of my images in Picasa and Flickr, for along time i couldn’t use the native feature in WordPress to create custom thumbnail that i wanted, i could upload it and use custom fields, but it would be tediously boring to do that.

A couple of month ago a message from heaven came by to fulfilled my wishes and whisper it to Ben Gillbanks ear, the developer of timthumb. So thus came the timthumb beta for offsite image. After downloading it i tried it, my wishes fulfilled and it looks awesome! Oh Joy

Happy! Happy! Joy! Joy! from psherman420 on Vimeo.

This hack is similar with the one that i use on this website and this was a follow up from my previous post about how to create custom index post layout, but the method could be applicable for other WordPress themes.

Here is the screen shot on how the thumbnail will look like on the home page (i’m using thematicsamplechildtheme in the Thematic folder)

thumbnail screenshot

First we need to download timthumb beta at Binary Moon in here, put it on your child theme folder then create a folder called temp & cache (writeable 777)

Here are the code that we are going to use

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

<?php
function remove_index_loop() {
  remove_action('thematic_indexloop', 'thematic_index_loop');
}
add_action('init', 'remove_index_loop');
 
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.gif";
  }
  return $first_img;
}
 
function custom_index_loop() {
  global $post;
    /* Count the number of posts so we can insert a widgetized area */ $count = 1;
      while ( have_posts() ) : the_post() ?>
        <?php $counter++; ?>    
          <div class="column <?php if ($counter == 1) { echo 'one'; } else { echo 'two'; $counter = 0; } ?>">
            <div class="clear-fix">
              <div id="post-<?php the_ID() ?>" class="<?php thematic_post_class() ?>">
                <?php thematic_postheader(); ?>
                  <?php if(catch_that_image()) {
                    echo '<a href="' .get_permalink(). '" title="' .get_the_title(). '"><img src="' .get_stylesheet_directory_uri(). '/timthumb.php?src=' .urlencode(catch_that_image()). '&amp;h=100&amp;w=240&amp;zc=1&amp;q=90"></a>'; } ?>
                    <div class="entry-content">
                    <?php the_excerpt(); ?>
                    <?php wp_link_pages('before=<div class="page-link">' .__('Pages:', 'thematic') . '&after=</div>') ?>
                </div>
            <?php thematic_postfooter(); ?>
          </div><!-- .post -->
      </div><!-- .clear-fix -->
   </div><!-- .column -->
   <?php comments_template();
    if ($count==$thm_insert_position) { get_sidebar('index-insert');}
    $count = $count + 1;
    endwhile;
}
add_action('thematic_indexloop', 'custom_index_loop');
?>

The code below are to catch the first image on the post

1
2
3
4
5
6
7
8
9
10
11
12
13

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.gif";
  }
  return $first_img;
}

i use the_excerpt for the content so there’s no image there, i’m going to try catch the first image from post so i can feed it to the timthumb, this awesome function is from WPrecipes Jean-Baptiste Jung.

after catching it, we can call it with this

1

echo catch_that_image()

then i’m going to insert it to the custom index loop

1
2

<?php if(catch_that_image()) {
                    echo '<a href="' .get_permalink(). '" title="' .get_the_title(). '"><img src="' .get_stylesheet_directory_uri(). '/timthumb.php?src=' .urlencode(catch_that_image()). '&amp;h=100&amp;w=240&amp;zc=1&amp;q=90"></a>'; } ?>

change the h=100&w=240 for the size as needed

Voila! it’s done! simple right! :)

u may also like this :

Bookmark and Share
This entry was posted in geeks
Tag:
,
,
,
,
Bookmark
Permalink.
Post a comment Trackback:
Trackback URL

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">