Reply To: Add image to image field type

• John Huebner

• January 4, 2016 at 6:18 am

I think you’re not understanding. The database, and the field does not contain information about the size of the image. That information is part of the ACF field definition. When you update the field the only thing you’re changing is the attachment ID.

the field is set to return the image object. Here is an example of an image object from something I’m currently working on

Array
(
    [ID] => 258
    [id] => 258
    [title] => dragon001
    [filename] => dragon001.jpg
    [url] => /wp-content/uploads/2016/01/dragon001.jpg
    [alt] => 
    [author] => 1
    [description] => 
    [caption] => 
    [name] => dragon001
    [date] => 2016-01-01 03:23:19
    [modified] => 2016-01-03 18:30:34
    [mime_type] => image/jpeg
    [type] => image
    [icon] => http://www.ssird5.com.php53-8.dfw1-2.websitetestlink.com/wp-includes/images/media/default.png
    [width] => 1024
    [height] => 768
    [sizes] => Array
        (
            [thumbnail] => /wp-content/uploads/2016/01/dragon001-150x150.jpg
            [thumbnail-width] => 150
            [thumbnail-height] => 150
            [medium] => /wp-content/uploads/2016/01/dragon001-300x225.jpg
            [medium-width] => 300
            [medium-height] => 225
            [medium_large] => /wp-content/uploads/2016/01/dragon001-768x576.jpg
            [medium_large-width] => 768
            [medium_large-height] => 576
            [large] => /wp-content/uploads/2016/01/dragon001-1024x768.jpg
            [large-width] => 1024
            [large-height] => 768
            [post-thumbnail] => /wp-content/uploads/2016/01/dragon001-500x375.jpg
            [post-thumbnail-width] => 500
            [post-thumbnail-height] => 375
            [w-320] => /wp-content/uploads/2016/01/dragon001-320x240.jpg
            [w-320-width] => 320
            [w-320-height] => 240
            [w-480] => /wp-content/uploads/2016/01/dragon001-480x360.jpg
            [w-480-width] => 480
            [w-480-height] => 360
            [w-640] => /wp-content/uploads/2016/01/dragon001-640x480.jpg
            [w-640-width] => 640
            [w-640-height] => 480
            [w-800] => /wp-content/uploads/2016/01/dragon001-800x600.jpg
            [w-800-width] => 800
            [w-800-height] => 600
            [w-960] => /wp-content/uploads/2016/01/dragon001-960x720.jpg
            [w-960-width] => 960
            [w-960-height] => 720
            [w-1120] => /wp-content/uploads/2016/01/dragon001.jpg
            [w-1120-width] => 1024
            [w-1120-height] => 768
            [w-1280] => /wp-content/uploads/2016/01/dragon001.jpg
            [w-1280-width] => 1024
            [w-1280-height] => 768
            [w-1440] => /wp-content/uploads/2016/01/dragon001.jpg
            [w-1440-width] => 1024
            [w-1440-height] => 768
            [w-1600] => /wp-content/uploads/2016/01/dragon001.jpg
            [w-1600-width] => 1024
            [w-1600-height] => 768
            [w-1760] => /wp-content/uploads/2016/01/dragon001.jpg
            [w-1760-width] => 1024
            [w-1760-height] => 768
            [w-1920] => /wp-content/uploads/2016/01/dragon001.jpg
            [w-1920-width] => 1024
            [w-1920-height] => 768
            [w-2080] => /wp-content/uploads/2016/01/dragon001.jpg
            [w-2080-width] => 1024
            [w-2080-height] => 768
            [w-2240] => /wp-content/uploads/2016/01/dragon001.jpg
            [w-2240-width] => 1024
            [w-2240-height] => 768
            [w-2400] => /wp-content/uploads/2016/01/dragon001.jpg
            [w-2400-width] => 1024
            [w-2400-height] => 768
        )

)

to show the medium image from this on the front end it would look something like

<img src="<?php 
  echo $image['sizes']['medium']; ?>" width="<?php
  echo $image['sizes']['medium-width']; ?>" height="<?php
  echo $image['sizes']['medium-height']; ?>" alt="<?php 
  echo $image['alt']; ?>" />

This is explained in the image field documentation http://www.advancedcustomfields.com/resources/image/