Auto-Resize WordPress Featured Image and Crop if Necessary

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.
    add_theme_support( 'post-thumbnails' );
  2. 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.

    add_image_size('featuredImageCropped', 250, 200, true);
  3. 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:
    <?php 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!

25 Comments

LEAVE A COMMENT
  • 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 ??

    Reply

    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!

  • 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’ );

    Reply

    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!

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

    Reply

    Hello,

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

  • 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)

    Reply

    Hi Steve,

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

    Thanks!
    Keith

    @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?

    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

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

    Reply

    Great Abhay, glad to hear it!

  • 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

    Reply

    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

  • 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.

    Reply

    Oops, husband I meant.

    Thanks Alice!

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

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

    Reply

    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

  • Will this work for galleries inserted in a post? Thanks

    Reply

    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.

  • 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 ? :)

    Reply

    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!

  • 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?

    Reply

    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!

Leave A Reply

Comment