i make a code that can fill bootstrap grid structure i used while and for loop in my code but the issue is for loop repeat its value in 2nd row
the above picture tells you column 2 and 3 of first row and column 1 and 2 of second row has same value here is my code
<div class="row">
<div class="col-xs-12">
<div class="rst-mediagrid">
<?php
global $post;
$loop = new WP_Query( array( 'posts_per_page' => 9,'orderby'=>rand) );
$posts = array();
while ( $loop->have_posts() ) :
$items = array();
$items['link']=wp_get_attachment_url( get_post_thumbnail_id( $post->ID ));
$items['Image'] = get_the_post_thumbnail($loop->the_post());
$items['LinkPost']=get_permalink($post->ID);
$items['Title']=get_the_title($post->ID);
$items['PostTime']=get_the_time('M d,Y', $post->ID);
array_push($posts, $items);
endwhile;
for($i = 1; $i< count($posts); $i++){
?>
<?php
if($i==1){
?>
<div class="div">
<div class="rst-col rst-col-50">
<div class="rst-postpic">
<a href="<?php echo $posts[$i]['LinkPost']; ?>"><img src="<?php echo $posts[$i+1]['link']; ?>" alt="" style="height: 385px;width: 770px"/></a>
<?php echo $i+1; ?>
</div>
<div class="rst-postinfo">
<a href="#"><span>Sport</span></a>
<h6><a href="<?php echo $posts[$i]['LinkPost']; ?>"><?php echo $posts[$i]['Title']; ?></a></h6>
<time><i class="fa fa-clock-o"></i><?php echo $posts[$i]['PostTime']; ?></time>
</div>
</div>
<?php //endif; ?>
<div class="rst-col rst-col-25">
<div class="rst-postpic rst-postvideo">
<a href="<?php echo $posts[$i+1]['LinkPost']; ?>"><img src="<?php echo $posts[$i+2]['link']; ?>" alt="" style="height: 385px;width: 770px"/></a>
<?php echo $i+2; ?>
</div>
<div class="rst-postinfo">
<a href="#"><span>Sport</span></a>
<h6><a href="<?php echo $posts[$i+1]['LinkPost']; ?>"><?php echo $posts[$i+1]['Title']; ?></a></h6>
<time><i class="fa fa-clock-o"></i><?php echo $posts[$i+1]['PostTime']; ?></time>
</div>
</div>
<div class="rst-col rst-col-25">
<div class="rst-postpic">
<a href="<?php echo $posts[$i+2]['LinkPost']; ?>"><img src="<?php echo $posts[$i+3]['link']; ?>" alt="" style="height: 385px;width: 770px"/></a>
<?php echo $i+3; ?>
</div>
<div class="rst-postinfo">
<a href="#"><span>Sport</span></a>
<h6><a href="<?php echo $posts[$i+2]['LinkPost']; ?>"><?php echo $posts[$i+2]['Title']; ?></a></h6>
<time><i class="fa fa-clock-o"></i><?php echo $posts[$i+2]['PostTime']; ?></time>
</div>
</div>
<div class="clear"></div>
</div><!-- end first row-->
<?php } //end if ?>
<?php
if($i == 2 ){
?>
<div class="div">
<div class="rst-col rst-col-25">
<div class="rst-postpic">
<a href="<?php echo $posts[$i]['LinkPost']; ?>"><img src="<?php echo $posts[$i+1]['link']; ?>" alt="" style="height: 385px;width: 770px"/></a>
<?php echo $i+1; ?>
</div>
<div class="rst-postinfo">
<a href="#"><span>Sport</span></a>
<h6><a href="<?php echo $posts[$i]['LinkPost']; ?>"><?php echo $posts[$i]['Title']; ?></a></h6>
<time><i class="fa fa-clock-o"></i><?php echo $posts[$i]['PostTime']; ?></time>
</div>
</div>
<div class="rst-col rst-col-25">
<div class="rst-postpic rst-postvideo">
<a href="<?php echo $posts[$i+1]['LinkPost']; ?>"><img src="<?php echo $posts[$i+2]['link']; ?>" alt="" style="height: 385px;width: 770px"/></a>
<?php echo $i+2; ?>
</div>
<div class="rst-postinfo">
<a href="#"><span>Sport</span></a>
<h6><a href="<?php echo $posts[$i+1]['LinkPost']; ?>"><?php echo $posts[$i+1]['Title']; ?></a></h6>
<time><i class="fa fa-clock-o"></i><?php echo $posts[$i+1]['PostTime']; ?></time>
</div>
</div>
<div class="rst-col rst-col-50">
<div class="rst-postpic">
<a href="<?php echo $posts[$i+2]['LinkPost']; ?>"><img src="<?php echo $posts[$i+3]['link']; ?>" alt="" style="height: 385px;width: 770px"/></a>
<?php echo $i+3; ?>
</div>
<div class="rst-postinfo">
<a href="#"><span>Sport</span></a>
<h6><a href="<?php echo $posts[$i+2]['LinkPost']; ?>"><?php echo $posts[$i+2]['Title']; ?></a></h6>
<time><i class="fa fa-clock-o"></i><?php echo $posts[$i+2]['PostTime']; ?></time>
</div>
</div>
<div class="clear"></div>
</div><!--end second row-->
<?php
}//end if
}//end for loop ?>
</div>
</div>
</div>
the issue i was facing is that when wordpress has 6 posts and at this condition i increase the value of loop like
for($i=1;$i<count($posts);$i+=3)
this issue remove when number of posts grater then 6 less then or equal to 6 posts then it show like this
when i have 6 posts then grid show like below image and when number of posts 8 then grid fill dont know what the issue
this loop give me unique value but last two columns has no images but when i upload two more post in wordpress and total number of posts = 8 in database then image appear tell me whats the issue in my looping
i make a code that can fill bootstrap grid structure i used while and for loop in my code but the issue is for loop repeat its value in 2nd row
the above picture tells you column 2 and 3 of first row and column 1 and 2 of second row has same value here is my code
<div class="row">
<div class="col-xs-12">
<div class="rst-mediagrid">
<?php
global $post;
$loop = new WP_Query( array( 'posts_per_page' => 9,'orderby'=>rand) );
$posts = array();
while ( $loop->have_posts() ) :
$items = array();
$items['link']=wp_get_attachment_url( get_post_thumbnail_id( $post->ID ));
$items['Image'] = get_the_post_thumbnail($loop->the_post());
$items['LinkPost']=get_permalink($post->ID);
$items['Title']=get_the_title($post->ID);
$items['PostTime']=get_the_time('M d,Y', $post->ID);
array_push($posts, $items);
endwhile;
for($i = 1; $i< count($posts); $i++){
?>
<?php
if($i==1){
?>
<div class="div">
<div class="rst-col rst-col-50">
<div class="rst-postpic">
<a href="<?php echo $posts[$i]['LinkPost']; ?>"><img src="<?php echo $posts[$i+1]['link']; ?>" alt="" style="height: 385px;width: 770px"/></a>
<?php echo $i+1; ?>
</div>
<div class="rst-postinfo">
<a href="#"><span>Sport</span></a>
<h6><a href="<?php echo $posts[$i]['LinkPost']; ?>"><?php echo $posts[$i]['Title']; ?></a></h6>
<time><i class="fa fa-clock-o"></i><?php echo $posts[$i]['PostTime']; ?></time>
</div>
</div>
<?php //endif; ?>
<div class="rst-col rst-col-25">
<div class="rst-postpic rst-postvideo">
<a href="<?php echo $posts[$i+1]['LinkPost']; ?>"><img src="<?php echo $posts[$i+2]['link']; ?>" alt="" style="height: 385px;width: 770px"/></a>
<?php echo $i+2; ?>
</div>
<div class="rst-postinfo">
<a href="#"><span>Sport</span></a>
<h6><a href="<?php echo $posts[$i+1]['LinkPost']; ?>"><?php echo $posts[$i+1]['Title']; ?></a></h6>
<time><i class="fa fa-clock-o"></i><?php echo $posts[$i+1]['PostTime']; ?></time>
</div>
</div>
<div class="rst-col rst-col-25">
<div class="rst-postpic">
<a href="<?php echo $posts[$i+2]['LinkPost']; ?>"><img src="<?php echo $posts[$i+3]['link']; ?>" alt="" style="height: 385px;width: 770px"/></a>
<?php echo $i+3; ?>
</div>
<div class="rst-postinfo">
<a href="#"><span>Sport</span></a>
<h6><a href="<?php echo $posts[$i+2]['LinkPost']; ?>"><?php echo $posts[$i+2]['Title']; ?></a></h6>
<time><i class="fa fa-clock-o"></i><?php echo $posts[$i+2]['PostTime']; ?></time>
</div>
</div>
<div class="clear"></div>
</div><!-- end first row-->
<?php } //end if ?>
<?php
if($i == 2 ){
?>
<div class="div">
<div class="rst-col rst-col-25">
<div class="rst-postpic">
<a href="<?php echo $posts[$i]['LinkPost']; ?>"><img src="<?php echo $posts[$i+1]['link']; ?>" alt="" style="height: 385px;width: 770px"/></a>
<?php echo $i+1; ?>
</div>
<div class="rst-postinfo">
<a href="#"><span>Sport</span></a>
<h6><a href="<?php echo $posts[$i]['LinkPost']; ?>"><?php echo $posts[$i]['Title']; ?></a></h6>
<time><i class="fa fa-clock-o"></i><?php echo $posts[$i]['PostTime']; ?></time>
</div>
</div>
<div class="rst-col rst-col-25">
<div class="rst-postpic rst-postvideo">
<a href="<?php echo $posts[$i+1]['LinkPost']; ?>"><img src="<?php echo $posts[$i+2]['link']; ?>" alt="" style="height: 385px;width: 770px"/></a>
<?php echo $i+2; ?>
</div>
<div class="rst-postinfo">
<a href="#"><span>Sport</span></a>
<h6><a href="<?php echo $posts[$i+1]['LinkPost']; ?>"><?php echo $posts[$i+1]['Title']; ?></a></h6>
<time><i class="fa fa-clock-o"></i><?php echo $posts[$i+1]['PostTime']; ?></time>
</div>
</div>
<div class="rst-col rst-col-50">
<div class="rst-postpic">
<a href="<?php echo $posts[$i+2]['LinkPost']; ?>"><img src="<?php echo $posts[$i+3]['link']; ?>" alt="" style="height: 385px;width: 770px"/></a>
<?php echo $i+3; ?>
</div>
<div class="rst-postinfo">
<a href="#"><span>Sport</span></a>
<h6><a href="<?php echo $posts[$i+2]['LinkPost']; ?>"><?php echo $posts[$i+2]['Title']; ?></a></h6>
<time><i class="fa fa-clock-o"></i><?php echo $posts[$i+2]['PostTime']; ?></time>
</div>
</div>
<div class="clear"></div>
</div><!--end second row-->
<?php
}//end if
}//end for loop ?>
</div>
</div>
</div>
the issue i was facing is that when wordpress has 6 posts and at this condition i increase the value of loop like
for($i=1;$i<count($posts);$i+=3)
this issue remove when number of posts grater then 6 less then or equal to 6 posts then it show like this
when i have 6 posts then grid show like below image and when number of posts 8 then grid fill dont know what the issue
this loop give me unique value but last two columns has no images but when i upload two more post in wordpress and total number of posts = 8 in database then image appear tell me whats the issue in my looping
Share Improve this question edited Jan 6, 2017 at 20:09 Tunji 2,9611 gold badge18 silver badges28 bronze badges asked Oct 2, 2015 at 11:31 Hafiz Usman aftabHafiz Usman aftab 2172 gold badges4 silver badges11 bronze badges1 Answer
Reset to default 1The problem is that you are displaying three images each time $i is increased by one.
In the first run through the for loop, $i = 1, you check if $i is 2, and then you display the image for $i (1), $i+1 (2), and $i + 2 (3).
On the second run through the for loop, $i is 2, you check if $i is 2, and then you display the image for $i (2), $i+1 (3), and $i + 2 (4).
Solution: change your loop to increment by 3:
for($i = 1; $i< count($posts); ($i=$i+3)) {
Or, you could change the content of your loop so that you display only one image each time you go through, and check $i to see whether it should be a large image or small.