Question

Need a little help with a solution for this problem. I have a list of services that is generated as such:

<div class="row">
    <?php foreach( $entries as $s ) : ?>
    <?php require( dirname(__FILE__) . '/_index_DisplayService.php' ); ?>

    <?php endforeach; ?>
</div>

_index_DisplayService.php

<div class="grid-4">
    <div id="service-mobile-dev" class="service">   
        <div class="service-icon">
            <i class="icon-calendar"></i>
        </div>
    </div>
</div>

Now this is a grid-12 layout, so I need 3, grid-4 per row then new row. I think that a solution starts with moving the <div class="row"> below <?php foreach( $entries as $s ) : ?> looking something like this:

<?php foreach( $entries as $s ) : ?>
    <div class="row">
        <?php require( dirname(__FILE__) . '/_index_DisplayService.php' ); ?>
    </div>
<?php endforeach; ?>

This of course kicks everything to a single row. How do I go about generating 3 grid-4’s per row.

Thanks!

Answer 1

You can use the index => value properties in a foreach (or replace it entirely with a for loop) and run a modulo on the index to insert the row div conditionally. Assuming $entries is an array.

<?php
    foreach ($entries as $key => $value) :
        
        // Close the "previous" row tag before beginning the next row
        // Obviously we should not start with a closing tag ($key > 0)
        if ($key > 0 && $key%3 == 0) {
            ?>
            </div>
            <?php
        }
        
        // Start a new row
        if ($key%3 == 0) {
            ?>
            <div class="row">
            <?php
        }
        
        // Insert the "grid-4" elements
        require dirname(__FILE__) . '/_index_DisplayService.php';

    endforeach;
    
    // If there were any entries then we have a row which hasn't been closed yet.
    // Close it.
    if (count($entries) > 0) {
        ?>
            </div>
        <?php
    }
?>