Featured Images in Modified Wordpress Loop

Question

So I have this modified Wordpress Loop. The Wordpress Modified/Super Loop is tasked to assigned a unique HTML structure for each post.

Anyway, I successfully used it. Not until I added the codes that calls the featured image and make it a background-image (css style property).

What the error I'm encountering right now is that it pulls the same Featured image for all post. Example, for post number two to six, it display the same featured image that belongs to Post #2.

<?php if (have_posts()) : ?>
<?php $count = 0; ?>
<?php while (have_posts()) : the_post(); ?>
<?php $count++; ?>
<?php if ($count >= 2 && $count <= 6) : ?> 



//code to pull the featured images' urls

    <?php
    global $post;

    if (has_post_thumbnail()) { //if a thumbnail has been set
    $imgID = get_post_thumbnail_id($post->ID); //get the id of the featured image
    $featuredImage1 = wp_get_attachment_image_src($imgID, 'TypeTwo-1' );//get the url of the featured image (returns an array)
    $featuredImage2 = wp_get_attachment_image_src($imgID, 'TypeThree-2' );//get the url of the featured image (returns an array)

    $posttypetwoURL1 = $featuredImage1[0]; //get the url of the image out of the array
    $posttypetwoURL2 = $featuredImage2[0]; //get the url of the image out of the array
    ?>


    <style type="text/css">

    .pt2s-img {
    border:none;
    color:black;
    background-image: url(<?php echo $posttypetwoURL1 ?>);
    background-repeat:no-repeat;
    width:484px;
    height:350px;
    display:inline-block;
    }   

    @media screen and (max-width:1231px) {
        .pt2s-img {
        border:none;
        color:black;
        background-image: url(<?php echo $posttypetwoURL2 ?>);
        background-repeat:no-repeat;
        width:484px;
        height:350px;
        }
    }

    @media screen and (max-width:800px) {
        .pt2s-img {
        border:none;
        color:black;
        background-image: url(<?php echo $imgURL3 ?>);
        background-repeat:no-repeat;
        width:150px;
        height:250px;
        }
    }

    </style>

    <?php
    }//end if

    ?>

    <a class="pt2s-img" href="<?php the_permalink() ?>" alt="<?php the_title(); ?>" title="<?php the_title(); ?>" >
    </a>

//code to pull the featured images' urls    


<?php endif; ?>
<?php endwhile; ?>
<?php endif; ?>

I suspect that this codes is messing the loop:

 $imgID = get_post_thumbnail_id($post->ID); //get the id of the featured image
    $featuredImage1 = wp_get_attachment_image_src($imgID, 'TypeTwo-1' );//get the url of the featured image (returns an array)
    $featuredImage2 = wp_get_attachment_image_src($imgID, 'TypeThree-2' );//get the url of the featured image (returns an array)

    $posttypetwoURL1 = $featuredImage1[0]; //get the url of the image out of the array
    $posttypetwoURL2 = $featuredImage2[0]; //get the url of the image out of the array

But i am unsure. I think that those codes should be put somewhere so it will not mess with the loop and display the correct images.

Any advice on correctly doing it?

Tomasz Cz. Tomasz Cz. · Accepted Answer · 2015-04-17T11:04:20

has_post_thumbnail() accepts post ID as its argument, use has_post_thumbnail($post->ID) instead. Because you are using modified loop, you need to implicitly pass post ID as function argument.

Featured Images in Modified Wordpress Loop

2 Answers