DOCS

Loops overview

Some fields can contain multiple rows of information, for example Taxonomies, Repeater fields, Recurring date fields etc. We refer to these as Loopable fields

By default, a dynamic tag from such a field will return data from its first row.

Let’s take as an example a Category field.

If we check the list of dynamic tags available for this Category field, we see things like ID, Label, Slug etc.

If we pick Label tag, only the name of the first category will show on our template. But our posts can contain multiple categories, and each of them includes all of the information above.

To retrieve all the categories in this case, we would loop the widget where we added this dynamic tag, based on the Category field.

By looping the widget based on Category field, the widget will be automatically replicated to show each item, in this case each category.

Which elements can be looped?

Elements that can be looped are:

  1. Widget rows: Some widgets let you add rows, such as Actions widget, List widget etc. You can enable loops for individual rows in those widgets
  2. Entire Widgets: Loops can also be enabled for entire widgets such as containers, headings and so on.

Looping widget rows

We added a widget that has content rows, in this case the Actions widget, but can be any other one such as List widget.

We added a single row.

And we populate the “Text” field with Post > Category > Label dynamic tag

Now, the name of the first category, in this case “Bars” is shown

To retrieve all categories, in the row options under “Loop repeater row” we press “Edit loop”

And select Categories as loop source

and now, all our categories are displayed, in this case “Bars” and “Restaurants”

Even though we added a single row, for each category available an additional row is displayed in our template. We can then proceed to apply styling that is applied to each.

Looping widgets

Let’s add a Heading widget

And we are going to populate it with Post > Category > Label tag

To loop the widget, head to Voxel tab > Loop element > Press Edit loop

Select the source, in this case Categories and Save changes

Widget loops are not previewed inside editor, you must view front-end to see the loop in action.

When viewing a post in front-end, the widget is replicated for each additional category, and any styling changes we make to the original widget, is applied to each

Loop options

After selecting a loop source, the available options are

  • Loop limit: If a hard limit is set, the loop will stop there even if there are additional items left
  • Loop offset: Skip a set amount of items from the start of the loop

Continue reading