With V 2.10 we have added the much awaited support for ACF Repeater fields. Implementation of repeater field is different for everyone. Different set of fields and different layout to display them.We were working for a long to figure out the best flexible solution to implement it. And finally it is here.
In this article I will explain you how it use this new feature. As it seems to be little tricky, I have opted to explain you with an real example.
Case: Create a directory listing of Destinations (cities) and for each destination provide some brief info about places to visit in those destinations.
Here is the final result that we are planning to implement. Places to Visit section is rendering from the data saved in Repeater fields.
As you can see in above screenshot info from our repeater fields are shown in a nice grid layout. (You can also show it as carousel or slider)
- A Custom Post Type “Destinations” (to manage the main listing)
- ACF repeater field with the following subfields.
- place_name: a Text field for the name of the place
- place_image: Image field to add an image of the place
- place_description: Text area to add a small description of that place.
Designing Repeater Block Layout
- Create a new AE Template (AE Templates -> Add New) and do the following configurations.
- Render Mode: ACF Repeater Block
- Preview Post: Select a Post/CPT on which data for repeater field is available. Data from this post will be used while displaying the preview in Elementor editor.
- Repeater Field (ACF): Select the Repeater field for which you are designing this layout.
- Now save this template the start editing it with Elementor.
- In Elementor Editor, use AE Custom Field widget to show data from Repeater subfields.
- In AE – Custom Field widget, in the name field specify the key/slug of your subfield.
- Place multiple custom field widgets to add the data from all the custom fields (subfields). Design it in the same way as you want your individual repeater item to be displayed.
Now as Repeater Block Layout is complete, you are ready to create Singular Post Template for Destinations Post Type.
Design Single Post Template
- Create a new AE Template (AE Templates -> Add New) with following configurations.
- Render Mode: Post Template
- Post Type: Destinations
- Preview Post: Select a post from Destinations post type. Data from this post will be used while displaying the preview in Elementor editor.
- Auto Apply: Check this to apply the template to all destinations post types.
- Save the template settings and start editing with Elemetor.
- In Elementor editor add the widgets like “AE – Post Title”, ‘AE – Content’ etc to show the title, content and other post data.
- Now to display the data from repeater field use AE – ACF Repeater
- In widget settings, do following configuation
- Template: Select the Repeater Block Layout that we have created above.
- Repeater Field (ACF): Select the repeater field.
- In Repeater widget, modify the layout and style settings as per the requirement.
- Now it is displaying the data from Repeater field.
You can set Repeater field to display as Grid, List, Carousel and Slider. There are lot of styling controls available that you can use to create awesome layout.
I hope you will like this feature a lot. As we already have a strong support for ACF, a lot of people have asked use to add support for ACF Repeater Field. So finally we have implemented.
We are continuously working on adding more enhanced support for ACF and Pods.