Answer

https://www.reddit.com/r/Wordpress/comments/7h7e9r/looping_through_image_object_using_acf_and_cpt_ui/

Rishadan on reddit gave a simple answer to this question. I'm finding the WHY out at the moment but the answer is the $website_image = get_field('website_image') variable needs to be defined in the while loop. Then you can access the arrays different properties like so echo $website_image['url']. If you want to create the variable outside of the loop, you would need to provide a post_id parameter.

Problem

Cannot access values of array in an Image Object from Advanced Custom Fields

Expected Result

Should be able to access URL and ALT specifically, but would like to know how to access the rest

MAIN

I have a section on a site I'm working on where I want to be able to create an indefinite amount of content for that area. So I bring in Advanced Custom Fields and create a Custom Post Type, write my loop, and now I'm stuck.

I'm not very familiar with PHP to be completely honest, I'm kind of learning as I go. So I understand that with images, ACF can return an image object and you can easily access any of the keys using bracket notation ie.

<?php    
$website_image = get_field('website_image');
?>

<img src="<?php echo $website_image['url']; ?>" alt="<?php $website_image['alt']; ?>">

This is just an extremely simple example, but if you uploaded and image to a custom field with a type of image, you could display the image like this. It seems that when returning an Image Object from ACF and using it in a Custom Post Type, this method does not work

<?php    
  // Notice the use of the_field() instead of get_field()
  $website_image = the_field('website_image');
?>

<img src="<?php echo $website_image['url']; ?>" alt="<?php $website_image['alt']; ?>">

I realize that I can just simply use the image as a Featured Image and be done with this, but I would really like to figure this out in case I were to ever need to add multiple images to a single post type.

ACF > Portfolio Site Images

Field Label: Website Image
Field Name: website_image
Field Type: Image
Return Value: Image Object

Custom Post Type > Portfolio Sites

Post Type Slug: portfolio_sites
Plural Label: Portfolio Sites
Singular Label: Portfolio Site

content-portfolio.php

<?php

  $portfolio_header = get_field('portfolio_header');
  $website_image = the_field('website_image');

?>

<a name="portfolio"></a>
<section id="home-portfolio-section" class="container-fluid">
  <header class="row mb-5 pt-5">
    <h2 class="h1">
      <?php echo $portfolio_header; ?>
    </h2>
  </header> <!-- row -->

  <article class="row text-center">
    <div class="col-12">
      <div class="row">

        <?php
          $loop = new WP_QUERY(
            [
              'post_type' => 'portfolio_sites',
              'order' => 'ASC',
              'orderby' => 'ID'
            ]
          );

          if ($loop->have_posts()) :
            while ($loop->have_posts()) : $loop->the_post();
        ?>
              <div class="col-12 mb-5 col-md-6">
                // This next line is the problem
                <img src="<?php the_field('website_image'); ?>" alt="">
              </div>    
        <?php
          endwhile;
          wp_reset_postdata();
        endif;
        ?>

      </div>
    </div>
  </article>
</section>

Failed Attempts

echo the_field('website_image') returns a list of the arrays values

46,
,
testservert-xs,
,
,
image/png,
http://localhost/wptest/wp-content/uploads/2017/11/testservert-xs.png,
575,
264,
Array

If I attempt a var_dump($website_image) where $website_image = the_field('website_image') it returns NULL

A var_dump($website_image) where $website_image = get_field('website_image') returns bool(false)

  • You're using the_field() wrong in several places. You have a comment that says // Notice the use of the_field() instead of get_field(). Why? the_field() echos the value and get_field() returns it. If you're assigning to a variable you need to return it. – Jacob Peattie Dec 3 '17 at 2:03
  • Fair enough, I'd like to point out that if I assign $website_image = get_field('website_image') it will either return echo $website_image['url']; it returns empty, not even a NULL. If I try <img src="<?php echo $website_image['url'] ?>"> and inspect it in devtools, it returns <img src(unknown)> and a var_dump($website_image) returns a bool(false) – Brandon Benefield Dec 3 '17 at 2:09
  • You either don't have an image selected on that field or have the name of the field incorrect. – Jacob Peattie Dec 3 '17 at 2:17
  • Well if you look under Failed Attempts at the bottom of the question, I use the_field('website_image') and it returns an array, with values. So there is definitely an image, and if it returns an array how is the name incorrect? – Brandon Benefield Dec 3 '17 at 2:27

the_field() directly echoes the contents of a field. If you want to use the_field() , you should change the field output to url in acf settings panel (Where you created the field).

If you however wish to play around with var_dump() and return a specific value from an object, you should use get_field('field_name').

So in your example, that would look something like this:

<?php
    if(get_field('website_image')):
    $wimg = get_field('website_image');?>
    <img src="<?php echo $wimg['url']; ?>">
<?php endif;?>
  • Thanks for responding, you're probably on to something here but that wouldn't work because I need to loop through every post in the portfolio_sites post type. This question has actually been answered here reddit.com/r/Wordpress/comments/7h7e9r/… – Brandon Benefield Dec 3 '17 at 17:45
  • That also works, but as I've said, you'd need to set it as "url output". Alternatively you could just go with get_field('website_image', $post->ID); then just do the same $wimg['url']; – Daniel Fonda Dec 3 '17 at 18:36

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.