Featured Images in Modified Wordpress Loop - php

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?

Answer 1

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.

Answer 2

Though I can't be sure right now, my guess would be that by getting the id with the global $post;, you get the ID of the first post.
Since you're in the loop, you could solve this by using the following function:
get_the_ID();
(see the WordPress Function reference)
That would give you the following way of getting the image ID:
$imgID = get_post_thumbnail_id(get_the_ID()); //get the id of the featured image