Odd/even html in php loop not alternating properly - php

Question

I've been searching through questions/answers on here, but can't seem to find something that works with my code.
Most of the solutions I've found cause the whole page to get a 500 error. They're generally just snippets of the odd/even php, and aren't working for me to easily integrate with the custom post type loop php I have. I'm probably just not putting it in the right place, but nothing seem to be working.
I'm not super great with php, but this is the one thing I've always had an issue getting to work.
Goal:
Odd posts have the headshot on the left, bio info on the right.
Even posts have the headshot on the right, bio info on the left.
Below is my code, which does load on the page (no 500 error), but doesn't output the alternating layout, just outputs the same layout as if I didn't have the odd/even code.
<?php // theloop
if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<?php $loop = new WP_Query( array( 'post_type' => 'team', 'posts_per_page' => -1, 'order' => 'ASC') ); ?>
<?php while ( $loop->have_posts() ) : $loop->the_post(); ?>
<?php if ($wp_query->current_post % 2 == 0): ?>
<div class="row team-member"> <!--ODD LAYOUT // HEADSHOT LEFT - BIO RIGHT-->
<div class="container">
<div class="row is-table-row">
<div class="col-sm-6 headshot" style="background-image:url(<?php the_field('bio_photo'); ?>);">
<div class="box">
</div>
</div>
<div class="col-sm-6 bio cream-bg">
<div class="box">
<?php if( get_field('additional_logo') ): ?>
<div class="additional-logo"><img src="<?php the_field('additional_logo'); ?>"></div>
<?php endif; ?>
<h2><?php the_field('name'); ?></h2>
<div class="bio-content"><?php the_field('bio'); ?></div>
<div class="contact-container">
<h4>Contact me!</h4>
<?php if( get_field('phone_number') ): ?>
<p><i class="fa fa-phone" aria-hidden="true"></i> <?php the_field('phone_number'); ?></p>
<?php endif; ?>
<p><i class="fa fa-envelope" aria-hidden="true"></i> <?php the_field('email'); ?></p>
</div>
</div>
</div>
</div>
</div>
</div>
<?php else: ?>
<div class="row team-member"> <!--EVEN LAYOUT // HEADSHOT RIGHT - BIO LEFT-->
<div class="container">
<div class="row is-table-row">
<div class="col-sm-6 bio cream-bg">
<div class="box">
<?php if( get_field('additional_logo') ): ?>
<div class="additional-logo"><img src="<?php the_field('additional_logo'); ?>"></div>
<?php endif; ?>
<h2><?php the_field('name'); ?></h2>
<div class="bio-content"><?php the_field('bio'); ?></div>
<div class="contact-container">
<h4>Contact me!</h4>
<?php if( get_field('phone_number') ): ?>
<p><i class="fa fa-phone" aria-hidden="true"></i> <?php the_field('phone_number'); ?></p>
<?php endif; ?>
<p><i class="fa fa-envelope" aria-hidden="true"></i> <?php the_field('email'); ?></p>
</div>
</div>
</div>
<div class="col-sm-6 headshot" style="background-image:url(<?php the_field('bio_photo'); ?>);">
<div class="box">
</div>
</div>
</div>
</div>
</div>
<?php endif ?>
<?php endwhile; wp_reset_query(); ?>
Is there anything I've done wrong here, or a better solution to this? I'm frustrated that this is theoretically a simple request that I just can't seem to make work properly. Any help is much appreciated!

Answer 1

OK, pro tip: programmers are lazy. We like the DRY principle. We don't like to duplicate code, nor do we like to maintain giant blocks of duplicated code.
So, below is a modified version of your loop that is somewhat simpler, with less duplication. I would encourage you to consider other ways to reduce duplication, for example, using CSS classes (floats, possibly) to alternate which is on the left or right, and only render one version of the HTML one time.
The specific problem is that you're not accessing the $current_post property of the correct query object. You should be using $loop->current_post instead of $wpdb->current_post. However, to be super clear / explicit, I would manually set a counter, and use that instead:
<?php // theloop
if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<?php $loop = new WP_Query( array( 'post_type' => 'team', 'posts_per_page' => -1, 'order' => 'ASC') ); ?>
<?php
// initialize the counter here
$post_count = 0;
while ( $loop->have_posts() ) : $loop->the_post(); ?>
<div class="row team-member">
<div class="container">
<div class="row is-table-row">
<?php
// move the if condition here to reduce / simplify code
// reference (and increment) the counter
if ($post_count++ % 2 == 0): ?>
<div class="col-sm-6 headshot" style="background-image:url(<?php the_field('bio_photo'); ?>);">
<div class="box">
</div>
</div>
<div class="col-sm-6 bio cream-bg">
<div class="box">
<?php if( get_field('additional_logo') ): ?>
<div class="additional-logo"><img src="<?php the_field('additional_logo'); ?>"></div>
<?php endif; ?>
<h2><?php the_field('name'); ?></h2>
<div class="bio-content"><?php the_field('bio'); ?></div>
<div class="contact-container">
<h4>Contact me!</h4>
<?php if( get_field('phone_number') ): ?>
<p><i class="fa fa-phone" aria-hidden="true"></i> <?php the_field('phone_number'); ?></p>
<?php endif; ?>
<p><i class="fa fa-envelope" aria-hidden="true"></i> <?php the_field('email'); ?></p>
</div>
</div>
</div>
<?php else: ?>
<div class="col-sm-6 bio cream-bg">
<div class="box">
<?php if( get_field('additional_logo') ): ?>
<div class="additional-logo"><img src="<?php the_field('additional_logo'); ?>"></div>
<?php endif; ?>
<h2><?php the_field('name'); ?></h2>
<div class="bio-content"><?php the_field('bio'); ?></div>
<div class="contact-container">
<h4>Contact me!</h4>
<?php if( get_field('phone_number') ): ?>
<p><i class="fa fa-phone" aria-hidden="true"></i> <?php the_field('phone_number'); ?></p>
<?php endif; ?>
<p><i class="fa fa-envelope" aria-hidden="true"></i> <?php the_field('email'); ?></p>
</div>
</div>
</div>
<div class="col-sm-6 headshot" style="background-image:url(<?php the_field('bio_photo'); ?>);">
<div class="box">
</div>
</div>
<?php endif; ?>
</div>
</div>
</div>
<?php endwhile; wp_reset_query(); ?>