Wordpress how differentiate thumbnails post from even to odd? - wordpress

Question

I've done a wordpress script that displays a grid of thumbnails posts making this code:
<div class="col-sm-12 col-md-12" style="background-color: #ccc; padding-top: 30px;">
<article <?php post_class( 'article' ); ?> id="post-<?php the_ID(); ?>">
<?php
$child_pages = new WP_Query( array(
'post_type' => 'page', // set the post type to page
'posts_per_page' => 10, // number of posts (pages) to show
'post_parent' => 17, // enter the post ID of the parent page
'no_found_rows' => true, // no pagination necessary so improve efficiency of loop
'order_by' => 'title',
'order' => 'asc',
) );
if ( $child_pages->have_posts() ) : while ( $child_pages->have_posts() ) : $child_pages->the_post();
?>
<div class="col-md-6 thumbnail-frontpage clearfix">
<?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'single-post-thumbnail' ); ?>
<a href = "<?php the_permalink(); ?>" > <img src = "<?php echo $image[0]; ?>" onmouseover="this.src='<?php the_field('rollover_image'); ?> ' " onmouseout="this.src='<?php echo $image[0]; ?>'" /> <?php the_title(); ?> </a>
</div>
<?php
endwhile;
endif;
wp_reset_postdata();
?>
<!-- <p class=""><?php the_content( ); ?></p> -->
</article>
</div>
Now I'd like to differentiate the color of the thumbnails border separating odds from evens.
How can i do it using while conditional code?

Answer 1

If "border color differentiation" is your only purpose here, I suggest you use CSS, not PHP.
.thumbnail-frontpage:nth-child( even ) {
border: 1px solid red;
}
.thumbnail-frontpage:nth-child( odd ) {
border: 1px solid blue;
}
You can look it up here: http://www.w3schools.com/cssref/sel_nth-child.asp

Answer 2

you want like this
<?php
$child_pages = new WP_Query( array(
'post_type' => 'page', // set the post type to page
'posts_per_page' => 10, // number of posts (pages) to show
'post_parent' => 17, // enter the post ID of the parent page
'no_found_rows' => true, // no pagination necessary so improve efficiency of loop
'order_by' => 'title',
'order' => 'asc',
) );
$i=0;
if ( $child_pages->have_posts() ) : while ( $child_pages->have_posts() ) : $child_pages->the_post();
if($i%2==0){
$thumbnail = 'thumbnail';
}else{
$thumbnail = 'single-post-thumbnail';
}
?>
<div class="col-md-6 thumbnail-frontpage clearfix">
<?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), $thumbnail ); ?>
<a href = "<?php the_permalink(); ?>" > <img src = "<?php echo $image[0]; ?>" onmouseover="this.src='<?php the_field('rollover_image'); ?> ' " onmouseout="this.src='<?php echo $image[0]; ?>'" /> <?php the_title(); ?> </a>
</div>
<?php
$i++;
endwhile;
endif;
wp_reset_postdata();
?>
<!-- <p class=""><?php the_content( ); ?></p> -->
</article>
</div>