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.
add_theme_support( 'post-thumbnails' );
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);
the_post_thumbnail('featuredImageCropped');
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!
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!
Great! Glad I could help!
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?
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!
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 ? 🙂
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!
Will this work for galleries inserted in a post? Thanks
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.
How do I Wrap Text Around Featured Image in Excerpt? many thanks :)!
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
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.
Oops, husband I meant.
Thanks Alice!
Glad to hear that I explained the process simply and clearly.
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
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
thanks dude i am searching some plugins from many days to resize featured images.
You gave me full solution.
Great Abhay, glad to hear it!
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)
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
What about step 3, should we place that in the functions.php ?
Hello,
Nope, place the line of code in step 3 wherever you would like the image to show up.
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’ );
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!
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 ??
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!