Field repeating and loops
Create repeating field and set optionsCreate a new field in the Inspector. In this example we’re using an image field. Switch on the repeater options switch for this field at the very bottom of the Inspector. Set a minimum or maximum number of required instances of this field in the Object count limits section. You may also set a default object count.
Loop through field with HubL
Since we’re giving the user the ability to add as many instances of this field as they like, our HubL markup will take the form of a loop instead of a single tag. In the HTML + HUBL section of the code editor, loop through the new field as shown in the screenshot below.
In this example, we’re looping through an image field named snapshots and plugging the src and alt attributes of each instance into an image tag. The attributes used in this loop will vary with the field you are repeating. Check out the reference page for a full list of fields and their attributes.
If you’d like more general info on HubL loops, full documentation can be found here.
The editing experience for repeating fieldsThe editor experience for users is illustrated below. In the left screenshot, the default single image appears when a user first begins editing this module. Clicking the Add button duplicates the default image.
As illustrated in the screenshot on the right, hovering over the duplicated image allows the user to either delete the image or enter editing mode where they can swap the image and set any other available attributes.