Customizing WordPress Image Sizes

Images on a website are often cut to exact size by a developer or designer while building a website.  Its easy to forget that you can easily customize the standard thumbnail sizes in the WordPress Media Settings.

Screen Shot 2013-12-14 at 4.37.17 PM

One of the most useful techniques is to set the large size to the width of the content area of the website so you can easily insert full width images.

You can create additional image sizes and edit the WordPress default image sizes in the functions file.

if ( function_exists( 'add_theme_support' ) ) {
add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 150, 150 ); // default Post Thumbnail dimensions
}

if ( function_exists( 'add_image_size' ) ) {
add_image_size( 'category-thumb', 300, 9999 ); //300 pixels wide (and unlimited height)
add_image_size( 'homepage-thumb', 220, 180, true ); //(cropped)
}

You can also add these new image sizes to the visual editor so users can select the thumbnail size when they are inserting it into a page.

add_filter( 'image_size_names_choose', 'my_custom_sizes' );

function my_custom_sizes( $sizes ) {
    return array_merge( $sizes, array(
        'your-custom-size' => __('Your Custom Size Name'),
    ) );
}

This snippet and more information about cropping options are in the WordPress Codex for Image Sizes

Leave a Reply

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

Time limit is exhausted. Please reload CAPTCHA.