WordPress Loop in Bootstrap Grid

Question

I have a custom post type called 'services' and want to display the featured image of each in a grid - My issue is not how to do this, it is more on how to make the loop work with Bootstrap's rows. I want a row of 3 on desktop and 2 on tablet (991px) so my HTML on the div is col-xs-6 col-sm-4. This however gives an odd result on 991px screen size. What I get is this:. So the featured image at the veery bottom left should in fact be where the 'unwanted gap' is. It seems that my code is telling the row to close after 3 rows on any screen size so it is kind of ignoring my col-xs-6 rule.

Using just HTML on a dummy page, col-xs-6 col-sm-4 doesnt do this and it works as expected with even rows of 2 on 991px screens.

My full code is below, as I didn't kmnow to incorporate a loop into BS rows, I actually grabbed this code from here Wordpress posts in grid view with Bootstrap 3 columns.

The countbang parts must be the issue here but changing these to different values don't fix the problem. If I change the last countbang reference to 2 instead of 3, this sets the row to display 2 rows on desktop and tablet which isnt right but even on tablet, even though this does sort the problem, there is extra margin and padding all over the place.

<?php 
$countturtle = 0 ;
$countbang = 0 ;
$count_posts = wp_count_posts( 'services' )->publish;
$args = array( 'post_type' => 'services', 'posts_per_page' => 6 );
$loop = new WP_Query( $args );
while ( $loop->have_posts() ) : $loop->the_post(); ?>
<?php  $countbang++ ?>

<?php if ( $countbang >= 2 ) {
    $countturtle = $countturtle + 1 ; } ?>
<?php if ( $countbang == 1 ) {
    echo '<div class="row">'; } elseif ( ( $countturtle % 3 ) == 0 ) {
    echo '<div class="row">'; } ; ?>

<a href="<?php the_permalink() ?>">
<div id="post-grid-<?php the_ID(); ?>" class="training-block <?php echo $countbang; ?>-block-training col-xs-6 col-sm-4 col-padding-0" >   
<div id="color-overlay"></div>  
    <?php if ( has_post_thumbnail() ) {
        $image_src = wp_get_attachment_image_src( get_post_thumbnail_id(),’thumbnail’ );
            echo '<img width="100%" class="fet-img" src="' . $image_src[0] . '">';
        } 
    ?>
    <p class="overlay-text"><?php the_title(); ?></p>
</div><!-- #post-grid -->
    </a>
<?php if ( $countbang % 3 == 0 ) {
    echo '</div>'; } 
    elseif ( $countposts == $countbang ) { echo '</div>';} ; ?>
<?php endwhile; ?>

minux · Accepted Answer · 2017-12-09T22:20:34.077

0

Use array_chunk function

So, your code become:

    $countbang = 0 ;
    $count_posts = wp_count_posts( 'services' )->publish;
    $args = array( 'post_type' => 'services', 'posts_per_page' => 6 );

    $chunks = array_chunk($loop, 2); //it chunk $loop array into arrays with 2 elements. 

        while($chunks as $row){
           echo "<div class='row'>"; //open row
           while($row as $post){
             $countbang++;
             <a href="<?php the_permalink() ?>">
             <div id="post-grid-<?php the_ID(); ?>" class="training-block <?php echo $countbang; ?>-block-training col-xs-6 col-sm-4 col-padding-0" >   
             <div id="color-overlay"></div>  
             <?php if ( has_post_thumbnail() ) {
                $image_src = wp_get_attachment_image_src( get_post_thumbnail_id(),’thumbnail’ );
                echo '<img width="100%" class="fet-img" src="' . $image_src[0] . '">';
             } 
             ?>
             <p class="overlay-text"><?php the_title(); ?></p>
             </div><!-- #post-grid -->
             </a>
           <?php
           }
           echo "</div>"; //close row
        }

edited Dec 09 '17 at 22:20

answered Dec 09 '17 at 20:31

minux

2,694
2
18
16

Thanks a lot. Where does this fit into my code though? – jfar_2020 Dec 09 '17 at 20:58
What I mean by that is, where does this go and what does it replace from my code? I tried inserting this into different areas but Dreamweaver doesn't like any of them – jfar_2020 Dec 09 '17 at 21:05
This is throwing up errors, is there any missing closing tag anywhere? I must admit, I cant see one. – jfar_2020 Dec 09 '17 at 21:10
Probably you need to change methods like the_ID with $post->ID. – minux Dec 09 '17 at 21:17
Thanks I'll go away and take look then report back and condone as answered once I get it working – jfar_2020 Dec 09 '17 at 21:24
Its definitely throwing up a formatting error. It's not a validation error as dreamweaver can't process the php, it just tells me it's written wrong. – jfar_2020 Dec 09 '17 at 22:09
it was a – minux Dec 09 '17 at 22:22
OK thanks, I didn't think it was an exact solution. Thanks a lot, you've helped me in my way so I'll work away at it now. – jfar_2020 Dec 09 '17 at 22:25

WordPress Loop in Bootstrap Grid

1 Answers1