BrandenTGS BrandenTGS - 4 months ago 18
PHP Question

Display container for every two divs in while statment

I'm using foundation and Wordpress with Advanced Custom Field to build a services module.

I'm using the repeater field to insert the data.

Currently I have the row element outside of the while loop.

I need the div row to wrap every two "small-6 columns tgs-single-service" divs so the foundation grid displays properly. If I insert the row div in the while statement, it will wrap every single div in a row, which I do not want.

<?php if( have_rows('services_content') ):
$classNumber = 0

?>
<section class="full-width tgs-services-section">
<div class="row">
<?php while( have_rows('services_content') ): the_row(); ?>
<div class="small-6 columns tgs-single-service-<?php echo $classNumber = $classNumber + 1 ?>">
<figure class="effect-goliath">
<?php while( have_rows('service_images') ): the_row(); ?>
<img src="<?php the_sub_field('small_image');?>" srcset="<?php the_sub_field('medium_image');?> 1000w, <?php the_sub_field('large_image');?> 2000w" alt="Byoungz Poet Logo">
<?php endwhile; ?>
<figcaption>
<h3><?php the_sub_field('service_title');?></h3>
<?php the_sub_field('service_text');?>
</figcaption>
</figure>
</div><!-- end service section -->
<?php endwhile; ?>
</div><!--end row -->
</section>
<?php endif; ?>


Currently this displays as:

<div class="row">
<div class="small-6 columns tgs-service-section-1"></div>
<div class="small-6 columns tgs-service-section-2"></div>
<div class="small-6 columns tgs-service-section-3"></div>
<div class="small-6 columns tgs-service-section-4"></div>
</div>


I would like to achieve

<div class="row">
<div class="small-6 columns tgs-service-section-1"></div>
<div class="small-6 columns tgs-service-section-2"></div>
</div>
<div class="row">
<div class="small-6 columns tgs-service-section-3"></div>
<div class="small-6 columns tgs-service-section-4"></div>
</div>


Is there a way to have row wrap every two tgs-single-service divs?

Answer
<section class="full-width tgs-services-section">
    <div class="row">
    <!-- Create a counter i -->
    <?php $i=1; while( have_rows('services_content') ): the_row(); ?>
         <div class="small-6 columns tgs-single-service-<?php echo $classNumber = $classNumber + 1 ?>">
             <figure class="effect-goliath">
             <?php while( have_rows('service_images') ): the_row(); ?>
             <img src="<?php the_sub_field('small_image');?>" srcset="<?php the_sub_field('medium_image');?> 1000w, <?php the_sub_field('large_image');?> 2000w" alt="Byoungz Poet Logo">
             <?php endwhile; ?>
            <figcaption>
                 <h3><?php the_sub_field('service_title');?></h3>
                 <?php the_sub_field('service_text');?>
                </figcaption>   
             </figure>
         </div><!-- end service section -->
         <?php if($i % 2 == 0): ?><!-- Check if its divisable by 2 -->
            </div>
            <div class="row">
        <?php endif; ?>
        <?php $i++; ?>
    <?php endwhile; ?>
    </div><!--end row -->
</section>
Comments