<p>So instead of using the dot syntax <code>.</code>, this would be a good place to use the subscript syntax <code>[]</code>.</p>

<pre><code>{# dot syntax #}
{{ foo.bar }}

{# subscript syntax #}
{{ foo['bar'] }}
</code></pre>

<p>When you use the subscript syntax to access a variable's attributes, you can safely use variables (by just removing the single quotes surrounding the attribute).</p>

<pre><code>{% set bar = 'helloWorld' %}
{{ foo[bar] }}
{# functions just like foo.helloWorld #}
</code></pre>

<p>So for your example, you would do this:</p>

<pre><code>{% if block.listImageRatio == '16by9' %}
    {% set imageRatio = 'imageVariants16by9' %}
{% endif %}

{% set optimizedImages = item.itemImage.one()[imageRatio] %}
</code></pre>

<p><a href="https://twig.symfony.com/doc/2.x/templates.html#variables" rel="nofollow noreferrer">(Twig docs)</a></p>

CC BY-SA 4.0
2018-12-17T15:21:05.957Z
2018-12-17T15:21:05.957Z
Jalen Davenport
<p>I'm keen to set my image variants dynamically from content editor and not quite sure how I do this in twig.</p>

<p>I have three variants. They are named <code>imageVariantsThumb</code>, <code>imageVariants16by9</code>, and <code>imageVariants3by2</code> in craft.</p>

<p>To render the variant on the image I use the following.</p>

<pre><code>{% set optimizedImages = item.itemImage.one().imageVariantsThumb %}
</code></pre>

<p>Depending on the dropdown selected in the editor (say the values are <code>thumb</code>, <code>16by9</code> and <code>3by2</code>) I want to change the variant name in this line of code. How do I use the value from my drop-down field to change the variant name on the end of the code above?</p>

<p>I have tried defining a variable using the value and replacing <code>imageVariantsThumb</code> above but it doesn't work:</p>

<pre><code>{% if block.listImageRatio == '16by9' %}
  {% set imageRatio = 'imageVariants16by9' %}
{% endif %}

{% set optimizedImages = item.itemImage.one().imageRatio %}
</code></pre>

<templating><craft3><plugin-imageoptimize>
Dynamic Image Variant in Template
# Dynamic Image Variant in Template

(Asked by: username_0 on 2018-12-17)

I'm keen to set my image variants dynamically from content editor and not quite sure how I do this in twig.
I have three variants. They are named imageVariantsThumb, imageVariants16by9, and imageVariants3by2 in craft.
To render the variant on the image I use the following.
{% set optimizedImages = item.itemImage.one().imageVariantsThumb %}

Depending on the dropdown selected in the editor (say the values are thumb, 16by9 and 3by2) I want to change the variant name in this line of code. How do I use the value from my drop-down field to change the variant name on the end of the code above?
I have tried defining a variable using the value and replacing imageVariantsThumb above but it doesn't work:
{% if block.listImageRatio == '16by9' %}
  {% set imageRatio = 'imageVariants16by9' %}
{% endif %}

{% set optimizedImages = item.itemImage.one().imageRatio %}

**Tags:** templating, craft3, plugin-imageoptimize

---

## 1 answers

### Answer by username_1 on 2018-12-17. Score: 4 | Accepted answer

So instead of using the dot syntax ., this would be a good place to use the subscript syntax [].
{# dot syntax #}
{{ foo.bar }}

{# subscript syntax #}
{{ foo['bar'] }}

When you use the subscript syntax to access a variable's attributes, you can safely use variables (by just removing the single quotes surrounding the attribute).
{% set bar = 'helloWorld' %}
{{ foo[bar] }}
{# functions just like foo.helloWorld #}

So for your example, you would do this:
{% if block.listImageRatio == '16by9' %}
    {% set imageRatio = 'imageVariants16by9' %}
{% endif %}

{% set optimizedImages = item.itemImage.one()[imageRatio] %}

(Twig docs)


---

