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 Answer 1

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; ?>
2
  • 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 } Oct 16, 2014 at 17:31
  • @NathanFitzgerald Thanks. You are awesome. I got what I want...!!! Oct 17, 2014 at 12:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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