Wordpress, display item in specific row - php

Question

working on a site, and I have some difficulties. It's really hard or not done by php what I am trying to accomplish!
So, there is a section named 'references', and each item belongs to a row (out of 4 rows).
At my static page it looks like this:
<div id="references-tiles">
<div class="reference">
<div class="reference-figure malmberg"></div>
</div>
<div class="reference">
<div class="reference-figure malmberg"></div>
</div>
****<div class="references-row"></div>****
<div class="reference">
<div class="reference-figure port"></div>
</div>
<div class="reference">
<div class="reference-figure malmberg"></div>
</div>
****<div class="references-row"></div>****
<div class="reference">
<div class="reference-figure malmberg"></div>
</div>
</div>
The reference-row acts like a separator
Each reference has to be a post, unfortunately wordpress won't work this way
Loop through Post and display them one the same way (only the items)
<div id="references-tiles">
<?php
$query = new WP_Query( array( 'category_name' => 'References' ) );
if ($query->have_posts()) : while ($query->have_posts()) : $query->the_post();
$image = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID)); ?>
<div class="reference">
<div class="reference-figure" style="background-image: url('<?php echo $image[0]; ?>')"></div>
</div>
<?php endwhile; endif; ?>
</div>
I just can't figure out how to control in a way, that a reference item is added to a row.
I tried using some modulo statements like:
if ($referenceCount % 4 == 0)
elseif ($referenceCount % 3 == 0)
elseif ($referenceCount % 2 == 0)
else
But this wasn't working out because as long I am in the loop, each item can be devided but not added in an already existing row.
Is there a way? Maybe to loop through the loop, add each reference item in a array, and depending on how many items total, I can devid them. Or use the loop 4 times and depending on the modulo, add a reference-item to a row? But I guess this wil make the site a bit slower..
Sorry for bad English, I am not clear at al, I am happy to try en explain myself better!
Regards and thanks!
IT-student

Answer 1

You should add a counter to your loop.
<div id="references-tiles">
<?php
$query = new WP_Query( array( 'category_name' => 'References' ) );
// Add a counter vvvvv
if ($query->have_posts()) : $i = 1; while ($query->have_posts()) : $query->the_post();
$image = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID)); ?>
<div class="reference">
<div class="reference-figure" style="background-image: url('<?php echo $image[0]; ?>')"></div>
</div>
<!-- If the counter is evenly divisible by 2, add a new row -->
<?php if ( $i % 2 === 0 ) : ?>
<div class="references-row"></div>
<?php endif; ?>
<!-- Increment the counter -->
<?php $i++; endwhile; endif; ?>
</div>

Answer 2

You can use array_chunk on the returned $query array
NOTE: The examples uses foundation's grid system to better display the outcome.
<?php
/**
* The second argument for array_chunk takes the size of the chunks
* ie: the number of columns you want to display per row
*/
$columnsPerRow = 4;
$query = new WP_Query( array( 'category_name' => 'References' ) );
if($query->have_posts()) : foreach(array_chunk($query->get_posts(), $columnsPerRow) as $posts) : ?>
<div class="row">
<?php foreach($posts as $post) : setup_postdata($post); ?>
<div class="columns small-6 medium-4">
<?php
/**
* Fetch the post thumbnail
* to be used as a background
*/
$thumbnail = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ));
?>
<div class="panel" style='background:url("<?php echo $thumbnail[0]; ?>")'> </div>
</div>
<?php endforeach; ?>
</div> <!-- end row -->
<?php
endforeach;
endif;
wp_reset_postdata();
?>

Answer 3

You don't need to use a counter, wordpress has a counter as it is in their loop.
<?php if ($query->current_post%2) { ?>
<div class="references-row"></div>
<?php } ?>
Make sure this code is inside the loop and before the endwhile.