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!

Did you like this post? Want to get more like it?

Website Redesign Course
Subscribe
Notify of
guest
27 Comments
Inline Feedbacks
View all comments
Lívia
8 years ago

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
Keith
8 years ago
Reply to  Lívia

Great! Glad I could help!

Alfie
8 years ago

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
Keith
8 years ago
Reply to  Alfie

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
9 years ago

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
Keith
9 years ago
Reply to  Jens Mikkelsen

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
Melissa
9 years ago

Will this work for galleries inserted in a post? Thanks

Keith
Keith
9 years ago
Reply to  Melissa

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
Rendy
9 years ago

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

Keith
Keith
9 years ago
Reply to  Rendy

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
Alice
9 years ago

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
Alice
9 years ago
Reply to  Alice

Oops, husband I meant.

Keith
Keith
9 years ago
Reply to  Alice

Thanks Alice!

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

Brian
9 years ago

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
Keith
9 years ago
Reply to  Brian

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
10 years ago

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

Keith
Keith
10 years ago
Reply to  Abhay Singh

Great Abhay, glad to hear it!

Steve
Steve
10 years ago

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
Keith
10 years ago
Reply to  Steve

Hi Steve,

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

Thanks!
Keith

Steve
Steve
10 years ago
Reply to  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
Keith
10 years ago
Reply to  Steve

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

J
J
10 years ago

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

Keith
Keith
10 years ago
Reply to  J

Hello,

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

Sound4Sites
10 years ago

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
Keith
10 years ago
Reply to  Sound4Sites

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
Sachin
10 years ago

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
admin
10 years ago
Reply to  Sachin

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!

27
0
Would love your thoughts, please comment.x
()
x