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 am trying to display 3 post_thumbnails from a custom post type "portfolio" on my homepage template. So one from post 'A' , one from post 'B' and one from post 'C' The image from post A will be set as post_thumbnail('large') while B & C need to be set to post_thumbnail('thumbnail').

I've set a custom WP_Query loop and as expected it is looping through and fetching three instances of the post thumbnail for each of the most recent three "portfolio" posts. I'm just not sure how to modify the loop to only display three images not three sets of three images.

Any help much appreciated.

Here's my code:

    <?php get_header(); ?>


    <div id="content" class="clearfix row">     
<article id="post-<?php the_ID(); ?>" <?php post_class('clearfix'); ?>       role="article">


    <section id="work" class="row">      

        <div class="span3">
          <h3>Recent Work</h3>
          <p>Intro Lorem ipsum</p>
        </div>
          <?php $first_query = new WP_Query('post_type=portfolio');   while($first_query->have_posts()) : $first_query->the_post(); ?>
        <div class="span6">
            <a href="single-project.php">
            <?php the_post_thumbnail('medium'); ?> <!--Should be from custom post 'A' -->
            </a>
        </div>

        <div class="span3">
            <a href="single-project.php" >
             <?php the_post_thumbnail('thumbnail'); ?><!--Should be from custom post 'B' -->
            </a>

          <a href="single-project.php">
           <?php the_post_thumbnail('thumbnail'); ?><!--Should be from custom post 'C' -->
          </a>  
        </div>
share|improve this question

2 Answers 2

I use this implementation nicely -- You can see how it's grabbing it:

$thumbnails = get_posts(array('numberposts'=>1,'orderby'=>'ASC','meta_key' => '_thumbnail_id'));

You can then turn to 'numberposts'=>3 and build your thumbnail structure:

    <?php if ( has_post_thumbnail() ) {
      global $post;
      $thumbnails = get_posts(array('numberposts'=>3,'orderby'=>'ASC','meta_key' => '_thumbnail_id'));
      foreach ($thumbnails as $thumbnail) {
      echo '<a href="' . get_permalink( $post->ID ) . '" title="' . esc_attr( $post->post_title ) . '">';
      echo get_the_post_thumbnail($thumbnail->ID, 'small-thumb', array( 'alt' => esc_attr( $post->post_title ), 'title' => esc_attr( $post->post_title ) ));
      echo '</a>';
      }        
     ?>   

Edited: Don't forget to set your thumbnail size:

echo get_the_post_thumbnail($thumbnail->ID, 'small-thumb', array( 'alt' => esc_attr( $post->post_title ), 'title' => esc_attr( $post->post_title ) ));

Change the 'small-thumb' to whatever you've set, if you need to set some sizes you can put this in your functions.php:

 //Add support, if you need it.
 if ( function_exists( 'add_theme_support' ) ) {
   add_theme_support( 'post-thumbnails' );
    set_post_thumbnail_size( 960, 276, true ); // default Post Thumbnail dimensions   
  }

 //Set them sizes, yo
 if ( function_exists( 'add_image_size' ) ) { 
   add_image_size( 'large-thumb', 960, 276, true ); //(cropped)
   add_image_size( 'medium-thumb', 605, 174 ); // 605px wide, 174 high, not cropped
   add_image_size( 'small-thumb', 288, 83, true ); //(cropped) 
   add_image_size( 'small-square', 100, 100, true ); //(cropped) 
 }

Cheers,

share|improve this answer
    
Thanks David, will try this out and let you know how I get on. –  mattc Apr 11 '12 at 10:44
    
Hi David - am I right in thinking that this will just print out 3 posts in ascending order with their relevant post thumbs? I'm aiming to display three different thumbnails - i think your solution will still result in 3 sets of 3 thumbnails. Could you add any additional info? –  mattc Apr 11 '12 at 13:18

mattc,

You're problem is that you have all of the elements inside the loop. You need to set a counter and then only apply the items you need when they are needed. I've only included the pertinent code below:

<?php 
 // set a variable to start a count
 $i = 0;

 $first_query = new WP_Query('post_type=portfolio');   
 // the loop starts
 while($first_query->have_posts()) : $first_query->the_post(); 

 // add 1 to our variable on each pass of the loop
 $i++;

 // do the big image first
 if ($i == 1) {
 ?>
   <div class="span6">
        <a href="single-project.php">
        <?php the_post_thumbnail('medium'); ?> <!--Should be from custom post 'A' -->
        </a>
    </div>
 <?php } else { // the rest of the images ?>
 <?php if ($i == 2) {  // need to open our wrapping div here ?>
    <div class="span3">
 <?php } ?>
        <a href="single-project.php" >
         <?php the_post_thumbnail('thumbnail'); ?><!--Should be from custom post 'B' and 'C' -->
        </a>
  <?php if ($i == 3) { // close out the wrapping div?>
    </div>
  <?php } ?>
  <?php endwhile; ?>
share|improve this answer
    
Thanks Ben, will try this too. Cheers. –  mattc Apr 11 '12 at 10:45
    
I have a feeling that this is the way to go but can't get it to work - when I implement it I'm getting php errors...I'm trying a variation of your suggestion using query posts as a start <?php global $post; $args=array( 'numberposts'=>3, //show 3 posts 'post_type'=>'portfolio', //posts only 'meta_key'=>'_thumbnail_id', //with thumbnail 'exclude'=>$post->ID, //exclude current post 'orderby'=>'rand' //randomize ); $custom_posts = get_posts($args); foreach($custom_posts as $post) : setup_postdata($post); $i = 1; $i++; if ($i == 1) ?> –  mattc Apr 11 '12 at 13:21

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.