1

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) %}
    <div class="cell image-pane-bg" style="background-image: url('{{ myImageUrl }}');"></div>   
{% endfor %}


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

Improve this question

1 Answer 1

Reset to default
1

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) %}
    <div class="cell image-pane-bg" style="background-image: url('{{ myImageUrl }}');"></div>   
{% endfor %}

If you wanted to get even shorter (but less readable):

{% for myBlock in product.imageMatrix.all() %}
    <div class="cell image-pane-bg" style="background-image: url('{{ myBlock.image.one.getUrl(myBlock.format.value) }}');"></div>   
{% endfor %}
Improve this answer
6
  • 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 (craftcms.com/docs/3.x/…). Could it be this is getting tripped-up by this?
    – Britchie
    Jul 2, 2021 at 15:57
  • @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
    Jul 2, 2021 at 21:55
  • 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
    Jul 5, 2021 at 2:59
  • @Britchie - You're close. I've updated my code above, hopefully it helps.
    – RitterKnight
    Jul 5, 2021 at 16:52
  • Working now I'm using the correct syntax. Thx for all your help @RitterKnight.
    – Britchie
    Jul 8, 2021 at 6:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.