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.

Probably not the best title description but here we go. One of my custom post types is for youtube videos which I take the thumb from youtube and upload it as a thumbnail for the post. Now it's easy enough to download the image from youtube and use media_handle_sideload() to upload it as an attachment for the post and set thumbnail sizes for it be cropped to but youtube video images come with excess black bars at the top and bottom. So I need a way to crop them out.

So I have a custom thumbnail size that crops all thumbs to a width of 224px called 'post-thumbnail'.

I get and process the thumb like so from a front end post.

$vid_url = $_POST['video_url'];
$video_id = getVideoId($vid_url);
if ($video_id) {
   $video_response = wp_remote_retrieve_response_code(wp_remote_request($vid_url));
   if ($video_response == 200) {
      $video_url = $vid_url;
      $video_image_url = 'http://img.youtube.com/vi/'.$video_id.'/hqdefault.jpg';
      $tmp = download_url($video_image_url);
      $file_array = array(
                    'name' => basename( $video_image_url ),
                    'tmp_name' => $tmp
                  );
   }
}
$pid = wp_insert_post($new_post);
$vid_thumb = media_handle_sideload( $file_array, $pid );
update_post_meta($pid,'video_thumb',$vid_thumb);

Now this gives me a thumb of 224px/168px so now what I need to do is crop the thumb to 224px/120px knocking off 24px from the top and bottom. Any ideas?

share|improve this question
    
Since your only looking at 24px diff, just hardcrop using CSS. –  Wyck Feb 12 '13 at 1:47
    
That's easy enough to do but when you're displaying 40 or 50 on a page load it's more efficient to crop them to exact dimensions to save on page load. –  Pollux Khafra Feb 12 '13 at 1:52
1  
Don't have time for a full answer (and I'm not sure it is the answer), but what about: image_make_intermediate_size() ? I think you could run it after you've sideloaded the image. –  helgatheviking Feb 12 '13 at 3:06
    
Can't this be solved with CSS? –  brasofilo Feb 12 '13 at 4:02
    
Cropping 24 pixels out of 40 images via CSS will make load time difference between: 1 - 2.8 KB depending on the data in the image, it's not going to kill your server. –  Wyck Feb 12 '13 at 4:55

2 Answers 2

You can crop the YouTube thumbnails with

TimThumb:

http://www.binarymoon.co.uk/demo/timthumb-cropping/

http://www.binarymoon.co.uk/2012/02/complete-timthumb-parameters-guide/

or

WP.com Photon API:

http://developer.wordpress.com/docs/photon/api/#crop

Remove black letterboxing effect from images with the ulb parameter:

http://developer.wordpress.com/docs/photon/api/#ulb

share|improve this answer
    
So am I downloading the image from youtube..cropping it..and then running media_handle_sideload()? –  Pollux Khafra Feb 12 '13 at 2:05
    
no, the cropping is the last step with these two options, where you are outputting your html. You have to change the img src of the images you want to crop. –  birgire Feb 12 '13 at 2:07
    
I don't want to crop images every time I call them in a loop. I want the thumbnail already cropped when I retrieve it. I wanna crop them on post creation. –  Pollux Khafra Feb 12 '13 at 2:09
    
ok, but cropping is not done on your server if you use the WP-Photon service. Here is an example with the youtube thumbnail: i0.wp.com/img.youtube.com/vi/eTOKXCEwo_8/… but you would use your image path instead: i0.wp.com/example.com/wp-content/uploads/2012/02/… –  birgire Feb 12 '13 at 2:14
    
and TimThumb will cache the cropped/resized images on your server. –  birgire Feb 12 '13 at 2:18

media_handle_sideload handles the uploads in the same way the normal upload does. That means, when you upload a remote image (YouTube thumbnails in your case) it will automatically create the thumbnails of sizes registered using add_image_size.

So, what you need to do is create a thumbnail of desired size and call it in your loop.

function my_setup() {
    //Support Thumbnails
    add_theme_support( 'post-thumbnails' );

    //Add Thumbnail Sizes
    add_image_size( 'youtube', 224, 120, true );
}
add_action( 'after_setup_theme', 'my_setup' );

And then in your loop;

if ( '' != get_the_post_thumbnail() ) {
    the_post_thumbnail( 'youtube' );
}
share|improve this answer

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.