Since version 2.9, WordPress provided a new function, add_image_size() to define additional image sizes along with the three default sizes: Thumbnail, Medium and Large. After defining the additional sizes, we can use them in our themes either using the_post_thumbnail(), wp_get_attachment_image(), or any other functions that suit your needs.

Update
I’ve created a plugin for this so you won’t need to edit your theme/plugin files anymore :) Download it from WordPress plugins repo.

Unfortunately, WordPress didn’t and still doesn’t provide us with the ability to insert images with these custom sizes into our posts. Currently, it only provides us with the three default sizes as shown in the figure below.

Default 'Insert Image into Post' form

I thought it’d be cool if I could insert the images with custom sizes I defined, so I wanted to have the form modified like this (notice the additional vm-medium item):

Enhanced 'Insert Image into Post' form

The Solution

To achieve this, we’ll utilize the attachment_fields_to_edit hook to insert the custom image sizes.

function kc_get_additional_image_sizes() {
	$sizes = array();
	global $_wp_additional_image_sizes;
	if ( isset($_wp_additional_image_sizes) && count($_wp_additional_image_sizes) ) {
		$sizes = apply_filters( 'intermediate_image_sizes', $_wp_additional_image_sizes );
		$sizes = apply_filters( 'kc_get_additional_image_sizes', $_wp_additional_image_sizes );
	}

	return $sizes;
}

kc_get_additional_image_sizes() is just a helper function to get custom image sizes. Actually, WordPress already has a function for this — get_intermediate_image_sizes() — but the array it returns also contains the default image sizes we don’t need. Sure we can remove those sizes after we got the array, but I thought I will need this helper function later in my plugins/themes, so I wrote it.

function kc_additional_image_size_input_fields( $fields, $post ) {
	if ( !isset($fields['image-size']['html']) || substr($post->post_mime_type, 0, 5) != 'image' )
		return $fields;

	$sizes = kc_get_additional_image_sizes();
	if ( !count($sizes) )
		return $fields;

	$items = array();
	foreach ( array_keys($sizes) as $size ) {
		$downsize = image_downsize( $post->ID, $size );
		$enabled = $downsize[3];
		$css_id = "image-size-{$s}-{$post->ID}";
		$label = apply_filters( 'kc_image_size_name', $size );

		$html  = "<div class='image-size-item'>\n";
		$html .= "\t<input type='radio' " . disabled( $enabled, false, false ) . "name='attachments[{$post->ID}][image-size]' id='{$css_id}' value='{$size}' />\n";
		$html .= "\t<label for='{$css_id}'>{$label}</label>\n";
		if ( $enabled )
			$html .= "\t<label for='{$css_id}' class='help'>" . sprintf( "(%d × %d)", $downsize[1], $downsize[2] ). "</label>\n";
		$html .= "</div>";

		$items[] = $html;
	}

	$items = join( "\n", $items );
	$fields['image-size']['html'] = "{$fields['image-size']['html']}\n{$items}";

	return $fields;
}

kc_additional_image_size_input_fields() is the function that will actually insert the custom image sizes list if it the list exists (default), or create it if it doesn’t exist yet (modified by plugins/themes). This function is basically a stripped down version of the built-in image_size_input_fields() function which unfortunately doesn’t provide a filter hook for us to inject our custom image sizes.

The last step is to hook our function into attachment_fields_to_edit so it WordPress will execute it when the media upload lighbox is displayed.

add_filter( 'attachment_fields_to_edit', 'kc_additional_image_size_input_fields', 11, 2 );

As usual, you can add the above code snippets into your themes/plugins, or donwload this plugin, rename the extension to php and upload it to your plugins or mu-plugins folder.

Bugs? Ideas? Feel free to leave your comments below :)