Support » Fixing WordPress » Multiple Thumbnails Sizes in single loop

  • leoahrens

    (@leoahrens)


    Hi,

    i’m looking to have two thumbnail sizes in a single loop. For example Cat 2 displays a small thumbnail and Cat 3 has a large full width image.

    I know how I can have two loops on one page; one for cat 2 with small thumbnails and one for cat 3 with large thumbnails but I can’t mix the two categories chronologically.

    Here is my loop displaying both categories displaying both categories with the same thumbnail dimensions.

    <div id="content" role="main">
    
    				<?php query_posts('cat=2, 3 &posts_per_page=6'); while (have_posts()) : the_post(); ?>
    
    					<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    					<?php if ( is_front_page() ) { ?>
    
    						<h2 class="entry-title"><?php the_title(); ?></h2>
    					<?php } else { ?>
    						<h1 class="entry-title"><a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'twentyten' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php the_title(); ?></a></h1>
    					<?php } ?>
    
    					<div id="blackbar"></div>
    				<div class="entry-content" id="thumbimg">
    
    						<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(); set_post_thumbnail_size( 1000, 500 );?></a>
    
    						<?php the_excerpt(); ?>
    
    	<?php wp_link_pages( array( 'before' => '<div class="page-link">' . __( 'Pages:', 'twentyten' ), 'after' => '</div>' ) ); ?>
    						<?php edit_post_link( __( 'Edit', 'twentyten' ), '<span class="edit-link">', '</span>' ); ?>
    					</div><!-- .entry-content -->
    
    </div><!-- #post-## -->
    
    <?php endwhile; // end of the loop. ?>
    
    		</div><!-- #content -->

    I guess I’m wondering if you can set a different ID or Class for each category in a single loop?

Viewing 13 replies - 1 through 13 (of 13 total)
  • Rajesh Soni

    (@rajeshsoni)

    You can try this:

    <a href="<?php the_permalink(); ?>"><?php
    the_post_thumbnail(); 
    
    $category = get_the_category(); 
    
    if($category[0] && $category[0]->term_id==2){
    set_post_thumbnail_size( 600, 300 );
    }elseif($category[0] && $category[0]->term_id==3){
    set_post_thumbnail_size( 1000, 500 );
    }else{
    set_post_thumbnail_size( 1000, 500 );
    }
    
    ?>
    </a>
    leoahrens

    (@leoahrens)

    It seems like it is randomly selecting posts to make smaller thumbnail size regardless of category…?

    Rajesh Soni

    (@rajeshsoni)

    If you read the code carefully, you’ll notice it has a conditional statement for category ID 2, 3 and the last else for any other categories.

    This would work as expected as long as the posts belong to just one category and not multiple categories.

    leoahrens

    (@leoahrens)

    Still not working. Is it possible I have some pre existing css that is messing it up?

    http://leoahrens.com/

    leoahrens

    (@leoahrens)

    All the indian images are assigned to cat 2 I believe and all the china wall are cat 3 yet they still have a mind of their own.

    Rajesh Soni

    (@rajeshsoni)

    Can you try this code (that would display the categories for each post)

    <a href="<?php the_permalink(); ?>"><?php
    the_post_thumbnail(); 
    
    $category = get_the_category();
    print_r($category);
    
    if($category[0] && $category[0]->term_id==2){
    set_post_thumbnail_size( 600, 300 );
    }elseif($category[0] && $category[0]->term_id==3){
    set_post_thumbnail_size( 1000, 500 );
    }else{
    set_post_thumbnail_size( 1000, 500 );
    }
    
    ?>
    </a>
    leoahrens

    (@leoahrens)

    done…

    Rajesh Soni

    (@rajeshsoni)

    Try this:

    <a href="<?php the_permalink(); ?>">
    
    <?php
    
    $category = get_the_category();
    if($category[0] && $category[0]->term_id==2){
    the_post_thumbnail('thumbnail');
    }elseif($category[0] && $category[0]->term_id==3){
    the_post_thumbnail('medium');
    }else{
    the_post_thumbnail('large');
    }
    
    ?>
    </a>
    leoahrens

    (@leoahrens)

    That’s all sorts of scary looking now.

    Also I told you wrong before. The Cat 2 is supposed to be the full width img and the Cat 3 is the half width.

    Rajesh Soni

    (@rajeshsoni)

    Are you sure you used my latest code? I still see print_r used on your page, whereas I have removed it from the latest code.

    leoahrens

    (@leoahrens)

    There, that looks a little better. Thumbnails are still way off. I did another test and that is the only one that worked. Do I need to regenerate all the thumbnails maybe?

    Rajesh, thank you! I have been looking and messing about all day trying to achieve this and your code worked perfectly!

    FYI leoahrens you will need to re-upload the featured images if you have changed their dimensions.

    You’re welcome, @mhowlett 🙂

Viewing 13 replies - 1 through 13 (of 13 total)
  • The topic ‘Multiple Thumbnails Sizes in single loop’ is closed to new replies.