Skip to content

Instantly share code, notes, and snippets.

@j-cam
Last active August 29, 2015 14:03
Show Gist options
  • Save j-cam/75aa134432928b2edf95 to your computer and use it in GitHub Desktop.
Save j-cam/75aa134432928b2edf95 to your computer and use it in GitHub Desktop.
Create 2 equal columns of grid items from an Advanced Custom Fields repeater field. The left column will contain more items if the number of results is an odd number.
<div class="row">
<?php
// ACF_REPEATER_FIELD_NAME Repeater
if( get_field( 'ACF_REPEATER_FIELD_NAME' ) ):
// Get number of items from the result
$numItems = sizeof( get_field( 'ACF_REPEATER_FIELD_NAME' ) );
// Divied by 2 and round up to distribute evenly between the columns
$itemsPerColumn = round( $numItems/2 );
// Intialize an iterator for displacing an odd number of results
$itemNum = 0;
?>
<!-- LEFT COLUMN DIV -->
<div class="col-1-2">
<?php
while( has_sub_field('ACF_REPEATER_FIELD_NAME') ):
$itemNum++;
?>
<div class="item-wrapper">
<div class="item">
<header>
<h3><?php the_sub_field('item_title'); ?></h3>
<h5><?php the_sub_field('item_subtitle'); ?></h5>
</header>
<div class="item-info">
<p>
<?php the_sub_field('item_description'); ?>
</p>
</div><!-- / item info -->
</div><!-- / .item -->
</div><!--/ item-wrapper -->
<?php
// Close the left column div if the max is reached and open the second column div
if($itemNum == $itemsPerColumn):
?>
</div><!-- /col-1-2 LEFT COLUMN -->
<!-- RIGHT COLUMN DIV -->
<div class="col-2-2">
<?php endif; ?>
<?php
// Close the right column when the end is reached
if($itemNum == $numItems):
?>
</div><!-- /col-2-2 -->
<?php endif; ?>
<?php endwhile; ?>
<?php endif; // ACF_REPEATER_FIELD_NAME ?>
</div><!-- / .row -->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment