Advanced Custom Fields Image Object Tutorial

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

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:

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:

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

15 Responses to “Advanced Custom Fields Image Object Tutorial”

  1. Alex Vasquez

    Seriously? This post totally helped me out of a jam! Was trying to return the Image ID of an ACF field. I knew I needed to set the return Value as an Object; but my syntax was off; this post sorted me out. Double hyper extra yay!

  2. Tamas Antal

    Pointed me to the right direction 🙂 You should definitely offer ACF to write his original documentation. I still don’t believe that such a useful tip has not even been scratched there…

  3. Sarah Tebo

    Huge thanks! I’m brand new to ACF and this helped me bunches. I was really confused on how to grab a particular size of an image, then link it to a larger size. You cleared that right up.

  4. Debbie Campbell

    Thank you so much! I’ve been struggling today trying to figure out how to display a custom image size with a full-size lightbox, and this helped immensely.