Adding a repeater field

When using ACF you can add a repeater to a post. For instance, it can be used when you need one or more custom gallery images with a description and link.

A detailed example on how you can add such a field can be found on the ACF docs pages:
https://www.advancedcustomfields.com/resources/repeater/

Step 1: Testing for repeater entries

Depending on the settings for the repeater the number of entries can be limited. It can also be so that the repeater can be empty, no entries.

For that matter, it’s always a good idea to test if the repeater has any entries at at:

{% if post.repeater_field_name|length > 0 %}
{# // do something #}
{% endif %}

The if statement above will test if the length of the repeater (which is an array of entries) is greater than 0. If not, nothing will be rendered.

Step 2: Starting the list of entries

Now that we know that there’s at least one entry for the repeater, we can proceed by adding whatever html is needed to proceed the individual items:

{% if post.repeater_field_name|length > 0 %}
    <ul class=""slides>
     {# // items will go here #}
    </ul>
{% endif %}

Step 3: Looping over the entries

The easiest way to go over the entries in the repeater is by using the for … endfor loop. It will go over all the entries in the repeater and create a new variable for you to query within that loop.

{% if post.repeater_field_name|length > 0 %}
	<ul class="slides">
		{% for item in post.repeater_field_name %}
                {# markup for the entry goes here  #}
	        {% endfor %}
	</ul>
{% endif %}

Step 4: The repeater entry

Now that we know that within the for .. endfor loop the entries value will be called item, we can start building our markup for the slide.

Let’s start with a complete markup example first:

<!--  example of the complete markup -->

<li class="slide">
    <a href="https://www.toolboxdemosite.com/example/myslide/">
        <img src="https://www.toolboxdemosite.com/wp-content/uploads/2019/12/my-slide.jpg" alt="My first image">
    </a>
    Some text goes here
</li>

As you can see, we’ll need the link, the image and the description field from the repeater.

The link sub-field

The link field in the repeater isn’t a required field, so it could be empty, right? This would also make the <a> tag obsolete. You can add an if .. endif statement to solve that:

{#
    the link sub-field
#}
{% if item.link %}<a href="{{ item.link }}">{% endif %}

{% if item.link %}</a>{% endif %}

As you can see, you will need to perform the if .. endif statement on both the opening and closing tag to prevent errors.

The image sub-field

Timber adds a number of functions to Twig that make it a breeze to get what you need. The TimberImage() function for instance will help you add images with ease.

{#
    assuming item.image is the image ID of the selected image
#}
<img src="{{ TimberImage( item.image ).src( 'thumbnail' ) }}" alt="{{ TimberImage( item.image ).alt }}" />

The content sub-field

Finally, we need to add the content sub-field to our markup. This is done by just outputting the returned value:

{#
    content sub-field
#}
{{ item.content }}

Step 5: Piecing it all together

Now that we’ve gone over all the individual sections of the template, we can put everything together, completing our template for this repeater:

{#
    piecing it all together
#}
{% if post.repeater_field_name|length > 0 %}
	<ul class="slides">
		{% for item in post.repeater_field_name %}
			<li class="slide">
				{% if item.link %}<a href="{{item.link}}">{%endif%}
					<img src="{{TimberImage(item.image).src('thumbnail')}}" alt="{{TimberImage(item.image).alt}}" />
				{% if item.link %}</a>{% endif %}
				{{ item.content }}
		</li>
	{% endfor %}
	</ul>
{% endif %}