Adding Additional Image Sizes to WordPress Themes

WordPress’s media management and automatic image resizing make things really simple for the client. Users don’t have to worry about resizing and compressing images before they upload them. However, when used as a complex CMS system, WordPress’s Thumbnail, Medium, and Large sizes may not be flexible enough. But fret not, your theme can define additional sizes.

Where This May Come In Handy

Especially with version 3.0′s new CMS features, WordPress is easily used to manage content beyond the traditional posts and pages. For example, I personally do a lot of work with musicians. While the Thumb, Medium, and Large image sizes may work well in the context of their blog, these may not apply to other types of content. Album covers may be one size and show fliers may be another. Additionally, I may want to make available larger promo photos while still avoiding the 8 megapixel originals that the client may upload. Hence, we need to define a few additional image resolutions for WordPress to generate when uploading new pictures.

Defining The New Image Sizes

WordPress includes a simple function for achieving this goal, add_image_size(). It requires 4 parameters to do its job: the size’s name, width, height, and whether to crop it. As a personal preference, I place these size definitions (along with any other theme setup) in a function that is hooked onto the after_setup_theme action hook. Below is an example that defines two additional sizes. The first would be used in a front page featured news rotator, and the second is a larger size that is served if visitors want to download an image. This, and any additional code shown, goes in your theme’s functions.php file.

function mytheme_setup() {
	add_image_size('featured-thumbnail',640,320, true);
	add_image_size('x-large',800,800, false);
}
add_action( 'after_setup_theme', 'mytheme_setup' );

Rather simple, eh? Now when a new image is uploaded into WordPress, a cropped 640×320 version and one that fits within 800×800 dimensions will be created.

Using The Sizes in Your Theme

These sizes will not be accessible to the client for insertion into posts and pages. Their strength lies in how they are implemented into your themes. For example, for a recent project I created a front page news rotator that was independent of the blog posts. Therefore, the Thumbnail size was not applicable. So I registered a ‘featured-thumbnail’ size similar to above and created a custom post type for managing the news items. Each news item was given a Featured Image in WordPress’s dashboard.

Then it’s just a matter of using WordPress’s the_post_thumbnail() function to insert the image in our defined dimensions. Generally, the only parameter you need to pass is the name of our newly defined image size. The resulting code is as follows:

<ul>
	<?php
	$featured = new WP_Query("post_type=featured&post_status=publish");
	while ( $featured->have_posts() ) : $featured->the_post();
	?>
	<li>
		<?php the_post_thumbnail('featured-thumbnail'); // Inserts image with our defined dimensions ?> 
		<div class="newsDescription">
			<h3><?php the_title(); ?></h3>
			<p><?php the_content(); ?></p>
		</div>
	</li>
	<?php endwhile; ?>
</ul>

Conclusion

The team of developers behind WordPress are well aware of its evolution from a simple blogging platform to a strong content management system. With the release of version 3.0, managing a wide range of content types has never been easier. Each content type will have its own requirements for display, and being able to define additional image sizes is just one of many tools for meeting those requirements.

