Wordpress - How to automatically add rounded corners to thumbnails?
Looks like you can hook into the wp_create_thumbnail
filter:
function wp_create_thumbnail( $file, $max_side, $deprecated = '' ) {
if ( !empty( $deprecated ) )
_deprecated_argument( __FUNCTION__, '1.2' );
$thumbpath = image_resize( $file, $max_side, $max_side );
return apply_filters( 'wp_create_thumbnail', $thumbpath );
}
So just do your manipulation, and return the result to wp_create_thumbnail
.
Even though you could process rounded corners with Php and image GD ( you will still have to pick a background color,) it is an awful lot of work/code/processing for what can easily be accomplished with JavaScript or CSS3.
For rounded images in CSS3 you have to wrap the image in a div and make the image a background-image of that div, not really practical.
So I think you should just use jquery, simply enqueue the script when needed and append the jquery class to your thumbnail through a hook or directly.
The javascript/jquery trick basically applies 4 corner gifs to the image to make it appear rounded. There are various jquery ones lying about on the interwebs such as http://maestric.com/doc/css/rounded_corners_images.
Just don't tell anyone they are not really round.
Here is my take on an using one of the wordpress image filters, I tried using the one suggested by Chip Bennett but didn't have any success.
What I've done is create a custom size and then check each image as it's created if it's that specific size and if it is then apply phpthumb filters. Ideally I would like to be able to just check for the name of the custom image size but I haven't figured out how to do that yet.
add_theme_support( 'post-thumbnails' );
add_image_size( 'rounded-saturated', 250, 100, true );
require_once('path_to\phpthumb.class.php');
add_filter('image_make_intermediate_size', 'paul_rounded_filter');
function paul_rounded_filter($file) {
$info = getimagesize($file);
// check for our image size and do stuff
if($info[0] == 250 && $info[1] == 100)
{
// create phpThumb object
$phpThumb = new phpThumb();
$phpThumb->resetObject();
// set data source -- do this first, any settings must be made AFTER this call
$phpThumb->setSourceData(file_get_contents($file));
$output_filename = $file;
// PLEASE NOTE:
// You must set any relevant config settings here. The phpThumb
// object mode does NOT pull any settings from phpThumb.config.php
//$phpThumb->setParameter('config_document_root', '/home/groups/p/ph/phpthumb/htdocs/');
//$phpThumb->setParameter('config_cache_directory', '/tmp/persistent/phpthumb/cache/');
// set parameters (see "URL Parameters" in phpthumb.readme.txt)
$phpThumb->setParameter('fltr', 'ric|30|30');
$phpThumb->setParameter('fltr', 'sat|-100');
// generate & output thumbnail
if ($phpThumb->GenerateThumbnail()) { // this line is VERY important, do not remove it!
if ($phpThumb->RenderToFile($output_filename)) {
// do something on success
echo 'Successfully rendered to "'.$output_filename.'"';
//die;
} else {
// do something with debug/error messages
echo 'Failed:<pre>'.implode("\n\n", $phpThumb->debugmessages).'</pre>';
die;
}
} else {
// do something with debug/error messages
echo 'Failed:<pre>'.$phpThumb->fatalerror."\n\n".implode("\n\n", $phpThumb->debugmessages).'</pre>';
die;
}
}
if ( $width || $height ) {
if ( !is_wp_error($resized_file) && $resized_file && $info = getimagesize($resized_file) ) {
$resized_file = apply_filters('image_make_intermediate_size', $resized_file);
return array(
'file' => wp_basename( $resized_file ),
'width' => $info[0],
'height' => $info[1],
);
}
}
return false;
}
If you add that code to your theme's functions.php file, download phpthumb and set the path you should be good to go. I've got it working on my local install of xampp so hopefully it should work for other people too. The phpThumb comments are from the simple demo example.