WordPress.org

Ready to get started?Download WordPress

Forums

Multiple Thumbnails Sizes in single loop (14 posts)

  1. leoahrens
    Member
    Posted 1 year ago #

    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?

  2. Rajesh Soni
    Member
    Posted 1 year ago #

    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>
  3. leoahrens
    Member
    Posted 1 year ago #

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

  4. Rajesh Soni
    Member
    Posted 1 year ago #

    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.

  5. leoahrens
    Member
    Posted 1 year ago #

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

    http://leoahrens.com/

  6. leoahrens
    Member
    Posted 1 year ago #

    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.

  7. Rajesh Soni
    Member
    Posted 1 year ago #

    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>
  8. leoahrens
    Member
    Posted 1 year ago #

    done...

  9. Rajesh Soni
    Member
    Posted 1 year ago #

    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>
  10. leoahrens
    Member
    Posted 1 year ago #

    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.

  11. Rajesh Soni
    Member
    Posted 1 year ago #

    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.

  12. leoahrens
    Member
    Posted 1 year ago #

    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?

  13. MHowlett
    Member
    Posted 1 year ago #

    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.

  14. Rajesh Soni
    Member
    Posted 1 year ago #

    You're welcome, @MHowlett :)

Topic Closed

This topic has been closed to new replies.

About this Topic