How do you query a custom post type (CPT) via an ACF relationship field?

Overview

I have two CTPs:

1. Range: Which showcases 4 van types
2. Wheels Which showcases all wheels a van can have.

In the wheels post type, I have two ACF fields:

1. Image: Which is of type image (an image of the wheel). The name of this field is image
2. Available on: Which is a relationship field where we can select which vans (from the range post type) this wheel is available on. The name of this field is available_on_range

Now, I’m querying range by id for each page and want to pull in all of the wheels that have this range in its relationship field.

For example, allow wheel 7 is available on range/van 1, but not on range/van 4.

Current problem

My relationship field is working, as I’m able to get and output the wheel name (post_title), however, I can’t seem to get the image for that wheel (no src).

Code

<?php

$args = array(
  'post_type'      => 'range',
  'post_status'    => 'publish',
  'p'  => $select_range, // id of post
);

$query = new WP_Query( $args );

$title = "";

if ( $query->have_posts() ) :
  global $post;
  while ( $query->have_posts() ) : $query->the_post();
    $title =  get_the_title();
  endwhile;
  wp_reset_postdata();
endif;

$related_wheels = get_posts(array(
  'post_type' => 'wheels',
  'meta_query' => array(
    array(
      'key' => 'available_on_range', // name of custom field
      'value' => '"' . $select_range . '"',
      'compare' => 'LIKE'
    )
  )
));

?>

<div class="options-wheels">
  <?php
  if( $related_wheels ):
    foreach( $related_wheels as $wheel ):
      $wheel_name = $wheel->post_title;
      $wheel_image = get_field("image");

      ?>
      <div class="configurator__options-wheel">
        <img src="<?php echo $wheel_image; ?>" alt="<?php echo $wheel_name; ?>" loading="lazy"/>
      </div>
    <?php endforeach;
  endif;
  ?>
</div>

A var_dump($wheel_image) returns NULL.

How can I get the image?

Have also tried

• <img src="<?php echo the_field('image'); ?>" alt="<?php echo $wheel_name; ?>" loading="lazy"/>
• <img src="<?php echo esc_url($wheel_image['url']); ?>" alt="<?php echo $wheel_name; ?>" loading="lazy"/>

A var_dump($wheel) doesn’t show anything related to the image:

object(WP_Post)#2964 (24) { ["ID"]=> int(4363) ["post_author"]=> string(1) "2" ["post_date"]=> string(19) "2022-05-18 11:00:08" ["post_date_gmt"]=> string(19) "2022-05-18 11:00:08" ["post_content"]=> string(0) "" ["post_title"]=> string(7) "Wheel 1" ["post_excerpt"]=> string(0) "" ["post_status"]=> string(7) "publish" ["comment_status"]=> string(6) "closed" ["ping_status"]=> string(6) "closed" ["post_password"]=> string(0) "" ["post_name"]=> string(4) "4363" ["to_ping"]=> string(0) "" ["pinged"]=> string(0) "" ["post_modified"]=> string(19) "2022-05-18 14:02:47" ["post_modified_gmt"]=> string(19) "2022-05-18 14:02:47" ["post_content_filtered"]=> string(0) "" ["post_parent"]=> int(0) ["guid"]=> string(45) "http://rev.test/?post_type=wheels&p=4363" ["menu_order"]=> int(0) ["post_type"]=> string(6) "wheels" ["post_mime_type"]=> string(0) "" ["comment_count"]=> string(1) "0" ["filter"]=> string(3) "raw" }

Which means that there is an issue with my $related_wheels query. But, I only want to query wheels that match the id of the current page, which is what the query currently does. How do I make it show the image data also?

Answer

Please change the get Image field like this. The type of $wheel is object, so you couldn’t use the method of getting value of array.

$wheel_image = get_field("image", $wheel->ID);

Then you can add image url to the Image tag.

<div class="configurator__options-wheel">
  <img src="<?php echo $wheel_image['url']; ?>" alt="<?php echo $wheel_name; ?>" loading="lazy"/>
</div>