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 similar.

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 Layout.

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.

View 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 in the CSS & JS tab of your Layout:

#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

Advanced Views Pro 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 Layout, change the 'Enable Slider' option to 'Splide v4' and Save. 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

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

1. Create the Parent Layout:

   • Go to the Layouts section and create a new 'Parent' Layout.

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

2. Create the Child Layout:

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

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

3. Configure the Parent Layout:

   • Open the 'Parent' Layout.

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

That’s it! You can now use the 'Parent' Layout 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' Layout is designated for internal use only and cannot be used directly on pages or posts.

To add another depth level, simply repeat the steps outlined above, treating the 'Child' Layout 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 sub field. The code example below sorts the repeater items by the year sub field 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).