Pinterest Stumbleupon Whatsapp
Ads by Google

A picture is worth a thousand words – unless it’s been resized inappropriately, in which case it’s worth negative one-hundred words. Okay – so maybe that’s a lesser known version of an old saying or something I just made up, but the point is: WordPress is very powerful when it comes to thumbnails and image sizes – you just need to know how to deal with them. Read on for everything you need to know about image sizes in WordPress and managing featured images.

Note: this post is pretty heavy with PHP – nothing too complicated, but you might want to read our free PHP crash course before attempting any modifications on your theme.

Basics First

In the WordPress admin dashboard, you probably already know about Settings -> Media.

default-sizes

These are the three default image sizes, which WordPress calls: thumbnail, medium, and large. The thumbnail size has a special setting to be cropped at the exact dimension you specify here. This needn’t be a 1:1 dimension – you can set it however you like – but images will be centred and cropped, meaning any portion of your image that doesn’t fit those dimensions after being scaled down will simply be cut out.

The medium and large setting work slightly differently, in that you’ll specify maximum dimensions for both width and height, and the images will be scaled down accordingly. If the image is too small, those image sizes simply wont be created. When you upload a new image, the original is saved and available to insert into a post at full size, and the other registered image sizes are automatically created.

Ads by Google

insert-image

These three image sizes, as well as the original full size, are the only ones available when you edit a post and insert media, so I tend to set large as the absolute width of my theme for full width pages and posts, and medium as width of the typical content column.

Making More Sizes

When editing theme or creating widgets, the three sizes defined in your media settings might not be enough. I always leave those alone for content – then define some new image sizes in functions.php file, like this:

add_image_size( 'my-thumbnail', 400, 200, true);

Each new image size needs a name, width and height dimensions, and whether or not images should cropped to exactly this size (true or false). For structural parts of a theme or widget, you generally would want to crop so it doesn’t break the layout.

Featured Image

Since version 2.9, WordPress has allowed us to set a specific image as the “featured image” for a post. This image isn’t inserted into the body of the post (unless you insert it yourself), but instead can be used structurally throughout your theme – as a thumbnail next to the post title, or perhaps in the header when viewing that particular post. Not including a featured image just seems lazy given how many themes and widgets rely upon them – paste this snippet into functions.php to remind you when saving a post if you forgot to set one (source):


add_action('save_post', 'wpds_check_thumbnail');
add_action('admin_notices', 'wpds_thumbnail_error');
function wpds_check_thumbnail($post_id) {
	// change to any custom post type
	if(get_post_type($post_id) != 'post')
		return;
	if ( !has_post_thumbnail( $post_id ) ) {
		// set a transient to show the users an admin message
		set_transient( "has_post_thumbnail", "no" );
		// unhook this function so it doesn't loop infinitely
		remove_action('save_post', 'wpds_check_thumbnail');
		// update the post set it to draft
		wp_update_post(array('ID' => $post_id, 'post_status' => 'draft'));
		add_action('save_post', 'wpds_check_thumbnail');
	} else {
		delete_transient( "has_post_thumbnail" );
	}
}
function wpds_thumbnail_error()
{
	// check if the transient is set, and display the error message
	if ( get_transient( "has_post_thumbnail" ) == "no" ) {
		echo "<div id='message' class='error'><p><strong>You must select Featured Image. Your Post is saved but it can not be published.</strong></p></div>";
	delete_transient( "has_post_thumbnail" );
	}
}

WordPress provides a convenient function for getting the featured image and using it in themes:

the_post_thumbnail('my-thumbnail',array('class'=>'my_post_thumbnail_css_class'));

The function takes 2 parameters: the named size you’re looking for, and any attributes you want to pass in, like a custom CSS class (note: you can’t override the alt attribute). If you’re modifying a really old theme, you may also need to add the following to your functions.php:

add_theme_support('post-thumbnails');

If you’d rather just get the actual URL of the featured image rather than output the required HTML too, try this instead (getting the medium image size in this example):

