Support » Fixing WordPress » One loop with two different the_post_thumbnail sizes

  • Hi!

    So far, my index.php is composed of two loops, once calling one post only, and the_post_thumbnail('latest'), and one calling 3 posts with an offset of 1, and a styling of the_post_thumbnail('following')

    This allows me to have the latest article with a bigger thumbnail than the other articles on the homepage.

    However it causes some issues with the pagination. Navigation does not work properly since I have two loops.

    Would it be possible to have one loop only, and change the_post_thumbnail for the first article, maybe with conditional statements?

    Thank you for your help!

Viewing 5 replies - 1 through 5 (of 5 total)
  • Michael


    Forum Moderator

    general idea to mark the first post different:

    and then in the right spot something like:
    <?php if($postCount == 1) { the_post_thumbnail('latest'); } else { the_post_thumbnail('following'); } ?>

    Thanks for the quick anwser. I have tried, and I get a strange behavior now: the loop loads forever and I end up having +100 times the first entry repeated, without the content, and nothing else.

    Any idea why it could happen? I must have done something wrong…Here is my index.php:

    <?php get_header(); ?>
    	<div id="content">
    <?php if (have_posts()) : $postCount = 1; while (have_posts()) : $postCount++; ?>
    				<div <?php if($postCount == 1) { ?>class="post-first"<?php } else { ?>class="post"<?php } ?> id="post-<?php the_ID(); ?>">
    					<h2 class="entry-title"><a href="<?php the_permalink(); ?>" title="<?php printf( __('Permalink to %s', 'mytheme'), the_title_attribute('echo=0') ); ?>" rel="bookmark"><?php the_title(); ?></a></h2>
    					<div class="entry-meta">
    						<span class="entry-date"><abbr class="published" title="<?php the_time('Y-m-d\TH:i:sO') ?>"><?php the_time( get_option( 'date_format' ) ); ?></abbr></span>
    						<span class="meta-sep"> | </span>
    						<span class="cat-links"><?php echo get_the_category_list(', '); ?></span>
    						<span class="meta-sep"> | </span>
    						<span class="comments-link"><?php comments_popup_link( __( 'Leave a comment', 'mytheme' ), __( '1 Comment', 'mytheme' ), __( '% Comments', 'mytheme' ) ) ?></span>
    					</div><!-- .entry-meta -->
    					<div class="entry-content">
    						<?php if($postCount == 1) { the_post_thumbnail(); } else { the_post_thumbnail('following-post-thumbnails'); } ?>
    						<?php the_content( __( '<span class="meta-nav">Continue reading &raquo;</span>', 'mytheme' )  ); ?>
    					</div><!-- .entry-content -->
    				</div><!-- #post-<?php the_ID(); ?> -->
    <?php endwhile; endif; ?>
    <?php global $wp_query; $total_pages = $wp_query->max_num_pages; if ( $total_pages > 1 ) { ?>
        <div id="nav-below" class="navigation">
         <div class="nav-previous"><?php next_posts_link(__( '<span class="meta-nav">&laquo;</span> Older posts', 'mytheme' )) ?></div>
         <div class="nav-next"><?php previous_posts_link(__( 'Newer posts <span class="meta-nav">&raquo;</span>', 'mytheme' )) ?></div>
        </div><!– #nav-below –>
    <?php } ?>
    		<div class="clear"></div>
    	</div><!-- end content -->
    <?php get_sidebar(); ?>
    <?php get_footer(); ?>



    Forum Moderator

    i could not figure out why the code is behaving like this.
    it does the same in my local test installation – repeating the first post until the server times out 🙁

    if you can, revert back to your original code and post it here, please.

    edit: the above is obsolete and replaced by follow-up post.



    Forum Moderator

    just got it.

    ‘the_post();’ was missing from the start of the loop:
    <?php if (have_posts()) : $postCount = 0; while (have_posts()) : the_post(); $postCount++; ?>

    also the $postCount needs to start with 0 (zero) to get the first post and its thumbnail right (corrected above).

    and a tiny adjustment – the hyphen in ‘post-first’ is better replaced with a space ‘post first’:
    <div <?php if($postCount == 1) { ?>class="post first"<?php } else { ?>class="post"<?php } ?> id="post-<?php the_ID(); ?>">
    that keeps the class .post for all entries, and only adds an extra class .first to the first entry.

    hope all runs well 😉

    It is perfect now! Thank you very much for your quick and precise help!

    And thank you for the small tip with post first, you saved me a few lines in my css. 🙂

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘One loop with two different the_post_thumbnail sizes’ is closed to new replies.