Skip to main content
Question

Using variables in a media component URL?

  • 24 May 2024
  • 1 reply
  • 11 views

I have an Interface page with a media component that is using a URL source for an image to show the image in the page.

I would like to be able to have this image change based on a supplied query string variable fed to the page, similar to how we can show different text in a text component using this method, or how we can pre-fill form fields using query strings.

When I do an Ai inquiry about it, it shows we should be able to do it by using {{variable}} but that is not working.

ie if the URL for the image is https://domain.com/images/light-{{color}}.jpg I want to be able to pass a query string variable of “color=red” or “color=green” to show a different image based on that variable.

Has anyone had success with this? If so, how did you pull off the variable insertion in the URL?


I submitted the same question to Interfaces Support, but ever since it has come out of preview mode, they don’t seem to be following up on things very often.

Thanks in advance.

This post has been closed for comments. Please create a new post if you need help or have a question about this topic.

1 reply

SamB
Rank
Userlevel 7
Badge +11

Hi @Jason Steele 👋

The variable that AI suggested appears to be incorrect. To reference a field called color you’d use {{params.color|default:"red"}} - setting the default to be red for example should output the word red where no value is selected for the color field. You can learn more about how to use form fields to personalize components here: Use form data to personalize components

That said, as the parameter is being used in a media component to set it’s URL, then that’s not going to work. I can see you’ve had a response from our Support team who have confirmed that parameters only work with text fields in Interfaces, not media components. And they’ve submitted a feature request on your behalf to allow the use of this parameters with media components.

Sorry to not have a more immediate solution or workaround to suggest at this time. We can’t provide any estimate as to when that feature request will be implemented by, but we’ll definitely notify you by email once it is. If there’s anything else we can help with in the meantime please let us know! 🙂

Terms & Conditions