3 random images from custom post type, each in a div with a diffrent class

Question

I'm trying to build a loop using query posts to display 3 featured images from the custom post type 'portfolio'. My problem is that each picture has to be in a div with a diffrent class, so i was thinking of tree diffrent loops, but than you have a problem that sometimes a picture is showing two or three times. Also I think it is possible within one loop, i just don't know how.

What I have now is:

<div class="pc_wrapper">
    <?php query_posts( 'post_type=portfolio&showposts=1' . '&orderby=rand&order=ASC&posts_per_page=-1'); ?>
    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
        <div class="pcscreen side left"><?php $featured = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), "Full"); ?>
        <img src="<?php bloginfo('template_url');?>/thumb.php?src=<?php echo $featured[0]; ?>&amp;w=360&amp;h=213&amp;zc=1&amp;q=100&amp;" width="360" height="210" data-thumb="<?php bloginfo('template_url');?>/thumb.php?src=<?php echo $featured[0]; ?>&amp;w=360&amp;h=213&amp;zc=1&amp;q=100&amp;" alt="<?php the_title(); ?>" /></div>
    <?php endwhile; endif; ?>
    <?php query_posts( 'post_type=portfolio&showposts=1' . '&orderby=rand&order=ASC&posts_per_page=-1'); ?>
    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
        <div class="pcscreen middle"><?php $featured = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), "Full"); ?>
        <img src="<?php bloginfo('template_url');?>/thumb.php?src=<?php echo $featured[0]; ?>&amp;w=660&amp;h=310&amp;zc=1&amp;q=100&amp;" width="560" height="310" data-thumb="<?php bloginfo('template_url');?>/thumb.php?src=<?php echo $featured[0]; ?>&amp;w=660&amp;h=310&amp;zc=1&amp;q=100&amp;" alt="<?php the_title(); ?>" /></div>
    <?php endwhile; endif; ?>
    <?php query_posts( 'post_type=portfolio&showposts=1' . '&orderby=rand&order=ASC&posts_per_page=-1'); ?>
    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
        <div class="pcscreen side right"><?php $featured = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), "Full"); ?>
        <img src="<?php bloginfo('template_url');?>/thumb.php?src=<?php echo $featured[0]; ?>&amp;w=360&amp;h=213&amp;zc=1&amp;q=100&amp;" width="360" height="210" data-thumb="<?php bloginfo('template_url');?>/thumb.php?src=<?php echo $featured[0]; ?>&amp;w=360&amp;h=213&amp;zc=1&amp;q=100&amp;" alt="<?php the_title(); ?>" /></div>
    <?php endwhile; endif; ?>
    <?php wp_reset_query(); ?>
    </div><!--/pc_wrapper-->

Is there a way to do this within one loop, and show three diffrent random pictures in the diffrent classes ( first class="pcscreen side left" second class="pcscreen middle" and third class="pcscreen side right"

I know it is possible with jquery, now sure how to do it exacly but I prefer doing it within the php loop.

Is it possible? and how?

Answer 1

Getting different classes in the divs is relatively simple and mostly not a WordPress question, but there are WordPress bits to it that need comment. Truncated code reformatted for legibility:

$classes = array(
  'side left',
  'middle',
  'side right'
);
$qry = new WP_Query(
  array(
    'post_type'=> 'portfolio',
    'posts_per_page' => 3,
    'orderby' => 'rand',
    'order' => 'ASC'
  )
);
if ($qry->have_posts()) { 
  while ($qry->have_posts()) { 
    $qry->the_post(); ?>
    <div class="pcscreen <?php echo $classes[$qry->current_post%3] ?>"><?php
  }
}

The actual class insertion part isn't really a WordPress question but...

Please don't use query_posts, ever.

It should be noted that using this to replace the main query on a page can increase page loading times, in worst case scenarios more than doubling the amount of work needed or more. While easy to use, the function is also prone to confusion and problems later on. See the note further below on caveats for details.

http://codex.wordpress.org/Function_Reference/query_posts (emphasis mine)

Secondly, you were using the deprecated showposts parameter even though you were also using the correct posts_per_page in the same argument set.

Third, and not strictly "WordPress" either, that alternative control structure syntax is nothing but confusing. Use brackets and indent your code properly. You will thank me later.

Likewise with that "query-string like" argument syntax-- hard to read, hard to edit. Use arrays.

Finally, PHP opening and closing tags (<?php and ?>) are not line start/line stop markers. Don't use them as such. Only use them when you actually need to switch between PHP and HTML. You will gain readability and reduce typing, both good things.