WordPress Custom Images Sizes & Advanced Custom Fields

When developing a custom theme for WordPress it is sometimes very useful to have custom fields with images of set sizes which are used for links, slideshows and custom galleries.

For example the Website screenshots on this website use a custom field called ‘screenshot’ (created in Advanced Custom Fields) to contain the full size screenshot and custom image sizes for the images in the links on the right sidebar.

In functions.php file:

add_image_size('website_link', 268, 100, true)

Where you want to display the website_link image

$image = wp_get_attachment_image_src(get_field('screenshot'), 'website_link', false)
// $image[0] -- Contains the URL
// $image[1] -- Contains the Width
// $image[2] -- Contains the Height

The main advantages of using this technique is that you can design a theme with nice fixed size image links and the client just has to add an image into a field and it is automatically correctly resized.

Plugins used in this example

http://wordpress.org/extend/plugins/advanced-custom-fields/

WordPress Codex references for code used in this example:-

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