PHP, How To Fetch Information From Two Different $post_id's Within One Loop

I am building a theme for a front page which displays the newest posts of my wordpress website.

I want to show with each post an image, (a advanced custom field from the post itself) and the author of the post (the title of a page which is linked to the post via advanced custom fields).

The code I have is:

    <?php 

    // The Query
    $the_query = new WP_Query( 'posts_per_page=12&offset=1' );


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

            <a href="<?php the_permalink() ?>" class="article">

                <div class="articlepic">
                    <?php $image_obj = get_field('coverpic', $post_id ); if ( $image_obj ) : ?>
                        <img src="<?= $image_obj[ 'sizes' ]['small'] ?>">
                    <?php wp_reset_postdata(); endif; ?>
                </div>

                <div class="articleabout">
                    <?php the_title(); ?>
                    <br> 
                        <?php $post_id = get_field( 'author_link', false, false ); if( $post_id ): echo get_the_title( $post_id ); wp_reset_postdata(); endif; ?>
                    <br>
                    Text about article.
                </div>

            </a>

        <?php endwhile; ?>
        
    <?php wp_reset_postdata(); endif; ?> 

Both div's work fine independently, but when I add the second div (class="articleabout") the first div appears empty.

I suspect this could be because I add another $post_id in the second div which confuses the first div, but I dont know if that is in fact the problem or how I would fix that.

Any advice?

Thanks!

The problem is because you are overwriting your loop data in the middle of your loop, which is breaking the loop.

You need to change 2 things -

1. You are overwriting the $post_id value with the post id for the author page. Just need to use another variable so your main post id isn't affected.
2. Remove the multiple wp_reset_postdata inside the loop (I'm not sure what that is meant to be doing?)

See the updated code below (note this isn't tested but the main idea is there):

<?php 
$the_query = new WP_Query( 'posts_per_page=12&offset=1' );

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

        <a href="<?php the_permalink() ?>" class="article">

            <div class="articlepic">
                <?php $image_obj = get_field('coverpic', $post_id ); 
                 if ( $image_obj ) : ?>
                    <img src="<?= $image_obj[ 'sizes' ]['small'] ?>">
                <?php endif; ?>
            </div>

            <div class="articleabout">
                <?php the_title(); ?>
                <br> 
                <?php 
                 // DON'T USE YOUR POST_ID VARIABLE FOR THE AUTHOR PAGE!!
                 // Save it into a new variable
                 $author_post_id = get_field( 'author_link', false, false ); 
                 if( $author_post_id ): 
                      echo get_the_title( $author_post_id ); 
                 endif; ?>
                <br>
                Text about article.
            </div>

        </a>

    <?php endwhile; ?>
    
<?php wp_reset_postdata(); endif; ?>