Adjust size of images when displaying from rich text

Need help Plugins
1

Using the Bubble RTE plugin.

I’m displaying the input from the RTE in a normal text element.

The problem is if users upload a large image size it expands beyond the size of the text element and group on my page.

Is it possible to prevent images from doing this?

Capture1
Capture1860×625 471 KB

I want it to stay contained within the group which you can see on the bottom left hand side.

1 Like
2

I am facing same issue. Please let me know if it got resolved.

3

I currently use the paid plugin Text Editor BDK to display rich content and html. It works well.

I’ve tried the Zeroqode rich text editor and the new Bubble rich text editor and both give me issues.

Btw before you try different plugins make sure you don’t have any overlapping groups.

4

I found a solid way of showing 100% wide images in a text element (which pulls rich text, including images, stored in a text field). You need to do this as you save the rich text.

For my process, I Save the Bubble Rich Text’s input and use this :find&replace (with regex) as I save it. The text element then shows the image, no matter what size of the source image and the group, at 100% of the available width

image
image1360×725 42.3 KB

From ChatGPT:
You can use a regex with capturing groups to match any width value. For example, if your tags are in the format [img width=NUMBER], you can use this regex:

  • Find: (\[img width=)\d+(\])
  • Replace with: $1100%$2

Explanation:

  • (\[img width=) captures the opening part [img width=
  • \d+ matches one or more digits (the variable width)
  • (\]) captures the closing bracket ]

The replacement string uses the first capture group ($1), then inserts 100%, and finally adds the second capture group ($2), resulting in [img width=100%] for every match.

Adjust this regex if your image tag structure varies.