2

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>

2 Answers 2

2

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.

2
  • Beat me to it. :)
    – WebElaine
    Commented Apr 2, 2020 at 21:36
  • Brilliant, thank you both for helping. I can't believe I made such a stupid mistake. @rudtek thanks for also adding a note about $post->ID.
    – Dan
    Commented Apr 4, 2020 at 12:21
1

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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