0

I am picking the latest posts through the WordPress loop using the below code, but it's picking all images at full size:

if ( have_posts() ) :
    while ( have_posts() ) : the_post(); ?>
        <!-- Post Start -->
        <div id="post">
            <a class="post_image" href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
                <?php if ( has_post_thumbnail() ):
                    the_post_thumbnail('full');
                else : ?>
                    <img src="<?php echo get_template_directory_uri(); ?>/images/No-Thumbnail-Available.png" alt="<?php the_title(); ?>" />
                <?php endif; ?>
            </a>
            <h2 class="post_title"><a href="<?php the_permalink(); ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>
            <span class="post_desc"><?php the_excerpt(); ?></span>
            <div class="clear"></div>
        </div>
        <!-- Post Start -->
    <?php endwhile;
else: ?>
    <p class="error"><?php _e('Sorry, No Article Is Available Here...'); ?></p>
<?php endif;

I want to pick the full image for the first post of the Loop and thumbnail images for all the rest of the posts in the Loop. I am able to do it via CSS, but that is not SEO friendly. I am using the below code but it's not working:

$first = true;
foreach ( $obj as $value ) {
    if ( $first ) { ?>
        <!-- Post Start -->
        <div id="post">
            <a class="post_image" href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
                <?php if ( has_post_thumbnail() ):
                    the_post_thumbnail('full');
                else : ?>
                    <img src="<?php echo get_template_directory_uri(); ?>/images/No-Thumbnail-Available.png" alt="<?php the_title(); ?>" />
                <?php endif; ?>
            </a>
            <h2 class="post_title"><a href="<?php the_permalink(); ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>
            <span class="post_desc"><?php the_excerpt(); ?></span>
            <div class="clear"></div>
        </div>
        <!-- Post Start -->
        <?php $first = false;
    } else { ?>
        <!-- Post Start -->
        <div id="post">
            <a class="post_image" href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
                <?php if ( has_post_thumbnail() ):
                    the_post_thumbnail('thumbnail');
                else : ?>
                    <img src="<?php echo get_template_directory_uri(); ?>/images/No-Thumbnail-Available.png" alt="<?php the_title(); ?>" />
                <?php endif; ?>
            </a>
            <h2 class="post_title"><a href="<?php the_permalink(); ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>
            <span class="post_desc"><?php the_excerpt(); ?></span>
            <div class="clear"></div>
        </div>
        <!-- Post Start -->
    <?php }
}
1

Try just using the traditional $i iterator (untested) but I can't see why this wouldn't work..

<?php 
$i = 0;
while ( have_posts() ) : the_post();
    $i++;
    if ( $i == 1 ): ?>
    <!-- First Post -->
    <div id="post">
        <a class="post_image" href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
            <?php if ( has_post_thumbnail() ): ?>
                <?php the_post_thumbnail('full'); ?>
            <?php else : ?>
                <img src="<?php echo get_template_directory_uri(); ?>/images/No-Thumbnail-Available.png" alt="<?php the_title(); ?>" />
            <?php endif; ?>
        </a>
        <h2 class="post_title"><a href="<?php the_permalink(); ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>
        <span class="post_desc"><?php the_excerpt(); ?></span>
        <div class="clear"></div>
    </div>
<?php else: // else $i == 1 ?>
    <!-- All Other Posts -->
    <div id="post">
        <a class="post_image" href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
            <?php if ( has_post_thumbnail() ): ?>
                <?php the_post_thumbnail('thumbnail'); ?>
            <?php else : ?>
                <img src="<?php echo get_template_directory_uri(); ?>/images/No-Thumbnail-Available.png" alt="<?php the_title(); ?>" />
            <?php endif; ?>
        </a>
        <h2 class="post_title"><a href="<?php the_permalink(); ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>
        <span class="post_desc"><?php the_excerpt(); ?></span>
        <div class="clear"></div>
    </div>
<?php endif; // endif for $i == 1 ?>
<?php endwhile; ?>
  • I wouldn't put the if at the beginning since the remainder of the content is the same. I'd suggest: if ( has_post_thumbnail() && $i == 1 ) { full } elseif ( has_post_thumbnail() ) { thumb } else { noImg } – Greg McMullen Oct 16 '14 at 17:31
  • @NathanFitzgerald Thanks. You are awesome. I got what I want...!!! – Muhammad Hassan Oct 17 '14 at 12:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.