How do you create and use a customised image size from uploaded images?

Sometimes don’t you get frustrated at not having the correct image size placed in to your website or don’t know how to resize your images via Photoshop. Here’s a quick and easy solution for you.

To create a variety of sizes of a particular image,  the add_image_size function would be used which allows you to set the height and width of the image. The reason of using the add_image_size function could be down to the ability to use a specific image size in your single page post as well as using a thumbnail of the same image in your blog list, which is could be at a smaller size.

The coding below needs to be added in the functions.php file.

[php toolbar=”false”]add_image_size( name, width, height, crop );[/php]

Example

[php toolbar=”false”]add_image_size( ‘thumb-size’, 220, 180, true ); //(cropped)
add_image_size( ‘post-size’, 420, 280, true ); //(cropped)
[/php]

Applying the image to the post.

To apply the image which has been assigned to the featured image to the post, you would use the wp_get_attachment_image_src function. The attachment_id is required to get the image, this is achieved by using the get_post_thumbnail_id method and passing the current post ID to it, in return providing the attachment_id of the featured image of the post or the page. 

To set the custom image size, you would add “post-size” to the second parameter.

[php toolbar=”false”]wp_get_attachment_image_src( attachment_id, size)[/php]

Example

[php toolbar=”false”]$the_image = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), ‘post-size’)[/php]

Other keyword that may be useful for the size parameter are thumbnail, medium, large or full, theses are the default sizes set in the Settings -> Media for all the images that are uploaded.

This function will return an array with the follow.

[0] => url
[1] => width
[2] => height

The below will print out the URL location of the image.

[php toolbar=”false”][/php]

Reference

http://codex.wordpress.org/Function_Reference/add_image_size
http://codex.wordpress.org/Function_Reference/wp_get_attachment_image_src