Documentation

On this page

  • Category: Field Types
  • Written: December 27, 2011
  • Updated: August 9, 2012

« Back to docs

Image

The Image field creates an image upload input. The image handling interface is native to WP.

Creating an image field

The Image field contains options to customize your field:

  • Return Value: All values will be stored in the database as the attachment ID. However, you can set the return value to either Object, URL or ID. Please view the code examples bellow for a demonstration of using the 3 types of value.
  • Preview Size: The image size shown in the admin edit screens.

Edit screen

The Image field launches the WordPress media uploaded and utilities most of the standard features

Template usage

The API will return either the full url or the ID of the image. This can be used in an img tag to create an image or used in a number of other ways to create custom results in your theme.

<?php
 
/*
*  Show selected image
*  Return value = URL
*/
 
?>
<img src="<?php the_field('field_name'); ?>" alt="" />
<?php
 
/*
*  Show selected image if value exists
*  Return value = URL
*/
 
if( get_field('field_name') ):
	?><img src="<?php the_field('field_name'); ?>" alt="" /><?php
endif;
 
/*
*  Show selected image cropped to a specific size
*  Return value = ID ( allows us to get more data about the image )
*  This example uses the WP function: wp_get_attachment_image - http://codex.wordpress.org/Function_Reference/wp_get_attachment_image
*/
 
$attachment_id = get_field('field_name');
$size = "full"; // (thumbnail, medium, large, full or custom size)
 
wp_get_attachment_image( $attachment_id, $size );
 
/*
*  Get selected image cropped to a specific size
*  Return value = ID ( allows us to get more data about the image )
*  This example uses the WP function: wp_get_attachment_image_src - http://codex.wordpress.org/Function_Reference/wp_get_attachment_image_src
*/
 
$attachment_id = get_field('field_name');
$size = "full"; // (thumbnail, medium, large, full or custom size)
 
$image = wp_get_attachment_image_src( $attachment_id, $size );
// url = $image[0];
// width = $image[1];
// height = $image[2];
?>
<img src="<?php echo $image[0]; ?>" />
<?php
 
/*
*  Get Image data
*  Return value = ID ( allows us to get more data about the image )
*/
 
$attachment = get_post( get_field('field_name') );
 
$alt = get_post_meta($attachment->ID, '_wp_attachment_image_alt', true);
$image_title = $attachment->post_title;
$caption = $attachment->post_excerpt;
$description = $attachment->post_content;
 
/*
*  Return value = Object
*  requires ACF 3.3.7+
*/
 
$image = get_field('image');
 
var_dump($image);
 
/*
 
Data returned will look like this:
 
Array
(
    [id] => 540
    [alt] => A Movie
    [title] => Movie Poster: UP
    [caption] => sweet image
    [description] => a man and a baloon
    [url] => http://localhost:8888/acf/wp-content/uploads/2012/05/up.jpg
    [sizes] => Array
        (
            [thumbnail] => http://localhost:8888/acf/wp-content/uploads/2012/05/up-150x150.jpg
            [medium] => http://localhost:8888/acf/wp-content/uploads/2012/05/up-300x119.jpg
            [large] => http://localhost:8888/acf/wp-content/uploads/2012/05/up.jpg
            [post-thumbnail] => http://localhost:8888/acf/wp-content/uploads/2012/05/up.jpg
            [large-feature] => http://localhost:8888/acf/wp-content/uploads/2012/05/up.jpg
            [small-feature] => http://localhost:8888/acf/wp-content/uploads/2012/05/up-500x199.jpg
        )
 
)
 
*/
 
?>