Interupting the loop with extra divs to display data, and how to get it to work responsively

by

Hope you’re good, wondering if anyone can help, or at least point me in the right direction.

I’ve got a page with images of people on it(approx 30 people)

enter image description here

The objective is that when a user clicks on Person 1 a fact about Person 1 will appear from beneath them, when they click on Person 2, a fact about Person 2 will appear etc etc.

On desktop, I’ve got these split over 4 columns, on tablet 3 columns, and on mobile 2 columns.

My code is working perfectly on desktop. I’ve got two loops, one pulls the thumbnails of the people, and then when a counter gets to 4 a seperate loop is triggered that pulls in the corresponding divs.

Having coded this all out, I realised that when I try it on tablet or mobile it doesn’t display properly. For tablet, its expecting a 3 column grid, and the Fact box appears after the 4th person making it look weird. So my next idea is to tweak the numbers. E.g if the users browser window is < 768, make sure the divs appear every 2 people, not every 4. I’ve used pages and number of posts in the WP_Query. I guess I’d then parse this into PHP with javascript / ajax?

Its starting to feel messy….Is this the right approach, or am I barking up the wrong tree?

Heres a sample of code for the second query

     <?php if ($counter == 4) { ?>

            <?php  

                $no_of_rows++;   

                $paged = (get_query_var('paged')) ? get_query_var('paged') : $no_of_rows;
                 $args2 = array( 'post_type' => 'drummers', 'orderby' => 'menu_order', 'posts_per_page' => '4', 'paged' => $paged);  

                $your_loop2 = new WP_Query( $args2 ); 

                //FETCHES THE POSTS
                if ( $your_loop2->have_posts() ) : while ( $your_loop2->have_posts() ) : 
                $your_loop2->the_post(); 

                $post_id_inner = get_the_ID();

            ?>

 <div class="col-xs-12" id= "detailrow<?php echo $post_id_inner ?>" style="display:none;"><?php the_title(); ?></div>


<?php $counter = 0; ?>

<?php endwhile; endif; wp_reset_postdata();?> <!-- INNER LOOP FINISHED -->


<?php  } ?>

0

Leave a Comment