Alternate image position within a div with display:table each time div appears – jquery, php, wordpress

Sorry for the vague question title, but I don’t exactly know how to explain my problem in one line.

Basically, what I’m trying to create is a page on wordpress that contains a loop of user testimonials. Each testimonial is within it’s own div. I’ve gotten that no problem with this HTML and PHP:

<?php $loop = new WP_Query( array( 'post_type' => 'testimonials', 'orderby' => 'date', 'order' => 'DESC') ); ?>

    <?php while( $loop->have_posts() ) : $loop->the_post(); ?>
       <div class="testimonialBox">

          <?php the_post_thumbnail(); ?>

          <div class="testimonialContent">
             <?php the_content(); ?>
          </div>
        </div>

    <?php endwhile; ?>

Obviously the_post_thumbnail is an image, and the_content is text. I wanted to center the text vertically within the div, so I added display:table to .testimonialBox, and display:table-cell vertical-align:middle to .testimonialContent. This works as well, here is all my CSS:

.testimonialBox {
width: 100%;
padding: 10px;
margin: 50px 0;
border: 2px solid #c90;
box-shadow: -5px 5px 20px #888888;
min-height: 300px;
display: table; 
}
.testimonialContent {
display: table-cell;
vertical-align: middle;
}

However, I want the testimonials to alternate between one having an image on the left/text on the right, and the next one has image on the right/text on the left, then back again. Can I do this with jQuery?

PS – using float:left or float:right on the img doesn’t work since the div has a display:table. The elements appear in the order they are written in the HTML.

Read more here: Alternate image position within a div with display:table each time div appears – jquery, php, wordpress

Leave a Reply

Your email address will not be published. Required fields are marked *