Advanced Custom Fields provides very powerful tools to extend a WordPress site using custom fields. The ACF UI integrates tightly with the standard WordPress admin making for a robust and seamless experience.
It is a common need to output a responsive grid from an ACF repeater field, but it can be tricky to output the results in rows and columns. An elegant solution is to break the repeater field value array into chunks using the array_chunk function:
$items = get_field('items'); $cols_in_row = 4; if ( $items ) { $rows = array_chunk( $items, ceil( count($items) / $cols_in_row ) ); foreach ( $rows as $row ) { echo '<div class="row">'; foreach ( $row as $item ) { echo '<div class="col-<?php echo intdiv(12, $cols_in_row); ?>">'; echo '<a href="' . $item['link'] . '" target="_blank" rel="noopener noreferrer">'; echo wp_get_attachment_image( $item['image']['ID'], 'medium' ); echo '</a>'; echo '</div>'; } echo '</div>'; } }
This approach avoids having to use counters for row and column and output termination markup on the beginning or end of rows.
This example uses a simple repeater field with 2 sub-fields: Image and Link. Download the json here to import into ACF. Unzip it before importing. Note that you need an ACF Pro license to use repeater fields.
Hello,
Could you share the ACF Group Field/Layouts that relates to this output please? Its a great a example.
Thank you.
Hi. I’ve updated the post with a link to an example repeater field that you can use.