Advanced Custom Fields Image Object Tutorial

Alicia Ramirez

12 years ago

Update (10/11/2016): I added some escaping to the examples. Better safe than sorry.

When creating an image custom field in Advanced Custom Fields, it gives you the option of setting the “Return Value” as an “Image Object”.

Advanced Custom Field Adding an Image Screen

If you choose the “Image Object”, get_field() will get a multidimensional array with all of the image’s values in it (instead of just the URL for the full size version, or the attachment ID), which will look something like this:

$imageArray = get_field('image_field');
var_dump($imageArray);
/* output:
array(9) {
    ["id"]=>int(5)
    ["alt"]=>string(4) "Test"
    ["title"]=>string(2) "29"
    ["caption"]=>string(0) ""
    ["description"]=>string(0) ""
    ["url"]=>string(67) "http://localhost:8888/site/wp-content/uploads/2013/10/29.jpg"
    ["width"]=>int(1280)
    ["height"]=>int(960)
    ["sizes"]=>array(18) {
        ["thumbnail"]=>string(75) "http://localhost:8888/site/wp-content/uploads/2013/10/29-150x150.jpg"
        ["thumbnail-width"]=>int(150)
        ["thumbnail-height"]=>int(150)
        ["medium"]=>string(75) "http://localhost:8888/site/wp-content/uploads/2013/10/29-300x225.jpg"
        ["medium-width"]=>int(300)
        ["medium-height"]=>int(225)
        ["large"]=>string(76) "http://localhost:8888/site/wp-content/uploads/2013/10/29-1024x768.jpg"
        ["large-width"]=>int(1024)
        ["large-height"]=>int(768)
        ["bones-thumb-600"]=>string(75) "http://localhost:8888/site/wp-content/uploads/2013/10/29-600x150.jpg"
        ["bones-thumb-600-width"]=>int(600)
        ["bones-thumb-600-height"]=>int(150)
        ["bones-thumb-300"]=>string(75) "http://localhost:8888/site/wp-content/uploads/2013/10/29-300x100.jpg"
        ["bones-thumb-300-width"]=>int(300)
        ["bones-thumb-300-height"]=>int(100)
        ["post-thumbnail"]=>string(75) "http://localhost:8888/site/wp-content/uploads/2013/10/29-125x125.jpg"
        ["post-thumbnail-width"]=>int(125)
        ["post-thumbnail-height"]=>int(125)
    }
}
*/

```
$imageArray = get_field('image_field');
```
```
var_dump($imageArray);
```
```
/* output:
```
```
array(9) {
```
```
    ["id"]=>int(5)
```
```
    ["alt"]=>string(4) "Test"
```
```
    ["title"]=>string(2) "29"
```
```
    ["caption"]=>string(0) ""
```
```
    ["description"]=>string(0) ""
```

    ["url"]=>string(67) "http://localhost:8888/site/wp-content/uploads/2013/10/29.jpg"

```
    ["width"]=>int(1280)
```
```
    ["height"]=>int(960)
```
```
    ["sizes"]=>array(18) {
```

        ["thumbnail"]=>string(75) "http://localhost:8888/site/wp-content/uploads/2013/10/29-150x150.jpg"

        ["thumbnail-width"]=>int(150)

        ["thumbnail-height"]=>int(150)

        ["medium"]=>string(75) "http://localhost:8888/site/wp-content/uploads/2013/10/29-300x225.jpg"

        ["medium-width"]=>int(300)

        ["medium-height"]=>int(225)

        ["large"]=>string(76) "http://localhost:8888/site/wp-content/uploads/2013/10/29-1024x768.jpg"

        ["large-width"]=>int(1024)

        ["large-height"]=>int(768)

        ["bones-thumb-600"]=>string(75) "http://localhost:8888/site/wp-content/uploads/2013/10/29-600x150.jpg"

        ["bones-thumb-600-width"]=>int(600)

        ["bones-thumb-600-height"]=>int(150)

        ["bones-thumb-300"]=>string(75) "http://localhost:8888/site/wp-content/uploads/2013/10/29-300x100.jpg"

        ["bones-thumb-300-width"]=>int(300)

        ["bones-thumb-300-height"]=>int(100)

        ["post-thumbnail"]=>string(75) "http://localhost:8888/site/wp-content/uploads/2013/10/29-125x125.jpg"

        ["post-thumbnail-width"]=>int(125)

        ["post-thumbnail-height"]=>int(125)

```
    }
```
```
}
```
```
*/
```

As you can see, this is a lot of information, which means, power! You can now use all that information to properly display that image in your templates.

To get a specific value, for example the ‘alt’, and ‘thumbnail’ size, you would have the following code:

<?php

 $imageArray = get_field('image_field'); // Array returned by Advanced Custom Fields
 $imageAlt = esc_attr($imageArray['alt']); // Grab, from the array, the 'alt'
 $imageThumbURL = esc_url($imageArray['sizes']['thumbnail']); //grab from the array, the 'sizes', and from it, the 'thumbnail'
 ?>

 <div><img src="<?php echo $imageThumbURL;?>" alt="<?php echo $imageAlt; ?>"></div>

```
<?php
```
```
 
```

 $imageArray = get_field('image_field'); // Array returned by Advanced Custom Fields

 $imageAlt = esc_attr($imageArray['alt']); // Grab, from the array, the 'alt'

 $imageThumbURL = esc_url($imageArray['sizes']['thumbnail']); //grab from the array, the 'sizes', and from it, the 'thumbnail'

```
 ?>
```
```
 
```

 <div><img src="<?php echo $imageThumbURL;?>" alt="<?php echo $imageAlt; ?>"></div>

If, for example, you wanted to do a lightbox with your images, you would do this:

<?php

 $imageArray = get_field('image_field'); // Array returned by Advanced Custom Fields
 $imageAlt = esc_attr($imageArray['alt']); // Grab, from the array, the 'alt'
 $imageURL = esc_url($imageArray['url']); // Grab the full size version 
 $imageThumbURL = esc_url($imageArray['sizes']['thumbnail']); //grab from the array, the 'sizes', and from it, the 'thumbnail'
 ?>

 <a href="<?php echo $imageURL; ?>">
    <img src="<?php echo $imageThumbURL;?>" alt="<?php echo $imageAlt; ?>">
</a>

```
<?php
```
```
 
```

 $imageArray = get_field('image_field'); // Array returned by Advanced Custom Fields

 $imageAlt = esc_attr($imageArray['alt']); // Grab, from the array, the 'alt'

 $imageURL = esc_url($imageArray['url']); // Grab the full size version

 $imageThumbURL = esc_url($imageArray['sizes']['thumbnail']); //grab from the array, the 'sizes', and from it, the 'thumbnail'

```
 ?>
```
```
 
```
```
 <a href="<?php echo $imageURL; ?>">
```

    <img src="<?php echo $imageThumbURL;?>" alt="<?php echo $imageAlt; ?>">

```
</a>
```