Featured images in modified wordpress thread
So I have this modified Wordpress Loop. In Wordpress Modified / Super Loop is given a unique HTML structure for each message.
Anyway, I have used it successfully. Until I add the codes that call the rendered image and make it the background (CSS style property).
What error I'm having now is that it pulls the same featured images for all posts. For example, for the column with the number two-six, the same attribute will be displayed , which belongs to the message # 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 these codes are obfuscating 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'm not sure. I think these codes should be placed somewhere so that it doesn't mess with the loop and displays the correct images.
Any tips for doing them correctly?
source to share
While I can't be sure right now, my guess is that global $post;
when you get the c ID , you'll get the first post ID.
Since you are in a loop, you can solve this problem using the following function:
get_the_ID();
(see the WordPress function reference )
This will give you the following way to get the image id:
$imgID = get_post_thumbnail_id(get_the_ID()); //get the id of the featured image
source to share