I was pleased to discover that there’s a better way to create thumbnails in Wordpress than code it yourself, or use a third party library.
In fact, in wp-includes/media.php there’s a whole bunch of functions that Wordpress (since 2.5) uses to manipulate media files.
image_resize() is exactly what we need:
/** * Scale down an image to fit a particular size and save a new copy of the image. */ function image_resize( $file, $max_w, $max_h, $crop=false, $suffix=null, $dest_path=null, $jpeg_quality=90)
You can use it like this to create a perfect 100×60 thumbnail:
// resize the image $thumb = image_resize($img,100,60,true);
The tricky part is that, because Wordpress use this function in the admin, it needs some code that’s not available to themes by default.
You can fix this by including wp-admin/includes/image.php on top of your functions.php:
/// admin image API require_once(ABSPATH . '/wp-admin/includes/image.php');
thumbnails.php
To make thumbnail generation even easier, I coded some usefull functions you can grab.
This functions work on images placed on posts and uploaded on wp-content.
the_thumb() is the easiest one. You can call it inside the Loop to extract the first image in the content, resize it, and output an image tag. Of course, like all Wordpress functions, there’s the corresponding get_the_thumb().
generate_thumb() it’s a shortcut for image_resize(), with some addictions.
Finally, extract_image() return the url of the first image in an html string.
// extract the first image of the post $img = extract_image(get_the_content());
13 Comments
I'm glad that someone else has found these functions.
Here is a use-case for you:
You have a WordPress blog with thousands of images. One day you change your template, and decide that all of your medium and thumnail images should be resized. But there is currently no way to do this.
What someone needs to create is an image re-sizing plugin for WordPress that will resize images that have already been attached to posts.
Cheers,
Stuart.
@Stuart
That actually sounds like it would be a good idea.
Oh and nice article
The quick solution is to use full size images in your posts, and resize them on the template.
So if you change the template and need bigger thumbnail, you just need to change width and height on the code.
Cheers
@Stuart: You can use the function mentioned in this blogpost ideally for that. Including old posts.
Simply put them full-size in your posts and then make "thumbnail" (well, praticly it's not a thumbnail anymore, but simply a smaller-version of the image) by only setting the width to whatever you like.
Then whenever the template or theme changes you only have to adjust the width and every page view of a blogpost will show the newly made thumbnails.
I've been doing the above for a long time (using TimThumb), but now that I how to utitlize the built-in functions it will definitly consider droppping TimThumb for WP-Themes.
–
Thanks fo the article !
Grtz,
C
#post author: How do I know actually use this ?
I am getting :
Catchable fatal error-: Object of class WP_Error could not be converted to string in * on line *
I have this:<code>
// get customfield
$img = get_post_meta($post->ID, 'image', true);
// resize the image
$thumb = image_resize($img,100,60,true);
// output
?><img src="<?php echo $thumb; ?>" alt="" /><?php
</code>
#post author: How do I know actually use this ?
I am getting :
Catchable fatal error-: Object of class WP_Error could not be converted to string in * on line *
I have this:<code>
// get customfield
$img = get_post_meta($post->ID, 'image', true);
// resize the image
$thumb = image_resize($img,100,60,true);
// output
?>[img src="<?php echo $thumb; ?>" alt="" /]<?php
( [] = <> )
this wordpress functions are built to work with images attached to posts, so you may need some fox to make them works on custom images
also remember to add
require_once(ABSPATH . '/wp-admin/includes/image.php');
This is a great article and works well for pulling images out of posts but I'm in the same boat as TeMc. I'm trying to resize images being pulled from a custom field which doesn't work unfortunately. I'm also using TimThumb but wanted to replace it for the native WordPress functions.
~David
http://wpclassipress.com
Great way to handle dynamicly resize images. Thanx for the insight.
I had added the require-code, but that didn't do it.
It's not really a custom image (as in; not external) but I like to keep the image link (which starts with /wp-content) in a custom field, becuase I display it out of the posts content, and also do other stuff with it.
Also, "attached to post" isn't what I need, since sometimes I've uploaded an image before and wanna re-use it. In order to make it connect to this post I'd have to re-upload it, not very nice.
Or I might upload the image(s) before I even write the article for whatever reason.
Untill I can figure out how to use your function with a custom address, rather then the first one in the post content or the one asociated via the upload function.., I'd have to stick with TimThumb.
Hey Valentino,
I just managed to hack your code to make it work with the latest WordPress MU. Most of the work was fixing image paths for multiple blogs, other than that it's been pretty easy.
I'll email you the WPMU compatible code over the weekend.
Take care!
awesome! :)
That's a terrible idea. You are requiring your visitors to download full-size images when only a small thumbnail is required. You see amateurs do this all of the time. They'll put up a 4MB image of something, then resize it via html to 100×100px. If they had resized the image properly (using a graphic editor), the image would be all of 10-15KB.
Don't punish your users for your own laziness!