Working With Dynamic Variables in Antlers Runtime

In this article we will be looking at different ways to manage dynamic variable names within Antlers Runtime. This is a technique that comes up every now and then, and most often within the context of fetching dynamic alt text for images based on the current locale.

Let's assume we have the following variables available to us:

1alt_default: 'default alt text'
2alt_es: 'es alt text'
3alt_de: 'de alt text'

we could access any of those variables easily using the following:

1{{ alt_default }}
2{{ alt_es }}
3{{ alt_de }}

However, many times it would be useful if we could easily fetch one of those values dynamically based on the current locale. This is trivial if the data was inside an array, but may not be obvious when the data is at the root level like in this example.

#Using the Scope Tag

The first technique we will look at to dynamically fetch our alt will be to use the scope tag to alias everything. This will have the effect of pushing all of our root data into an array for us. This will then in turn let us use variable interpolation to construct a dynamic string we can use to retrieve the data we are interested in:

1{{ scope:scope_name }}
2    {{ scope_name[{'alt_{locale}'}] }}
3{{ /scope:scope_name }}

#Using Temporary Arrays

The second technique uses the same principle as the scope tag technique, but we will be creating an array containing our lookup data manually:

1{{
2    alts = [
3        'alt_en' => alt_en,
4        'alt_es' => alt_es,
5        'alt_default' => alt_default,
6    ]
7}}

Just like in the scope example, we will use string interpolation to create a dynamic string to fetch our desired alt text based on the current locale:

1{{ alts[{'alt_{locale}'}] }}

#Using Dynamic Variables

The third technique we will look at in this post is using dynamic variables. Dynamic variables let us store (or construct) a variable name as a string, and then get the value associated with that variable name. Dynamic variables begin with the @ character:

 1---
 2title: 'The title!'
 3---
 4 
 5{{ my_variable_name = 'view:title' }}
 6 
 7{{# Outputs 'view:title' #}}
 8{{ my_variable_name }}
 9 
10{{# Outputs 'The title!' #}}
11{{ @my_variable_name }}

In the previous example, when we use {{ my_variable_name }} without the @ prefix, it is just a normal variable, and will output the value view:title. However, when we used {{ @my_variable_name }}, the Runtime will fetch the value view:title and then parse that value as the variable, and return the results. This leads to the final output being:

1view:title
2
3The title!

We can apply the concept of dynamic variables to our alt text situation, and avoid having to use the scope tag, or create temporary arrays. The first step would be to create a string variable using interpolation to store the target variable name, and then use dynamic variable access to retrieve it's value:

1{{ alt_variable = 'alt_{locale}' }}
2 
3{{ @alt_variable }}

The previous example could be shortened to a single Antlers tag by implicitly returning the variable's value if you are only interested in using this value once:

1{{ alt_variable = 'alt_{locale}'; @alt_variable }}

If you plan on using the results of the dynamic variable in multiple places, it is recommended that you assign the results of the dynamic variable to another variable and use that instead. This is because since the original interpolated string could change, the dynamic variable must be re-parsed each time it is used:

 1{{# Set a variable's value dynamically #}}
 2{{
 3    alt_variable = 'alt_{locale}'
 4    alt_variable = @alt_variable
 5}}
 6 
 7{{#
 8    The alt_variable variable can now
 9    be used like normal multiple times
10#}}
11{{ alt_variable }}

#Which Method is Best?

There is no definitive answer to this question, and which technique you choose to use really comes down to personal preference at the end of the day (although I would recommend against creating temporary arrays inside loops if you can avoid it!).

If you are looking to use dynamic variables to handle prefixed imported fieldsets, you may want to look into Managing Imported Fieldset Handles with Antlers Runtime.

∎