Skip to main content

Using loops in HTML templates

Learn how to use loops to automatically repeat content for days, activities, accommodations, transport, and other project information in an HTML webpage.

A loop allows an HTML template to repeat the same structure for several items from your Ezus project.

For example, instead of manually creating a section for Day 1, Day 2, Day 3, and so on, you can create the structure once and use a loop to repeat it for every day in the program.

Loops are particularly useful when the number of items can vary from one project to another.

⚠️ This article focuses on the Ezus-specific use of loops in HTML templates. It assumes that you are already familiar with basic HTML.

1. How does a loop work?

A loop has three main parts:

{% for item in collection %}   Content to repeat {% endfor %}

  • {% for ... %} starts the loop.

  • The content between the opening and closing tags is repeated for each item.

  • {% endfor %} closes the loop.

For example, to repeat content for every day in the program:

{% for day in days %}   <h2>{{ day.title }}</h2> {% endfor %}

If your program contains three days, Ezus goes through the days one by one and generates the <h2> element for each of them.

💡 Think of a loop as: “For every item in this collection, generate this content.”

2. Use information from the current item

Inside a loop, the variable refers to the item currently being processed.

For example:

{% for day in days %}   <h2>{{ day.title }}</h2> {% endfor %}

Here:

  • days is the collection Ezus goes through.

  • day represents the current day.

  • day.title retrieves the title of that current day.

If the project contains:

  • Arrival in Paris

  • Discover Paris

  • Departure

the same loop can generate:

Arrival in Paris

Discover Paris

Departure

You do not need to create separate HTML for each day.

⚠️ Variables inside loops use the current object syntax, such as {{ day.title }}. Do not automatically copy a Slides variable such as $$days.1.title$$ into an HTML loop.

🔭 See Full list of variables for HTML to find the available HTML variables and their context.

3. Display the position of an item with loop.index

Inside a loop, you can use:

{{ loop.index }}

to display the position of the current item.

The first item returns 1, the second returns 2, and so on.

For example:

{% for day in days %}   <h2>Day {{ loop.index }} — {{ day.title }}</h2> {% endfor %}

This can generate:

Day 1 — Arrival in Paris
​Day 2 — Discover Paris
​Day 3 — Departure

This is useful when you want to number elements automatically without manually assigning a number to each one.

💡 You can also use the item you are looping through +.index. For example: Instead of {{loop.index}} inside a days loop, you can use {{day.index}}

4. Loop through days

Use a days loop when you want to repeat content for every day in the program.

For example:

{% for day in days %}   <section>     <h2>Day {{ loop.index }} — {{ day.title }}</h2>     <p>{{ day.description }}</p>   </section> {% endfor %}

The <section> is repeated for every day available in the project.

💡 Place all the elements that should repeat for each day inside the loop. Elements placed after {% endfor %} are generated only once.

5. Loop through program items

Loops can also be used for program information such as steps, accommodations, and transport.

The same principle applies: the loop goes through a collection and the variable inside the loop represents the current item.

For example, a structure for steps can follow this logic:

{% for step in steps %}   <div>     <h3>{{ step.title }}</h3>   </div> {% endfor %}

A similar structure can be used for other supported collections, such as accommodations or transport.

The information available inside the loop depends on the object you are iterating over. A day, step, accommodation, transport item, product, or other object may expose different information.

6. Use nested loops

You can place one loop inside another when you need to repeat information that belongs to each item of a first collection.

A common example is displaying the steps associated with each day.

The structure follows this logic:

{% for day in days %}   <h2>{{ day.title }}</h2>    {% for step in day.steps %}     <h3>{{ step.title }}</h3>   {% endfor %}  {% endfor %}

The outer loop goes through the days. For each day, the inner loop goes through the steps associated with that day.

This allows the generated webpage to follow the hierarchy of the program:

Day 1
→ Step 1
→ Step 2

Day 2
→ Step 1
→ Step 2
→ Step 3

💡 When working with nested loops, pay attention to which object you are currently using. day.title refers to the current day, while step.title refers to the current step inside that day.

💡 In Ezus HTML templates, conditions are supported for steps within a day, using structures such as {% if day.steps %}. Do not assume that conditions can be applied to other variables or objects.

7. Make sure every loop is closed

Every loop opened with:

{% for ... %}

must be closed with:

{% endfor %}

For example:

{% for day in days %}   <h2>{{ day.title }}</h2> {% endfor %}

If you use nested loops, each loop requires its own {% endfor %}.

Formatting and indentation can make the structure easier to understand:

{% for day in days %}    {% for step in day.steps %}     {{ step.title }}   {% endfor %}  {% endfor %}

⚠️A missing or incorrectly positioned {% endfor %} can prevent the template from generating correctly or cause content to repeat in an unexpected way.

9. Common mistakes with loops

If a loop does not produce the expected result, check:

  • The collection: Make sure you are looping through the correct type of information.

  • The current object: Use the variable corresponding to the object inside the loop.

  • Opening and closing tags: Check that every {% for ... %} has a corresponding {% endfor %}.

  • Nested loops: Make sure each variable refers to the correct level of information.

  • Source information: Check that the project actually contains the items you expect the loop to display.

  • Conditions: If content is inside an {% if %} condition, check that the condition is being met.

⚠️ An empty result does not necessarily mean that the loop is incorrect. The collection may simply contain no corresponding information in the project used for testing.

10. Test your loop

After creating or modifying a loop:

  1. Save the HTML template.

  2. Generate the webpage with a representative project.

  3. Check how many items were generated.

  4. Compare them with the corresponding information in the project.

  5. Check the first and last item to make sure the complete collection is being processed.

  6. Test with another project containing a different number of items.

💡 A good loop should adapt without requiring changes to the HTML when one project contains three items and another contains ten.

🔭 See Full list of variables for HTML to find the variables available inside your HTML templates, and Using custom fields in HTML templates if you need to retrieve information from fields configured specifically for your account.

Did this answer your question?