How To Add Images With Addition Sizes To Wordpres 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.

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.

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.

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>

</div>

</li>

<?php endwhile; ?>

</ul>

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.