Advanced Custom Fields Won't Display Data

Question

<?php $args=array( 'post_type'=> 'slides', 'posts_per_page' => 4, 'orderby' => "date", 'order' => "desc" ); 
      $slides = get_posts( $args ); 
?>

<div class="carousel-inner">
    <?php $x=0 ;?>
    <?php foreach ( $slides as $slide ) : setup_postdata( $slide ); ?>
    <div class="item <?php echo($x === 0 ?'active':'non-active')?>" style="background-image: url(<?php the_field('picture'); ?>); height:801px;">
    </div>
    <?php $x++;?>

    <?php endforeach;?>
    <php wp_reset_postdata();?>

</div>

I am using the Advanced Custom Fields plugin for WordPress, but it is not outputting data when using the suggested code. Please see style="background-image: url(<?php the_field('picture'); ?> All it outputs is blank data, I can't seem to find the problem.

Answer 1

Since you are querying for more than one slide, you need to include the $slide->ID in your for each loop. Try this:

<?php $args=array( 'post_type'=> 'slides', 'posts_per_page' => 4,'orderby' => "date", 'order' => "desc" ); 
  $slides = get_posts( $args ); 
?>

<div class="carousel-inner">
    <?php $x=0 ;?>
    <?php foreach ( $slides as $slide ) : setup_postdata( $slide ); ?>
        <div class="item <?php echo($x === 0 ?'active':'non-active')?>" style="background-image: url(<?php the_field('picture', $slide->ID); ?>); height:801px;">
        </div>
    <?php $x++;?>
    <?php endforeach;?>
    <php wp_reset_postdata();?>
</div>

The best way to help you would be if you could var_dump and die on $slides or $slide and paste the response you get here. Picture may have other fields associated with it you need instead.