Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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?

share|improve this question
    
How are the featured images associated with the custom post type? If via post custom meta, please include the relevant code that defines that custom post meta. Or, is your intent is merely to query three posts, and then display the Featured Image from each of those posts? –  Chip Bennett Nov 7 '13 at 15:38
    
not really sure what you mean, are you asking how I display the images? That is by this code: <?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> Using the timthumb crop, if I use the_post_thumbnail it doesn't crop right –  Maartje Nov 7 '13 at 15:42
1  
That's likely because you've not defined the needed custom image sizes, via add_image_size(). TimThumb is a security risk and potential exploit vector; please reconsider its use. –  Chip Bennett Nov 7 '13 at 15:46
    
Thanks, I didn't know this. It is weird how during my internship I learned all those things that appeared to be wrong later.. ? =/ –  Maartje Nov 7 '13 at 15:51
1  
Sorry you got misinformation from your internship (web programming in general suffers from that problem badly), but there is a lot of good information here :) –  s_ha_dum Nov 8 '13 at 15:06
add comment

1 Answer

up vote 2 down vote accepted

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.

share|improve this answer
2  
+1. Also: use the_post_thumbnail() to output the Featured Image, rather than TimThumb. –  Chip Bennett Nov 7 '13 at 15:41
    
Thanks, this worked really good. Also not a lot of code indeed. Excuse me for posting my question on the WordPress Answers instead of stackoverflow, My knowledge of php is not a lot and I thought that query posts always was a wordpress loop. This is one of the things I learned at my traineeship with doesn't appear to be good, just like the timthumb:( Thanks for your explanation, I Will study the query posts document and hope I'll get better in php soon. It's really nice to know such things as this loop instead of spending hours of editing my querypost loop. Thanks so much! –  Maartje Nov 7 '13 at 16:06
    
Do you maybe also know how to use it on one or more categories of choice? –  Maartje Nov 8 '13 at 13:25
    
already found it:) for one: 'category name' => 'categorynameofchoice' for multiple 'category name' => 'categorynameofchoice, anothername, andsoon' –  Maartje Nov 8 '13 at 14:17
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.