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)
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()). '&h=100&w=240&zc=1&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()). '&h=100&w=240&zc=1&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 :
11 Comments
Hi,
must know the specific location where you use this codes
funtions.php?
In timthum.php?
functions.php
Only Copy and Paste in functions.php
No Need change codes in Timthumb Beta script?
sweet post. i also really enjoyed your post on a custom index layout for thematic. as far as timthumb… the new feature of working on offsite images is very cool. but do you still prefer this method to using the new built in thumbnail support for WP2.9?
I prefer timthumb, because it crop pictures the way you want it.
With the built in thumbnail support in wp, after a few test, it never crop the exact size that you want it, sometime it’s just scale the pictures.
And there’s this query problem with thumbnail support in wp, it uses 2 query for each image that it pull, i felt that isn’t perfected yet.
Hello,
very nice article; is there a way to use timthumb for youtube without adding custom fields in post? I mean, it should discover youtube video thumb, grab it and cache it…
Thanks for help!
hi again! i was just wondering if how you can get the alt text for the thumbnail with catch_that_image?
Nice But:)
it will be very nice if you encrypt the resulted URL ..of the Image because your site is vulnerable now,
thanks for this post,
before this I am using “get the image” plugins to grab external image in post to be shown in hompage thumb.
but with this timthumb beta I am now able to get better result as it can now resize with crop function.
thanks.
Just tried the thumbnail code and got it working, thanks alot for sharing!
This works! Thanks for sharing.
One Trackback
[...] hardiannazief dan Binary [...]