0

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

Grid structure

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

enter image description here

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

0

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.

  • Actually I increment for loop $i+=3 but in wordpress If have only 6 posts then last two columns of 2 row was empty – Hafiz Usman aftab Oct 2 '15 at 12:30
  • You check my second image and description – Hafiz Usman aftab Oct 2 '15 at 12:30
  • Ah, your description above second image is not displaying properly. Could you fix that? – Joel Oct 2 '15 at 12:45
  • check again dear i fix the issue – Hafiz Usman aftab Oct 2 '15 at 12:59
  • So when you have 6 does it display all six? – Joel Oct 2 '15 at 13:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.