Convert Bubble image URL to a .jpg URL viewable in-browser

Dear Bubble Community:

I am stumped and hoping someone can help! My problem is easy enough to explain, and am hopeful someone out there has an equally simple solution:

I need to convert image URLs stored in my Bubble app currently as .cdn.bubble.io files to .JPG URL’s, where the resulting .jpg URL will show the images in-browser when visited versus being directly downloaded when visited.

Any ideas?!

If url is not asking you to put user name password? Paste url in the browser and if it opens, notice if https: is missing or not. There could be another solution but if you prepend https: + Image.URL it should work fine… any bubble image urls should open in browser unless it’s not a viewable file in a browser. I do save the urls with https: and then use it when used outside of bubble.

Thank you for the prompt response! Unfortunately, this approach did not convert the file to a .JPG URL, which is the file format I need (without compromise) to pass the image to the next step in my workflow.

For what it’s worth, in the event someone else is reading this post and struggling with the same problem I faced, I did find a solution (although not ideal, it works):

  1. Display the database Image via ‘Image’ element
  2. Take a screenshot of said image element by referencing its ‘Element ID’ using the plugin ‘Advanced Screenshot Element’ by Digital Eye Advanced Screenshot Element Plugin | Bubble.
  3. This plugin allowed me to save the screenshot as a .JPG URL, which I was able to easily pass along to the next step in my workflow.

Can anyone think of another way to do this without needing to take a screenshot of the original image?

Thank you!

If the image stored under [appid].cdn.bubble.io/etc was a jpg when it was uploaded, then it is STILL a jpg.

You can’t just pass the image url onto the next step?

You might just be missing the https: in front of the URL sometimes Bubble seems to not put that.

Hi @tylerboodman - thanks a ton for the reply - really appreciate it. I see what you’re saying but the original file format is .webp, not .jpg unfortunately. Any additional ideas?

It can’t stay as .webp you need it in .jpg?

If so, in the field where it wants the .jpg, reference the thing’s image field, then do :processed with Imgix like this:

“It can’t stay as .webp you need it in .jpg?” - Yes, unfortunately.

So I am hopeful you’re onto something here but I’m still getting an error code related to the file format. The “new” image URL that I’m passing through after processing with Imgix added “?q=75&fm=jpg” to the end of the original image URL.

Any idea as to how to get this URL to end in .JPG ? If I could do that, and the URL actually opened to a webpage showing the image, I am confident my issue would be solved…

Totally spitballing here, @anthony6, but could you Make changes to your URL and do a find and replace w/ regex?

Find each .webp (?<=.)webp(?=\b) and replace with jpg?

@sydney22 I think you might be on to something here! Let me check it out and report back. Thank you! Much appreciated.

1 Like

You can try playing with txt=.jpg at the end. You either need to make text transparent with txt-color or position it outside of the image. Ín the latter case I’m not sure if imgix will enlarge canvas to embrace the text. If it won’t, both methods should work.

This cracked it @sydney22 ! Thank you very much!

1 Like

Thanks for the tip @vladimir.pak ! I didn’t try it out for this issue given @sydney22’s solution but will definitely keep it in mind.

1 Like

Happy to hear it all worked out for you, @anthony6!

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