Auto-Resize WordPress Featured Image and Crop if Necessary

Keith Curreri - Blog Headshot

By Keith Curreri on November 01, 2011

If you are creating a WordPress site for a user, you want to make sure everything is as easy as possible for them. One trick that can make things easier is to have images automatically resize when they are used for a featured image in WordPress. Resizing images may be easy for developers and graphic designers, but some end-users don’t have the skills or time to resize an image to fit perfectly in your design. Luckily, this is simple to set up.

The Process

  1. Before we even start, make sure that your theme supports thumbnails. To do this just make sure the the following line of code is in your functions.php file. If you do not know how to access the functions.php file, see my post on how to access key WordPress theme files.
  2. add_theme_support( 'post-thumbnails' );

  3. The next step is to put the following line of code in the WordPress theme’s functions.php file.

    add_image_size($name, $width, $height, $cropBoolean);

    The add_image_size(); function has 4 parameters. $name is the name that you want to call your image with. $width is the width you want the image to crop to in pixels. $height is the height you want the image to crop to in pixels. $cropBoolean is a true or false parameter. If set to true the image will crop itself automatically.In the example below, the name I use to call the cropped image is “featuredImageCropped”. The height and width are 250px and 200px respectively, and the image is set to crop.

  4. add_image_size('featuredImageCropped', 250, 200, true);

  5. The next step is to reference the new image size in your theme. Place the following code wherever you would like to see your cropped image:
  6. the_post_thumbnail('featuredImageCropped');

Conclusion

There you have it. Now when you add a featured image to a post, the image will not need to be resized or cropped beforehand. WordPress will do it for you!

Leave a Reply

27 Comments on "Auto-Resize WordPress Featured Image and Crop if Necessary"

Notify of
avatar
Lívia

Really, thank you!!! This works 100%. I know this is a old post, but i was searching for this solution and you saved me a long time!

Keith

Great! Glad I could help!

Alfie

Hi Keith,

Great post – just wondered if you know the easiest way to make it so if an image uploaded is below eg… 300px, it will automatically stretch to the predefined size, or stretch to fit?

Keith

Hi Alfie, Yep, you can do that by using CSS to set the height and width of the image to the size that you would like it to be!

Jens Mikkelsen

First of all its a really nice tutorial you have made for us.

But what if you want to have 2 different crop sizes.

Is it possible to make one crop size for posts and a second crop size for pages ? If yes, how can we do it ? 🙂

Keith

Hi Jens,

You can have as many crop sizes as you would like. Just go through the tutorial once for the page (and put the code in step 3 in the page file) and then go through the code again (and put the code in step three in the post file).

Hope that helps!

Melissa

Will this work for galleries inserted in a post? Thanks

Keith

Hi Melissa,

It depends on how you are inserting galleries. If you are using a plugin, I don’t think it would work, but the plugin may have settings to allow you to resize images in itself.

Rendy

How do I Wrap Text Around Featured Image in Excerpt? many thanks :)!

Keith

Hi Rendy,

Just float the image left or right using CSS. You may want to use some padding as well so that there is a little bit of space between the text and the image.

-Keith

Alice

Thank you thank you sooooo much!!!!!! I am not computer or code savvy in the least bit and I have seriously been looking forever for how to resize my featured images!!! I just copied and pasted the code you provided and am AMAZED that it actually worked!!! I told my his and that I felt effing awesome.

Alice

Oops, husband I meant.

Keith

Thanks Alice!

Glad to hear that I explained the process simply and clearly.

Brian

Hi Keith,

I’m about to try your solution. Does it matter where in functions.php I add the code from steps 1 and 2?

Also, if I’m trying to get the featured image to show up on my blog page, which page should I add the code in step 3? Should I do that in page.php?

Thanks,
Brian

Keith

Hi Brian,

Nope, you can put the code in steps 1 and 2 anywhere in functions.php (just make sure it is within the php opening and closing tags)

Paste the code for step 3 wherever you would like your cropped image to show up. Unfortunately all themes are different so I can’t tell you exactly where your blog code is located. I don’t think it would be in page.php however. Maybe try index.php or see if there is a custom template for the blog.

Hope that helps!
Keith

Abhay Singh

thanks dude i am searching some plugins from many days to resize featured images.
You gave me full solution.

Keith

Great Abhay, glad to hear it!

Steve

Hey Keith, great walkthrough! Only problem I’m having is the second line of code in step 2 and the code in step 3 aren’t appearing in the boxes. Where did they go??

(I’ve screengrabbed the problem, but I can’t attach an image to my comment)

Keith

Hi Steve,

Are you sure that you put all of the code in correctly? Especially step 2? If you’re sure you did, try uploading the problem image again and see if that changes anything.

If you upload the image first and then put the code in your files you need to regenerate the thumbnail images by re-uploading them.

-Keith

Steve

@Keith,

Thanks for that Keith! I think I’m following your instructinos correctly, but my blog index thumnails are now resizing, not cropping, according to only one of the size values.

So, I’m trying to auto-crop the images to 300×179, but they’re resizing to 179×179.

Any ideas why that’s happening?

Keith

Hi Steve,

Good catch, I wasn’t aware of that, but it’s fixed now.

Thanks!
Keith

J

What about step 3, should we place that in the functions.php ?

Keith

Hello,

Nope, place the line of code in step 3 wherever you would like the image to show up.

Sound4Sites

While making a website for a client, I stumbled upon this page. I made a template for WordPress from scratch and added the line to functions.php. It did not work until I added the following line above it.

add_theme_support( ‘post-thumbnails’ );

Keith

Hi Sound4Sites,

Thank you very much for your comment. That line of code is very important for custom sites and should have been included in this post originally. I just updated the post. Thanks and good eye!

Sachin

I have used a multi featured image plugin in wordpress. but when i set the fearuted image (1 or 2 ) then it is automatically resizing according to the image original size. I want to resize all the images in 351*351. Please help me out ??

admin

Hi Sachin,
Are you referring to a plugin that is giving you a problem? Unfortunately I don’t use a plugin for resizing featured images. All I can say is to maybe try a different plugin or try using the technique in this post.

Best of luck!

wpDiscuz