Repeaters

Write a block of HTML and let users decide if they want one instance, five, or 500.

<div class="items">
    { repeater(id: '{{ component_id_1 }}') }
        <div class="item">
            <sf-text id=":2"></sf-text>
        </div>
    { repeater_end() }
</div>

Looking at the example code we can identify where the repeater starts and ends. All code within the repeater will be repated when a user hits the plus-icon.

Repeaters share the same id space as content tags. In the example above you see {{ component_id_1 }}. which is the same as :1. That is why <sf-text> is using :2.

Repeaters is a great companion to Flexbox. Consider the following CSS:

.items {
     display: flex;
     align-items: center;
     justify-content: center;
}

.item {
     width: 25%;
}

This will make all items line up nicely independently of how many instances the user has added.

Change repeater button position

Snowfire will automatically append the repeater buttons HTML which makes it possible for your user to add or edit the repeated elements.

If you want to choose where to put these buttons, please add the following HTML to after { repeater_end() }

<div class="sf-repeater-buttons"></div>

Once added, add a wrapper element around the repeater and sf-repeater-buttons. Make the wrapper element use position: relative and you are good to go.