<p>You're close!</p>
<p>When you're querying or setting a variable with a <a href="https://craftcms.com/docs/3.x/dropdown-fields.html#querying-elements-with-dropdown-fields" rel="nofollow noreferrer">Dropdown field</a> you need to use either <code>.value</code> or <code>.label</code>.</p>
<p>It looks like you could also simplify your code a bit if the <code>value</code> (or label) of the dropdown is the same as your transform:</p>
<pre><code>{% for myBlock in product.imageMatrix.all() %}
    {% set myImage = myBlock.image.one %}
    {% set myTrans = myBlock.format.value %}
    {% set myImageUrl = myImage.getUrl(myTrans) %}
    &lt;div class=&quot;cell image-pane-bg&quot; style=&quot;background-image: url('{{ myImageUrl }}');&quot;&gt;&lt;/div&gt;   
{% endfor %}
</code></pre>
<p>If you wanted to get even shorter (but less readable):</p>
<pre><code>{% for myBlock in product.imageMatrix.all() %}
    &lt;div class=&quot;cell image-pane-bg&quot; style=&quot;background-image: url('{{ myBlock.image.one.getUrl(myBlock.format.value) }}');&quot;&gt;&lt;/div&gt;   
{% endfor %}

</code></pre>

CC BY-SA 4.0
2021-07-02T15:57:35.057Z
I can't get either of these approaches to work. It's throwing an 'unknown property: label' error. The parameter in the getUrl() method has to be wrapped in single quotes as per the docs (https://craftcms.com/docs/3.x/image-transforms.html#defining-transforms-from-the-control-panel). Could it be this is getting tripped-up by this?
Britchie
CC BY-SA 4.0
2021-07-02T21:55:34.690Z
@Britchie it might help to post more of your code?   What sort of field is ``format``?  Is ``myImage`` a variable you've defined or a placeholder for something else? The docs are using a single quote around the transform because that's just convention, if you use a variable you don't need quotes. My guess is you have a Twig syntax error somewhere, you just need to find out where.
RitterKnight
CC BY-SA 4.0
2021-07-05T02:59:45.567Z
Thx @RitterKnight. I've added some more details in my original post (above). It seems to be getting tripped-up on parsing the parameter from the dropdown list as a string.
Britchie
CC BY-SA 4.0
2021-07-05T16:52:33.037Z
@Britchie - You're close. I've updated my code above, hopefully it helps.
RitterKnight
CC BY-SA 4.0
2021-07-08T06:02:04.467Z
Working now I'm using the correct syntax. Thx for all your help @RitterKnight.
Britchie
CC BY-SA 4.0
2021-07-08T19:36:12.860Z
@Britchie: excellent, glad it worked!
RitterKnight
CC BY-SA 4.0
2021-07-01T00:54:46.507Z
2021-07-05T16:51:58.770Z
2021-07-05T16:51:58.770Z
RitterKnight
<p>I'd like to be able to use a variable with the getUrl() method so I can change the filter parameter on the entry page (user controlled) instead of in the source code:</p>
<p><code>style=&quot;background-image = url('{{ getUrl(var) }}')&quot;</code></p>
<p>I've been trying various approaches to accomplish this: nested output tags and concatenating strings eg:</p>
<code>
{% set myFormat = entry.format %}
{% set myImageUrlString = "url('{{ myImage.getUrl('" ~ myFormat ~ "') }}')" %}
</code>
<br />...which works in part by outputting the correct string but does not get parsed (duh me!).
<p>Can someone set me straight on the right approach to this and/or let me know whether this is even possible? TIA</p>
<p>July 4th, More details...</p>
<p>I am using a Matrix field to create a customizable grid of images. The 'format' block type is a dropdown list that contains labels/values identical to the image transforms I've created in the CP. The source code I'm using to make this work is as follows:</p>
<pre><code>{% for myBlock in product.imageMatrix.all() %}
    {% set myImage = myBlock.image.one %}
    {% if myBlock.format == &quot;square&quot; %}{% set myTrans = 'square' %}{% endif %}
    {% if myBlock.format == &quot;portrait&quot; %}{% set myTrans = 'portrait' %}{% endif %}
    {% if myBlock.format == &quot;landscape&quot; %}{% set myTrans = 'landscape' %}{% endif %}
    {% set myImageUrl = myImage.getUrl(myTrans) %}
    &lt;div class=&quot;cell image-pane-bg&quot; style=&quot;background-image: url('{{ myImageUrl }}');&quot;&gt;&lt;/div&gt;   
{% endfor %}
</code></pre>
<p><br />This isn't very elegant but it works. Using myBlock.format as the parameter does not.</p>

<image-transforms>
Using a variable with getUrl()?
# Using a variable with getUrl()?

(Asked by: username_0 on 2021-06-30)

I'd like to be able to use a variable with the getUrl() method so I can change the filter parameter on the entry page (user controlled) instead of in the source code:
style="background-image = url('{{ getUrl(var) }}')"
I've been trying various approaches to accomplish this: nested output tags and concatenating strings eg:

{% set myFormat = entry.format %}
{% set myImageUrlString = "url('{{ myImage.getUrl('" ~ myFormat ~ "') }}')" %}

...which works in part by outputting the correct string but does not get parsed (duh me!).
Can someone set me straight on the right approach to this and/or let me know whether this is even possible? TIA
July 4th, More details...
I am using a Matrix field to create a customizable grid of images. The 'format' block type is a dropdown list that contains labels/values identical to the image transforms I've created in the CP. The source code I'm using to make this work is as follows:
{% for myBlock in product.imageMatrix.all() %}
    {% set myImage = myBlock.image.one %}
    {% if myBlock.format == "square" %}{% set myTrans = 'square' %}{% endif %}
    {% if myBlock.format == "portrait" %}{% set myTrans = 'portrait' %}{% endif %}
    {% if myBlock.format == "landscape" %}{% set myTrans = 'landscape' %}{% endif %}
    {% set myImageUrl = myImage.getUrl(myTrans) %}
       
{% endfor %}

This isn't very elegant but it works. Using myBlock.format as the parameter does not.

**Tags:** image-transforms

---

## 1 answers

### Answer by username_1 on 2021-07-01. Score: 2 | Accepted answer

You're close!
When you're querying or setting a variable with a Dropdown field you need to use either .value or .label.
It looks like you could also simplify your code a bit if the value (or label) of the dropdown is the same as your transform:
{% for myBlock in product.imageMatrix.all() %}
    {% set myImage = myBlock.image.one %}
    {% set myTrans = myBlock.format.value %}
    {% set myImageUrl = myImage.getUrl(myTrans) %}
       
{% endfor %}

If you wanted to get even shorter (but less readable):
{% for myBlock in product.imageMatrix.all() %}
       
{% endfor %}

> **Comments:**
> **username_0**: I can't get either of these approaches to work. It's throwing an 'unknown property: label' error. The parameter in the getUrl() method has to be wrapped in single quotes as per the docs (https://craftcms.com/docs/3.x/image-transforms.html#defining-transforms-from-the-control-panel). Could it be this is getting tripped-up by this?  
> **username_1**: @Britchie it might help to post more of your code?   What sort of field is ``format``?  Is ``myImage`` a variable you've defined or a placeholder for something else? The docs are using a single quote around the transform because that's just convention, if you use a variable you don't need quotes. My guess is you have a Twig syntax error somewhere, you just need to find out where.  
> **username_0**: Thx @RitterKnight. I've added some more details in my original post (above). It seems to be getting tripped-up on parsing the parameter from the dropdown list as a string.  
> **username_1**: @Britchie - You're close. I've updated my code above, hopefully it helps.  
> **username_0**: Working now I'm using the correct syntax. Thx for all your help @RitterKnight.  
> **username_1**: @Britchie: excellent, glad it worked!  

---