$thumbnail = wp_get_attachment_image_src(get_post_thumbnail_id(), 'medium');
echo $thumbnail[0];

Regenerating Images

Anytime you change you default image sizes or create a new size definition, it’ll only apply to new uploads. All your existing images remain as the original dimensions. Never fear though, there’s a great plugin that will go back through your posts and regenerate these new image sizes for you. AJAX Thumbnail Rebuild lets you select which sizes to regenerate, and will slowly work through your archive. This won’t resize images that have been inserted into posts – those are fixed at the point of insertion. Regenerating images will make the new size available to use in your themes or in future posts, but you can’t automatically edit the size of existing images that have been inserted already.

thumbnail-rebuild

You’ll find two downsides to making new images. Firstly, even if the image size you’ve made is only used for the featured image as part of a theme, a new version of every single image you’ve ever uploaded will be created – not just the featured image. This is a limitation of WordPress; a featured image is just like any other and you can’t specifically target it with the add_image_size() function. Luckily, the Thumbnail Rebuild plugin does actually let you limit this to only featured images from the archive –  but all future image uploads will be managed by WordPress, and it will create the new image size for everything. Now would be a great time to also learn the difference between JPG and PNG Know When to Use Which File Format: PNG vs. JPG, DOC vs. PDF, MP3 vs. FLAC Know When to Use Which File Format: PNG vs. JPG, DOC vs. PDF, MP3 vs. FLAC When the Internet was small and young, file formats were pretty much limited to image types and media file types that the browsers of the time could handle. At the very beginning, text was almost... Read More  so you know to use the optimal format in future.

