Home Forums General Issues Add image to image field type


Add image to image field type

  • Hi! I don’t know where to find this info. I look at the page for the “update_field”-function, but it doesn’t say how to add an image to an image field. ( update_field )

    I know an easy way that works, by adding just the image ID:

    $imagefield = 'pagetype1_image';
    update_field( $imagefield, 181, $page_id );

    ..or with the wordpress function:
    update_post_meta($page_id, $imagefield, 181);

    But I want to be able to add the image path, the alt text, and maybe some css class. But why can’t I even use the image path as the value (instead of the image ID)?

    I get the image size and the alt text:

    $img = wp_get_attachment_image_src( 181, 'thumbnail');         
    $img_alttext = get_post_meta(181, '_wp_attachment_image_alt', true);

    $img is an array where $img[0] contains the path.

    Adding the path doesn’t work:
    update_field( $imagefield, $img[0], $page_id );

    So this doesn’t work :

            $content = array(
                'img'=> $img[0],            //path
                'class' => 'hello',
                'alt' => $img_alttext
            update_field( $imagefield, $content, $page_id );

    (or : update_post_meta($page_id,$imagefield,$content); )

    How can I make it work?

  • You are not going to be able to add an image path to an ACF image field. ACF image field like you say, only store the image ID. All of the other information is stored with the image’s attachment post entry an post meta.

    To do this you need to insert the image into the media library and then update the ACF field with the ID of the attachment. This is not something that ACF will do for you.


    The other information is stored in various places
    alt => post meta name _wp_attachment_image_alt
    caption => post excerpt
    descriptions => post content
    title -> post title

  • Okay, so if I want to add an alt text, I better update the actual image.

    But regarding image size, is this specified beforehand on the field? There is a section called “preview size”, I guess that’s where you specify what size is going to be selected? So there is only one set size for each field?

  • The preview size is only what is show when an image is selected in the admin. You can use any size of the image on the front end for the most part, with the exception of returning the url for the image.

    There are tree return values, Image Array, Image URL and Image ID.

    If you set the field to return the image URL then the URL returned will be the full size image URL, so you’re locked into this size.

    If you return an Image Array then all of the information about the image and all of it’s sizes are returned.

    If you return the Image ID then you can use that ID to get any image size you want using standard WP function like wp_get_attachment_image_src()

    All of these return values and how to use them are covered in the documentation for the image field.

  • What would the final code look like if I want to set image ID 181 and ‘medium’ size?

    $imagefield = 'pagetype1_image';
    update_field( $imagefield, 181, $page_id );

    This only specifies the ID, not the size?

    The field is set to return the image object.

  • 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

        [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] =>
        [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

  • So I add the image first with update_field(). And I want to specify the image size of this image in its custom field – do I put the extra code in a page template for each page? Or where do I put it?

    I look in the documentation, and on “Customized display (Object)” they first get the image object (I guess for the current page), then it seems they use that object to echo the image somewhere (anywhere). So they are not changing the custom field image, they get the data from it to display it again in some other part of the page (if I didn’t misunderstood it). I want to change the original custom field image that is already added with “update_field”.And it seems that this image is always the full size image.

  • Yes, to display the image of the size that you want, wherever it is that you want to display the image you edit the template file to output the html for that image size.

Viewing 8 posts - 1 through 8 (of 8 total)

The topic ‘Add image to image field type’ is closed to new replies.