Pull image from ACF field in a Custom Post Type

Question

Hopefully, I can explain this well enough, but let me know if not and I'll expand on it.

I've used ACF in conjunction with a Custom Post Type, but when I try to grab the photo that I've uploaded for each product it only shows the photo for the first product each time for all products on the archive-products.php page.

<?php 
    $args = array( 'post_type' => 'products', 'posts_per_page' => 9 );
    $the_query = new WP_Query( $args );

    $landscape = get_field('main_photo_landscape', $post->ID);
?>

<main class="site-content">
    <div class="row">

        <?php if ( $the_query->have_posts() ) : ?>
            <?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>

                <article class="col-12 col-md-6 col-lg-4 product">
                    <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
                        <div class="featured-img" style="background: url('<?php echo $landscape['sizes']['large']; ?>') center center no-repeat; background-size: auto 100%"></div>
                        <h1 class="title"><?php the_title(); ?></h1>
                        <button class="btn">More Details</button>
                    </a>
                </article>

            <?php endwhile; ?>

            <?php the_posts_navigation(); ?>

        <?php endif; ?>

    </div>
</main>

Answer 1

You need to define $landscape in the loop. You're defining out so it is not part of your repeating portion.

Move it down just under the while line so it looks like this:

<?php 
$args = array( 'post_type' => 'products', 'posts_per_page' => 9 );
$the_query = new WP_Query( $args );


?>

<main class="site-content">
<div class="row">

    <?php if ( $the_query->have_posts() ) : ?>
        <?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>

            $landscape = get_field('main_photo_landscape');

            <article class="col-12 col-md-6 col-lg-4 product">
                <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
                    <div class="featured-img" style="background: url('<?php echo $landscape['sizes']['large']; ?>') center center no-repeat; background-size: auto 100%"></div>
                    <h1 class="title"><?php the_title(); ?></h1>
                    <button class="btn">More Details</button>
                </a>
            </article>

        <?php endwhile; ?>

        <?php the_posts_navigation(); ?>

    <?php endif; ?>

</div>

Notice I removed , $post->ID as well.

Answer 2

What's happening here is you are setting $landscape before the loop, so it only gets set once. (So it shows up for each item in the loop.)

To fix this, move your 5th line - $landscape - inside the loop.

<?php 
    $args = array( 'post_type' => 'products', 'posts_per_page' => 9 );
    $the_query = new WP_Query( $args );
    // No longer setting $landscape here, which only sets it once.
?>

<main class="site-content">
    <div class="row">

        <?php if ( $the_query->have_posts() ) : ?>
            <?php while ( $the_query->have_posts() ) : $the_query->the_post();
            // Landscape now pulls for the current post.
            $landscape = get_field('main_photo_landscape', $post->ID);
        ?>

                <article class="col-12 col-md-6 col-lg-4 product">
                    <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
                        <div class="featured-img" style="background: url('<?php echo $landscape['sizes']['large']; ?>') center center no-repeat; background-size: auto 100%"></div>
                        <h1 class="title"><?php the_title(); ?></h1>
                        <button class="btn">More Details</button>
                    </a>
                </article>

            <?php endwhile; ?>

            <?php the_posts_navigation(); ?>

        <?php endif; ?>

    </div>
</main>

This will pull the ACF field for each individual post.