Secondly, even if you’re no longer using a certain size, they will remain on the server – WordPress won’t delete unused images for you. On a site like MakeUseOf with hundreds of thousands of images, this means a couple of gigabytes wasted. For smaller sites, the Image Cleanup plugin will help by scanning and giving you the option to delete; but larger sites will need to learn some command-line and regex fu (see our quick guide to getting starting with the Linux command line A Quick Guide To Get Started With The Linux Command Line A Quick Guide To Get Started With The Linux Command Line You can do lots of amazing stuff with commands in Linux and it's really not difficult to learn. Read More ).  Always take a full backup first, just in case it deletes something it shouldn’t have.

My Theme Doesn’t Change

So you’ve edited a theme with your new image sizes, and correctly regenerated all existing featured images – but the right size still isn’t appearing? You’ve probably got some CSS applied to the image or it’s surrounding DIV then. Use your browser’s debug mode Figure Out Website Problems With Chrome Developer Tools Or Firebug Figure Out Website Problems With Chrome Developer Tools Or Firebug If you've been following my jQuery tutorials so far, you may have already run into some code problems and not known how to fix them. When faced with a non-functional bit of code, it's very... Read More to find the offending CSS and tweak accordingly. And remember, you can only resize if the source image is big enough – WordPress and the generate thumbnail plugin won’t upscale images due to the loss of quality.

WordPress is nearly 11 years old, so it’s a testament to its power and flexibility that it’s one of the few web apps that has been kept alive for so long and not replaced. Features like post thumbnails are now ubiquitous on the web, and to its credit, WordPress has always kept up with design trends. Mind you, Ghost is looking good Wordpress Killer? Welcome To Ghost (and How to Install it on a Raspberry Pi) Wordpress Killer? Welcome To Ghost (and How to Install it on a Raspberry Pi) Read More .

Having trouble with featured images? Post in the comments and I’ll see if I can help you out.

  1. Katherine E Harms
    June 6, 2016 at 5:20 pm

    Thanks for promptly responding to my question. I used your article as a guide to further research. I also submitted a support request to WordPress.

    On my own, I found no way to alter the specification for a featured image. WordPress support confirmed that in my theme (2014) it requires a CSS change, and that cannot be done without a premium subscription.

    I'm making notes as I go, and this is one note in favor of a premium subscription. It will take more than this to justify the $99, but I guess I will see the truth as things progress. In the meantime, I must find pictures that meet or exceed the 1038 pixel width.

    I really appreciate your site and your response to my comment.

  2. Katherine E Harms
    June 5, 2016 at 4:38 pm

    I'm a complete novice, and not a developer. I am trying to get the right size featured image to work with theme 2014. I have no difficulty finding images for my featured image that work fine with my home page grid. The images all look great there. However, when the reader clicks the grid to read the post, the images are all too narrow. There is line hatching to the right of the image that fills the remaining width of the displayed post. In publishing jargon I think it is the concept of bleeding to the cut edge of the paper. I don't know how wide that space is or how to be sure I get photos that look good at that width. I am so focused on content, that it takes me forever to find the photo that works with my content. I never will get my work done if I have to go into the details of the sizing and filter for that, too.

    I can't even find a place in 2014 where the featured image size is set. I looked in Customize, but it only sets featured content to a slider or a grid. The image is not mentioned.

    Help!

    • James Bruce
      June 6, 2016 at 2:52 pm

      Without a URL to check, I can only guess that your images are actually too small , therefore they can't be resized to whatever ratio the featured image is asking for.

      Image sizes are generally set by theme code, and not user definable, since they relate to the design.

      You can post the URL if you like!

  3. Wesley Banks
    May 31, 2016 at 5:44 pm

    I currently have a blog with images sized at 640x360. I always upload that exact size, and have never messed with the media settings.

    I'd like to change all my image sizes to 700x395 to match the new content width.

    What is the best way to accomplish this? Can I do it with the media settings and regenerate plugin, or do I need to re-upload a ton of images?

    • James Bruce
      June 1, 2016 at 7:24 am

      Not possible, for two reasons. First, you've uploaded low resolution - scaling up is not done by wordpress or any plugins I know of. Second, the image size is coded into the post content at the point of insertion. You *can* resize featured images, since those are attached to the post and fetched through php functions; but not images you've inserted into the post content itself.

      So, to answer the second part: you would need to both re-upload at a higher resolution, and edit every single post.

      • Wesley Banks
        June 1, 2016 at 6:49 pm

        Thanks James, in the future, should I be uploading higher resolution photos and utilizing the media settings to choose which size?

        Or what is the best way to prevent something like this happening (assuming I change content widths in the future at some point)?

        • James Bruce
          June 1, 2016 at 8:07 pm

          That will work for featured images, yes. You can always define a new image size, then run AJAX thumbnail rebuild plugin to change them - but that still won't work for in-post images. I'm afraid there isn't a solution to that, at least not in the current way WordPress works.

  4. erin
    April 12, 2016 at 5:20 pm

    my featured images are showing up HUGE at the top of my posts before the title. i want them to show up smaller, and would prefer them to be next to the post snippet. is this something that has to do with my theme or can i change this? i am currently using the free Quest theme.

    • James Bruce
      April 13, 2016 at 8:55 am

      First step I would suggest trying is to run a plugin called AJAX THUMBNAIL REBUILD: https://wordpress.org/plugins/ajax-thumbnail-rebuild/ (activate, then go to the plugin page, and run it on everything) - it could just be that your images haven't been resized correctly for your current theme.

      If that doesn't help, your thumbnail sizes in wordpress settings may be incorrect. Check what size they should be, then make sure those match up with the value given. (then run the resizer plugin again, so it can change all the images to be the right size).

      If that doesn't work, your theme is coded badly. Yo'll need to delve into the code to find out exactly how they've defined their function to get the featured image, and override the sizes there.

  5. Barbara
    March 22, 2016 at 9:40 pm

    Complete guide indeed! I've spent the past two days trying to find a clear explanation of how WP's default image sizes work. Thank you so much!

  6. Libby
    March 21, 2016 at 10:31 pm

    Is this still current? - "a new version of every single image you’ve ever uploaded will be created – not just the featured image. This is a limitation of WordPress."

    Is there really no way to limit additional image sizes to specific images? My current website is photo heavy so if additional images are created for every photo uploaded it's going to get very big very quickly which is nightmare when it comes to backing-up.

    I don't need additional sizes for the images used within blog posts, just for the other images used through the site.

    Any suggestions?

    • James Bruce
      March 22, 2016 at 8:06 am

      I'm afraid so. It's even more ridiculous because there's no way to delete old image sizes safely, so once you've gone through quite a few theme changes (as we have on this site), you end up with terabytes of image uploads.

      The latest wordpress also introduced a new default image size, which you can't change, as part of its "responsive images" update.

      There is no solution, sorry!

      • Libby
        March 22, 2016 at 8:27 am

        Boooo! Thanks for replying and clarifying though. :-)

        I'm baffled that WP does this, imagine how many terabytes of un-needed images there are across ALL WP sites!? It's crazy!

  7. Joy
    February 22, 2016 at 2:36 am

    Hi James,

    Great article, thanks! My brain is mush after trying to find an answer for this and trying so many things - unfortunately, I haven't found a fix. Here's my problem:

    the featured image for the website I'm working on (Customizr theme) is constantly oversized as it's seems like WP or the theme is trying to fit the picture into a wide slider-like space. It's also often pixelated as a result.

    The images look great on the homepage in the little round bubbles, but on the actual post page, it's awful as you only get to see a small part of the image. There's got to be a way in the theme or settings to make this work and I'm missing it, right? I'm sorry if it's right in front of me and I'm missing it. I think I'm looking at it too much.

    I'm not a developer and not excellent with code, but any help you could provide would be much appreciated as I'm at the end of my rope!

    Thank you!

    • James
      February 24, 2016 at 10:39 am

      Bit difficult to diagnose without seeing the code I'm afraid. Every theme is coded differently. It could be that the image sizes set in your wordpress settings are wrong, or it could be that images need to be regenerated to the correct sizes... check those two first, perhaps.

      Use AJAX image resizer plugin if they do just need to be resized.

  8. Zsolt Edelényi
    February 16, 2016 at 7:54 am

    Is there any chance to redefine the default size of 'large' and 'medium' thumbnails?

    • James Bruce
      February 16, 2016 at 8:21 am

      Go to the WordPress settings -> Media, and you can redefine all the standard sizes.

      • Zsolt Edelényi
        February 16, 2016 at 8:24 am

        Thanks. I forgot to say, that I would like to change it from my theme. Is there any hook for that? I do not want additional sizes.

        • James Bruce
          February 16, 2016 at 8:26 am

          No, you cant change those from your theme. That's why they have the feature of defining additional sizes. If you want to change core sizes, you need to do it from the wordpress menu.

        • Zsolt Edelényi
          February 17, 2016 at 3:59 am

          Ok. Thank you.

  9. Amanda
    February 5, 2016 at 4:51 pm

    I've having trouble with my featured images ... (link to deve site: http://nfldherald.stirlingpublications.com/featured-articles/).

    They are full size - and I don't know how to change it.

  10. Mitch
    December 21, 2014 at 5:36 pm

    ?php if( has_post_thumbnail() ) { ?>
    ?php } else { ?>
    ?php include('adsense_singlepost_top_square.php') ?>
    ?php } ?>

  11. Mitch
    December 21, 2014 at 5:36 pm

    I have the following code that allows me to flip between the FEATURE image and an ADSENSE ad and I'd like to also include if an image in the post is used.

    So if "image in post" or "has post thumbnail" then show images, otherwise INCLUDED the .php ad.

    Anyone know how I can accomplish this?

  12. MMax
    May 2, 2014 at 11:04 pm

    If your using an old theme that the author hasn't updated since before WP 2.9 are you just plain out of luck on this feature?

    • James B
      May 9, 2014 at 8:34 am

      not entirely - you can use add_theme_support( 'post-thumbnails' ); to enable functionality, but you'll still need to code in the actual thumbnail output to your theme.

Leave a Reply

Your email address will not be published. Required fields are marked *