WordPress: alternate thumbnails alignment

Many paper magazines often align images in an alternate way on their front pages. In WordPress we can achieve the same results in our home page and category pages by adding two different CSS classes to them. Let's see the details.

The following CSS classes, to be added to your main CSS file of your theme, are already present in the default WordPress themes:

.alignleft {
	float: left;
	margin-right: 1em;
}

.alignright {
	float: right;
	margin-left: 1em;
}

In our Loop we'll create a counter that will be incremented and tested each time to see if the returned number is even or odd. Then we can assign a different CSS class to the get_the_post_thumbnail() function:

<?php
   
   $i = 0;

   while(have_posts()):
       the_post();
       $i++;
       
       $align = ($i % 2 == 0) ? 'alignleft' : 'alignright';
?>

<!-- other markup -->

<div class="entry-content">

   	<?php echo get_the_post_thumbnail(get_the_ID(), array(80,80), array('class'=> $align)); ?>

   	 <p class="excerpt"><?php echo get_the_excerpt();?></p>
   	       		
</div>

<!-- closing markup -->

<?php
  endwhile;
?>

And here's the result:

[caption id="attachment_1937" align="aligncenter" width="500" caption="The post thumbnails with alternate alignment"][/caption]