Rich Text -> Image full size, overflow

[karl.myrvang]

Hi,

I’m having some issues with the rich text editor images. When showing the content of the rich text editor, the images expands to full size. Is it possible to have the rich images display as 100% width max? Or even set the all image width to 100%

Thank you!

[divypratap73]

I am facing the same problem , anybody here care to share any thought on this

thanks !

[rico.trevisan]

You can change the underlying “code“.

Look at the text field where you’re saving the Rich Text Element’s (RTE) output, it will have the image something like [460px path/img/url.jpg](I’m doing this from memory, apologies if it’s not exactly that.). You can change that absolute size reference — 460px — to a percentage — like 50%.

---

By the way, I was soooo frustrated by the RTE that I figured out a whole converter to handle images better than RTE.

Rich Text Element alternative — Markdown converter template, no plugins

Get it on the marketplace: Markdown converter blog Template | Bubble – $29👈 [image] This is a template that produces beautiful documentation pages using Markdown: the simple and lightweight markup language. Demo Text [CleanShot 2022-07-22 at 12.01.57] Images [CleanShot 2022-07-22 at 12.02.31] Code [CleanShot 2022-07-22 at 12.05.18] Take it for a spin → Minimalist blog template What’s included? Native Markdown engine A repeating group that auto-magically tr…

[divypratap73]

can you please elaborate how i can change size to a percentage like 50% or something
thanks !

[rico.trevisan]

I hope this example explains it.

[divypratap73]

thanks for detail explanation, but i think it would be really messy where I allow users to input any type of data in rich text editor , and for displaying this data I have to modify everything in HTML code

[rico.trevisan]

Yes, it will be too messy to ask end-users to learn bbcode.

You can, however, devise a simple regex pattern that automatically changes the size in pixels for percentage.

[divypratap73]

I finally found a way thanks to @rico.trevisan for extract with regex hint
so that’s what I did, I was saving the description first in group state before submitting it to the database and used find and replace option with regex pattern

so with this regex syntex its finding all images width greater than 600px and replacing them with 700px
and used one more find and replace option to further replace img tag without width mentioned (if user copy content and paste in RTE)

that’s how every time image size exceeds 600px in the description it will reszie it to 700px

[frankhenry]

Following @divypratap73 guide, I was able to solve the same issue for myself.

So to make the image width 100% this was my setup

I hope that helps

[lancengym]

THANK YOU for this wonderful solution!

I should add quickly for those who are looking to resize images added via the Bubble Rich Text Editor. You don’t necessarily have to use Set State like the above example.

If the image you are trying to make responsive already exists in the database (using another save button or auto-binding), then you can simply run a Make Changes to Thing within workflow to do the Find and Replace with Regex.
See below screenshot.

[yohan2]

Legend, thanks for sharing your solution, it has really helped me out.

For a simple way to add the regex find and replace, you can just apply it within the workflow when you create a new thing with the rich text editor. Like so: