wordpress loop – different html for every 2nd custom post

Question

i am searching since a while for a solution to set my custom post loop like this:

first post> img left, content right // second post> content left, img right

this is my code so far:

<div class="container">
<?php $loop = new WP_Query( array( 'post_type' => 'profile', 'posts_per_page' => 10 ) ); ?>
<?php if (have_posts()) : while(have_posts()) : the_post(); $i++; if(($i % 2) == 0) :  ?>

   <article id="post-<?php the_ID(); ?>" <?php post_class(''); ?> role="article" itemscope itemprop="blogPost" itemtype="http://schema.org/BlogPosting">
                <div class="row centered wow fadeInUpBig" data-wow-duration="2s">   
                    <div class="col col-4">
                           <?php the_post_thumbnail(600); ?>
                </div>
                <div class="col col-6">
                <section class="entry-content cf" itemprop="articleBody">
<span class="bold function"><?php echo get_the_term_list( $post->ID, 'Funktion', '', ', ', '' ); ?></span> 
                       <h2 class="entry-title single-title" itemprop="headline" rel="bookmark"><?php the_title(); ?></h2>
                  <?php the_content();?>
                </section> 
                 </div>
                </div>
              </article>
<?php else : ?>

   <article id="post-<?php the_ID(); ?>" <?php post_class(''); ?> role="article" itemscope itemprop="blogPost" itemtype="http://schema.org/BlogPosting">
                <div class="row centered wow fadeInUpBig" data-wow-duration="2s">  
                                <div class="col col-6">
                <section class="entry-content cf" itemprop="articleBody">
<span class="bold function"><?php echo get_the_term_list( $post->ID, 'Funktion', '', ', ', '' ); ?></span> 
                       <h2 class="entry-title single-title" itemprop="headline" rel="bookmark"><?php the_title(); ?></h2>
                  <?php the_content();?>
                </section> 
                 </div>
                    <div class="col col-4">
                           <?php the_post_thumbnail(600); ?>
                </div>

                </div>
              </article>
<?php endif; endwhile; endif; ?>
</div>

I know, this question has been asked a couple of times, and i tried already this and this and i read this but nothing works for me. What am i doing wrong?

Answer 1

I imagine its only outputting one post, and that post is actually the post content attached to the page. The problem is how you are initialising your additional loop within the page. You are creating a new post object - but you are not assigning it to the if / while statements:

<?php if (have_posts()) : while(have_posts()) : the_post(); $i++; if(($i % 2) == 0) :  ?>

should be:

<?php if ($loop->have_posts()) : while($loop->have_posts()) : $loop->the_post(); $i++; if(($i % 2) == 0) :  ?>

Notice the addition of the $loop variable where you are setting your post object and arguments.

Answer 2

i got this code (not altering) working already:

                <div class="container">
<?php $loop = new WP_Query( array( 'post_type' => 'profile', 'posts_per_page' => 10 ) ); ?>
<?php while ( $loop->have_posts() ) : $loop->the_post(); ?>
 <article id="post-<?php the_ID(); ?>" <?php post_class(''); ?> role="article" itemscope itemprop="blogPost" itemtype="http://schema.org/BlogPosting">
                <div class="row centered wow fadeInUpBig" data-wow-duration="2s">   
                    <div class="col col-4">
                           <?php the_post_thumbnail(600); ?>
                </div>
                <div class="col col-6">
                <section class="entry-content cf" itemprop="articleBody">
<span class="bold function"><?php echo get_the_term_list( $post->ID, 'Funktion', '', ', ', '' ); ?></span> 
                       <h2 class="entry-title single-title" itemprop="headline" rel="bookmark"><?php the_title(); ?></h2>
                  <?php the_content();?>
                </section> 
                </div><!--.end col-->
                </div><!--.end row-->
              </article>
<?php endwhile; wp_reset_query(); ?>
                </div><!--.end container-->