how to handle the loop using filling bootstrap grid structure?

Question

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

Answer 1

The 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.