Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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

share|improve this question
    
Sorry about the +25 bounty. I was late to work this morning. –  Dan Gayle May 9 '11 at 15:47

9 Answers 9

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.

share|improve this answer
    
Nice. This is more along the lines of what I was talking about! –  Dan Gayle Jun 1 '11 at 17:11
    
Did that work for you? –  Paul Sheldrake Jun 14 '11 at 10:04
    
Haven't had an opportunity to test it yet. Thanks though! –  Dan Gayle Jun 15 '11 at 20:05

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

share|improve this answer

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.

share|improve this answer

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: http://stackoverflow.com/questions/609109/rounded-corners-on-images-using-php

share|improve this answer

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.

share|improve this answer
    
This would be ideal, but I have never gotten it to work consistently. I've pulled my hair out over this one. –  Dan Gayle Jun 1 '11 at 17:12

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:

enter image description here

After:

enter image description here

CSS entered into Firebug:

enter image description here

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

share|improve this answer
    
Good idea to do this using Modernizr. Still need it server side though. –  Dan Gayle May 2 '11 at 18:08
    
Of course, one of the sites in question still has 80% IE<9 traffic –  Dan Gayle Jun 1 '11 at 17:14

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.

share|improve this answer
    
Aha! It's in a different location. Sweetness. Lemme check this out, but it looks like you might have found what I need. –  Dan Gayle May 2 '11 at 16:39
3  
I'd love to see some working code with this filter, I played around with it and got nowhere, gave up pretty quickly. –  Milo May 2 '11 at 17:17
1  
@milo my answer has a bit of code you can try out –  Paul Sheldrake May 17 '11 at 21:07

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.

share|improve this answer
3  
"For rounded images in CSS3 you have to wrap the image in a div and make the image a background-image of that div" - absolutely not true. border-radius can be applied directly to an IMG tag, with no problems whatsoever. –  Chip Bennett Apr 30 '11 at 1:33
    
That jQuery trick is cool. I'd STILL rather do it serverside to keep the amount of js processing on the client side to a minimum –  Dan Gayle May 2 '11 at 14:57

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.

share|improve this answer
1  
border-radius doesn’t apply to images. That is really tricky. –  toscho Apr 30 '11 at 0:00
    
Border radius on Mozilla will have the square corners pointing out if you apply it to an img tag –  Dan Gayle Apr 30 '11 at 0:05
    
It must be applied as a background-image for div wrapper, which is pretty impractical. –  Wyck Apr 30 '11 at 0:11
    
border-radius works directly on img tags in current mozilla. –  Milo Apr 30 '11 at 0:36
    
What Milo said. border-radius works just fine on images. I use it for comment Gravatars in my own Theme. –  Chip Bennett Apr 30 '11 at 1:32

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.