Dynamic images: How to use the exactly URL in a HTML code

Hey bubblers
As you know, when we use dynamic image and “rescale” it generates an image with a specific URL. This is my example: https://d1muf25xaso8hp.cloudfront.net/https%3A%2F%2Fs3.amazonaws.com%2Fappforest_uf%2Ff1673889728208x743829967850483200%2Fcat?w=512&h=276&auto=compress&dpr=1&fit=max,

I share with you how I have configured the use of dynamic image.

I want to use the URL of each dynamic image, so I tried to incorporate it into my HTML code like this, but I realized that I was getting a different URL (I don’t think I have all the information on the rescale)
url

https://s3.amazonaws.com/appforest_uf/f1673889728208x743829967850483200/cat

How can I get the correct URL (url with rescale) dynamically? I know I can copy and paste the URL, but I want to perform a dynamic process.

Thanks!

It could be one of 2 things.

  1. Put your dynamic URL value inside quotations. url("[dynamic value]")
  2. Make sure your dynamic value (your URLs) actually have “http:” or “https:” infront of the //s3…

Hi! thanks for your reply.
Yes, I did that but it didn’t work, the URL appears like this and I need to have URL with the rescale structure
resultado

This is my result: https://s3.amazonaws.com/appforest_uf/f1673889728208x743829967850483200/cat

I need this result: https://d1muf25xaso8hp.cloudfront.net/https%3A%2F%2Fs3.amazonaws.com%2Fappforest_uf%2Ff1673889728208x743829967850483200%2Fcat?w=512&h=276&auto=compress&dpr=1&fit=max

Ah, I see. I apologize for not understanding your question.

Question from me. How did you find the following Image URL:
https://d1muf25xaso8hp.cloudfront.net/https%3A%2F%2Fs3.amazonaws.com%2Fappforest_uf%2Ff1673889728208x743829967850483200%2Fcat?w=512&h=276&auto=compress&dpr=1&fit=max

I assume you used your browser’s inspect tool. My immediate thought would go to adding some Javascript. You’d need to identify the ID of the new URL. See this: HTML DOM Input Text value Property

It’s possible I’m still not completely understanding your issue. Please provide more context if you can.

No worry, Yes I used your browser’s inspect tool.
in the html I’m using only the URL with the rescale works, for that reason I need to get that type of URL

Where I should add the javascript to identify the ID of the new URL?
Thanks

Not the full solution but here’s a start: Loom | Free Screen & Video Recording Software | Loom

Code from the video:

Thanks for all the support!
How did you manage to add ID inside the img? I don’t have that property. On the other hand, you gave me a great idea: I created a script to convert the simple URL to the URL with rescale. This is an HTML component I called “clean input”.

Now the only thing I still need to understand is how “clean input” can be connected here in my main HTML.

Can you think of anything? I have tried to add it as “clean input’s url” (This url is evaluated to a text) but nothing happens.

clean input url

awaiting your comments

To expose the “ID Field” for all Bubble elements, go to Settings => General => scroll down to General appearance and check the last setting. See screenshot.

Regarding your solution, this might require you to build an internal plugin.

Oh I see! thanks for the information!

1 Like

This topic was automatically closed after 70 days. New replies are no longer allowed.