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!
I am facing the same problem , anybody here care to share any thought on this
thanks !
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.
can you please elaborate how i can change size to a percentage like 50% or something
thanks !
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
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.
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
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
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.
