Multiple Thumbnails Sizes in single loop

  • 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)

  • 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>
    Thread Starter leoahrens

    (@leoahrens)

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

    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.

    Thread Starter leoahrens

    (@leoahrens)

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

    https://leoahrens.com/

    Thread Starter 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.

    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>
    Thread Starter leoahrens

    (@leoahrens)

    done…

    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>
    Thread Starter 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.

    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.

    Thread Starter 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.