How can I create a type of loop in WordPress where an image moves left or right for each post? I.e. first post image will be left, second post image will go right, third post image will go left, and so on...
i am attach image. Provide some code or examples
Thanks in advance
https://i.sstatic.net/5bDy6.jpg
<?php
$loop = new WP_Query( array( 'post_type' => 'case_studies') );
$Inc = 1;
if ( $loop->have_posts() ) :
while ( $loop->have_posts() ) : $loop->the_post(); ?>
<?php if($Inc==1){ ?>
<div class="col-sm-3 nopadding">
<?php the_post_thumbnail(); ?>
</div>
<div class="col-sm-3 ">
<h2><?php echo get_the_title(); ?></h2>
</div>
<?php }else if($Inc==2){ ?>
<div class="col-sm-3 nopadding">
<?php the_post_thumbnail(); ?>
</div>
<div class="col-sm-3 ">
<h2><?php echo get_the_title(); ?></h2>
</div>
<?php }else if($Inc==3){ ?>
<div class="item">
<div class="col-sm-6 nopadding">
<?php the_post_thumbnail(); ?>
</div>
<div class="col-sm-6">
<h2><?php echo get_the_title(); ?></h2>
</div>
</div>
<?php }else if($Inc==4){ ?>
<div class="item">
<div class="col-sm-6 nopadding">
<?php the_post_thumbnail(); ?>
</div>
<div class="col-sm-6">
<h2><?php echo get_the_title(); ?></h2>
</div>
</div>
<?php } ?>
<?php
if($Inc==4){
$Inc =1;
}
$Inc++;
endwhile;
endif;
wp_reset_postdata();
?>
<?php
$loop = new WP_Query( array( 'post_type' => 'team') );
if ( $loop->have_posts() ) :
$Inc = 0; //start your counter
while ( $loop->have_posts() ) : $loop->the_post();
$person_image = get_field('person_image');
$person_description = get_field('person_description');
?>
<?php if($Inc % 2 == 0){ //if $inc can be created by multiplying 2.?>
<div class="col-md-12">
<div class="col-md-1">
<div>
<img src="<?php bloginfo('template_url'); ?>/images/dot1.png" class="img-responsive dotimages">
</div>
</div> <!--.col-md-1 -->
<div class="col-md-10 row">
<div class="clientimagesarea">
<div class="col-md-6">
<div>
<img src="<?php echo $person_image; ?>" class="img-responsive center-block peopleimages">
<?php //the_post_thumbnail(); ?>
</div>
</div>
<div class="col-md-6">
<div class="clienttext clienttextmarleft">
<?php echo $person_description; ?>
</div>
<div class="col-md-12">
<div class="row ">
<div class="col-md-12 col-xs-12 col-sm-12 paddmargin0">
<div class="col-md-2 col-sm-2 col-xs-4">
<div><img src="<?php bloginfo('template_url'); ?>/images/email-icon2.png" class="img-responsive clientemailicon text-left"></div>
</div>
<div class="col-md-9 col-sm-9 col-xs-8">
<div class="emailid">abx@sitename.com</div>
</div>
</div>
<div class="col-md-12 col-xs-12 col-sm-12 paddmargin0">
<div class="col-md-2 col-sm-2 col-xs-4">
<div><img src="<?php bloginfo('template_url'); ?>/images/call-icon2.png" class="img-responsive clientemailicon2 "></div>
</div>
<div class="col-md-9 col-sm-9 col-xs-8">
<div class="emailid2">+41 79 777 66 45</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<?php //the_post_thumbnail(); ?>
</div>
<?php }else { //it cant?>
<div class="row col-md-6 col-md-offset-3">
<div class="deviderline">
</div>
</div>
<div class="col-md-12">
<div class="row col-md-10 col-md-offset-1">
<div class="row clientimagesarea">
<div class="col-md-6">
<div class="clienttext">
<p>
<?php echo $person_description; ?>
</p>
</div>
<div class="col-md-12">
<div class="row iconmarginleft">
<div class="col-md-12 col-xs-12 col-sm-12 paddmargin0">
<div class="col-md-2 col-sm-2 col-xs-4">
<div><img src="<?php bloginfo('template_url'); ?>/images/email-icon2.png" class="img-responsive clientemailicon text-left"></div>
</div>
<div class="col-md-9 col-sm-9 col-xs-8">
<div class="emailid">abx@sitename.com</div>
</div>
</div>
<div class="col-md-12 col-xs-12 col-sm-12 paddmargin0">
<div class="col-md-2 col-sm-2 col-xs-4">
<div><img src="<?php bloginfo('template_url'); ?>/images/call-icon2.png" class="img-responsive clientemailicon2 "></div>
</div>
<div class="col-md-9 col-sm-9 col-xs-8">
<div class="emailid2">+91 1234567890</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div>
<img src="<?php echo $person_image; ?>" class="img-responsive center-block peopleimages clienttextmarleft">
</div>
</div>
</div>
</div>
<div class="col-md-1">
<div>
<img src="<?php bloginfo('template_url'); ?>/images/dot3.png" class="img-responsive dotimage3">
</div>
</div>
</div>
<?php } ?>
<?php
$Inc++;
endwhile;
endif;
wp_reset_postdata();
?>
Your logic makes sense, I haven't tested this, but this should flib every second item with your code.
<?php
$loop = new WP_Query( array( 'post_type' => 'case_studies') );
if ( $loop->have_posts() ) :
$Inc = 0; //start your counter
while ( $loop->have_posts() ) : $loop->the_post(); ?>
<?php if($Inc % 2 == 0){ //if $inc can be created by multiplying 2.?>
<div class="col-sm-3 nopadding">
<?php the_post_thumbnail(); ?>
</div>
<div class="col-sm-3 ">
<h2><?php echo get_the_title(); ?></h2>
</div>
<?php }else { //it cant?>
<div class="col-sm-3 ">
<?php echo get_the_title(); ?>
</div>
<div class="col-sm-3 nopadding">
<h2><?php the_post_thumbnail(); ?></h2>
</div>
<?php }
$Inc++; //increment the counter
endwhile;
endif;
wp_reset_postdata();