Site icon Hip-Hop Website Design and Development

Looping through image object using ACF and CPT UI [SOLVED]

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)