25 Comments

  1. petrenkoJuly 23, 2010

    Thanks for handy tutorial. It helped me to make many custom sizes for thumbnails. But all of them looked crappy, because previously site used timthumb.php

    To make them look as intended I used plugin for regeneration of all thumbnails. Now everything is really OK :)

    Additionally, avoiding call to timthumb.php decreases load on server and allows usage of “light” servers for serving static content.

     
  2. laiptuAugust 18, 2010

    Great themes! Gonna try some of them on my wordpress site.

     
  3. Nico-NicoNovember 7, 2010

    Hi there!

    First of all – great post!

    Second…this point is causing me troubles:

    “Now when a new image is uploaded into WordPress, a cropped 640×320 version and one that fits within 800×800 dimensions will be created.”

    I’ve uploaded an 679x305px image, and I’ve created two image sizes:

    function mytheme_setup() {
    add_image_size(‘fp-thumbnail’,679,150, true);
    add_image_size(‘post-image’,679, 305, false);
    }

    The problem is, that fp-thumbnail is NOT cropped, though the crop parameter is ‘true’. Instead the image is resized to 339x150px.

    Do you any suggestion what the problem might be?

    Thanks!

     
  4. Nico-NicoNovember 7, 2010

    Never mind my comment – I found the solution elsewhere:

    “The problem lies in you putting images as thumbnails that were already uploaded before you specified the image size you wanted. Any new images you upload and set should work like a charm.”

    Read more here:

    http://wordpress.org/extend/plugins/regenerate-thumbnails/

     
  5. SoulSizzleNovember 7, 2010

    @Nico-Nico

    Glad you were able to find a solution. You may also want to check out AJAX Thumbnail Rebuild. Always been my preferred method of dealing with this. Check it out at:

    http://wordpress.org/extend/plugins/ajax-thumbnail-rebuild/

     
  6. Central » Blog Archive » 3mg xanax picturesMay 30, 2011

    [...] Adding Additional Image Sizes to WordPress Themes В« SoulSizzle Design Additionally, I may want to make available larger promo photos while still avoiding the 8 megapixel originals that … [...]

     
  7. DJ Tiesto Best songsJune 20, 2011

    Love the site, will like on facebook.

     
  8. DaniJuly 2, 2011

    Hi, thanks for this post! unfortunately i am not a programmer or something, so all this is a bit of a fight, although i somehow get along. the only thing your post didn’t really made clear to me is where do you actually write this function? does this comes into the function.php or where do i have to add it? thanks alot!

     
  9. soulsizzleJuly 13, 2011

    @Dani

    The simplest way to use this code (or just about any other code on my site) is to throw it in the functions.php file of your theme

     
  10. AliceJuly 18, 2011

    very thank you admin.

     
  11. DonneJuly 18, 2011

    Super post thank you admin, thank you for your information. Nice read.

     
  12. DanyJuly 18, 2011

    Thank you for your information. Nice read.

     
  13. MobeseJuly 18, 2011

    Nice read. Very Thank you.

     
  14. AlarmJuly 18, 2011

    Super post thank you admin, thank you for your information. Nice read.

     
  15. Dsc Alarm SistemleriJuly 20, 2011

    Super post thank you admin, thank you for your information. Nice read. Thanks for sharing, very nice article.

     
  16. miao yaaJuly 21, 2011

    CatLove – LAmour des Chats

     
  17. Digi Social Squeeze – Expert ReviewJuly 28, 2011

    Digi Social Squeeze…

    [...] Digi Social Squeeze is a new plugin by Andy that’s an amazing way to build your opt-in using Facebook connects…..[...]…

     
  18. electronic djsAugust 11, 2011

    Great stuff. just tried that on one of my blogs and it works like a charm.

    Cheers

     
  19. Kamera SistemleriSeptember 3, 2011

    Super post thank you admin, thank you for your information. Very nice read.

     
  20. Tory LeskoSeptember 27, 2011

    Awesome post! I purchased a WP theme and for some reason this is not working on my server. I have everything loaded and I can get it to work on my local PC however once I put it on the server, my images are not being cropped instead they are resized and look terrible. In order for add_image_size to work does something need to be enabled on the server?

    Any help would be most appreciated. Thanks — tory

     
  21. KyaniOctober 15, 2011

    Websites worth visiting…

    [...]here are some links to sites that we link to because we think they are worth visiting[...]……

     
  22. RohanDecember 5, 2011

    This seems really great, however I can’t seem to get this to work. In my functions.php I’ve got

    function custom_sizes()
    {
    add_image_size(‘news-thumb’,80,80, true);
    add_image_size(‘index-news-thumb’,20,20, false);
    }
    add_action( ‘after_setup_theme’, ‘custom_sizes’ );

    then inside my news category, I simply put

    It should grab the 80×80 thumb and display it right? But this is not happening. What’s weird is, the 80×80 thumb IS being generated, if I go to wp-content/uploads, it’s there for each image. Strange…

     
  23. RohanDecember 5, 2011

    oh sorry it deleted my php tags. Above should be:

    “I simply put the_post_thumbnail(‘news-thumb’);”

     
  24. RohanDecember 5, 2011

    Ah, figured it out. My

    the_post_thumbnail(‘news-thumb’) was wrapped inside an if(the__post_thumbnail()) statement. I needed to also include the size argument in that statement as well. All good now, thanks!

     
  25. Rich largeDecember 7, 2011

    this was great thanks a lot !!

    speedybars click on my name to go to my website its really impressive

     

Leave a Reply