Repeater (Pro)

The Repeater field type (e.g. ACF Repeater field) provides a neat solution for repeating content – think slides, team members, CTA tiles and alike.

ACF offers a dedicated field type called Repeater, whereas MetaBox provides the Group field exclusively. However, enabling the 'clonable' setting of the MetaGroup effectively transforms it into a repeater.

Repeater acts as a parent to a set of sub fields which can be repeated again and again. What makes this field type so special is its versatility. Any kind of field can be used within a Repeater, and there are no limits to the number of repeats either (Unless defined in the field settings).

How to use it

Select your repeater field Group, then select the repeater Field from the dropdown.

Enable Slider, by selecting an optional library from the list.

Switch to the Sub Fields tab, and assign the Group sub fields.

Click on the Update button to save your View.

Copy the shortcode into the post, page or CPT where you want to display the fields.

Fill out the fields as required, then click Publish or Update to save your page or post.

Visit your page to see the result.

Displaying items as a Grid

You can turn any repeater into Grid, using the CSS grid feature, by adding the following to the CSS code field of your View:

#view__repeater {
 display: grid;
 grid-template-columns: 1fr;
 gap: 20px;
}

@media screen and (min-width:992px) {
#view__repeater {
  grid-template-columns: repeat(2, 1fr);
 }
}

Displaying items in a Slider

AVF comes with a set of pre-configured JS libraries, so you can easily turn the repeater items into a slider.

After adding the repeater field to the target View, change the 'Enable Slider' option to 'Splide v4' and press the Save button. It'll automatically change the field markup to incorporate the necessary classes, and add the default JS instance:

var repeater_inner = this.querySelector('.pro-fields__repeater-inner');
if (repeater_inner) {
	/* https://splidejs.com/guides/options/ */
	new Splide(repeater_inner, {
		type: 'loop',
		perPage: 1,
		perMove: 1,
	}).mount();
}

You can customize it according to your needs, using any available Splide options.

Nested repeaters

AVF supports nested repeaters with no restrictions on the depth of nesting. To display a nested repeater, follow these steps:

1. Create the Parent View:

   • Go to the Views section and create a new 'Parent' View.

   • Select the target repeater field in the Fields tab and save the View.

2. Create the Child View:

   • Create another View, this will be the 'Child' View.

   • In the 'Parent Group' field of this View, choose the target repeater field that is nested within the Parent View and save the View.

3. Configure the Parent View:

   • Open the 'Parent' View.

   • In the repeater field settings of the Parent View, select the 'Child' View you just created from the 'View' setting and save the Parent View.

That’s it! You can now use the 'Parent' View wherever needed, and it will display both the outer repeater fields and the nested inner repeater. You can further customize the template and add CSS/JS as usual. Note that the 'Child' View is designated for inner usage only and cannot be used directly.

To add another depth level, simply repeat the steps outlined above, treating the 'Child' View as the new parent for the next level of nesting.

This process is also described in the Display Nested Repeater Fields Guide.

Advanced usage

Picking up a random row

Using the random Twig function, you can pickup a random row:

{% set randomItem = random(repeater.value) %}
{# todo work with the item as usually: randomItem.subfield.value #}

Custom items sorting

Using the sort Twig filter, you can sort the array by any subfield. The code example below sorts the repeater items by the year subfield in Ascending order:

{% for item in repeater.value|sort((a, b) => a.year <=> b.year) %}
{# todo print item fields #}
{% endfor %}

To turn it into Descending order, just put the b to the left side (and a to the right).