How to automatically add rounded corners to thumbnails?

Question

I want to created automatically rounded corner thumbnails for a particular project I'm working on, using something like this: http://webdeveloperplus.com/php/create-thumbnail-images-with-rounded-corners/

What I'd ideally like to do is find a way to hook something like this into the thumbnail creation process itself and cache it serverside. /wp-includes/media.php doesn't seem to have any applicable hooks, so I might have to roll my own.

Any clues on where to start?

EDIT: Not in CSS. There have been some good suggestions about this but I'm using border-radius all over the site, and the images specifically need to be rounded on the server side. Thanks

Answer 1

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.

Answer 2

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.

Answer 3

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.

Answer 4

There is no reason not to do this with CSS it works and will be supported in all major browsers except for IE 8 and below:

If you really want to support IE you can use Modernizr which will add a class of no-rounded-corners on the target img element in incapable browsers.

Add class="rounded-corners" to your thumbnails and in your css:

.rounded-corners {
    -moz-border-radius: 30px 30px 30px 30px;
    -webkit-border-radius: 30px 30px 30px 30px;
    border-radius: 30px;
}

I did a quick test on a random image on the front page of WPCandy.com by adding the corners to the image class using Firebug. Here are the results.

Before:

After:

CSS entered into Firebug:

For your .no-rounded-corners use one of the fallback methods if you feel you need to.

Answer 5

What thumbnails are you wanting to style, the "thumbnail" image size in general, or Post Thumbnails?

Both can easily be accomplished via CSS - specifically, the border-radius property; the specific answer will depend on your exact needs. I'll be happy to update.

P.S. IMHO going to TimThumb/cached image route is sub-optimal. Just use the WordPress-generated, square-cornered images (that are already part of the object cache), and use CSS to round the corners.

Answer 6

Upon a google search it is possible to round corners with GD but the results aren't the greatest; they're a bit jaggy; but that's a subjective call on my part: http://www.assemblysys.com/dataServices/php_roundedCorners.php

If you must do this; i recommend using the timthumb script as a starting point:

Timthumb project: http://timthumb.googlecode.com http://timthumb.googlecode.com/svn/trunk/timthumb.php

Stackoverflow also has a post about this: https://stackoverflow.com/questions/609109/rounded-corners-on-images-using-php

Answer 7

Have you taken a look over at ccs3pie Rounded Corners And CSS3 hacks for ie this should do what you want aswell as forcing good old ie into submission to comply.

Answer 8

OK this is easy!!

First up like people have said the best, cleanest, and easiest way is to use css3 border-radius. This works in most modern browsers, except the typical IE6-8 which has no support...although IE9 will do.

.round {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

SO if you are like me and your clients all use IE then I'd recommend CSS3 Pie as above http://css3pie.com/. The only drawback is it messes with z-index of images so if you're using a slider which fades you may get issues.

If you don't fancy using CSS3 Pie I'd recommend http://jquery.malsup.com/corner/. You simply link it in your header, along with jQuery and use the following:

<script>
        $(function(){
        $('.round').corner();
    });
</script>

It picks up the CSS3 declaration and for any browser that doesn't support it, it renders the rounded corners via jquery.

We recently used both these on a clients website here: http://www.theathenaprogramme.co.uk/

Job done :-) Hope this helps.

Edit: Just noticed you need this to be done before the image is saved via media.php. Think my solution isn't applicable in this case.

Answer 9

I've used the Get Post Image plugin to do this here: http://surfhatteras.com/

Get Post Image is a wrapper for Get The Image WordPress Plugin and phpThumb library.

Using it you can do something like <?php get_post_image ('w=200&amp;zc=1&amp;fltr[]=ric|30|30'); ?> to round the corners of a posted image. Or you can you wrap your images yourself: http://phpthumb.sourceforge.net/demo/demo/phpThumb.demo.demo.php#x33

Don't forget to cache! http://mrphp.com.au/code/image-cache-using-phpthumb-and-modrewrite