How to dIsplay rich text with pictures

Hi,

I have tried to find it on the forums, in documentation, but I have not been succesfull.
It is probably beginner question and may be I will feel a bit embarrassed after simple and obvious answer strikes back :wink: So please be patient with a beginner :slightly_smiling_face:

  • I have used a rich text input for getting a text with formatting and pictures.
  • The text is saved in the database
  • I can retrive it via Rich Text input again, but
    • I am not able to hide rich text input toolbar and
    • I am not able to make the element getting bigger if the text is longer …
  • In case I use Text element
    • I can get nice text with formatting but pictures are not displayed

What is the right way of doing that?
Thanks a lot.

Lada

@lada.hanzlicek we were all beginners once.

You may find this thread helpful. Take a look through that first and let me know if that clarifies the questions you have.

Keep in mind, if you have a text element that use BBCode, it may not stretch to the appropriate size automatically. (Try drawing a really large (400x400px) text input on the page and see if the images appear).

Thank you, I will check it out.
May be I should clarified, that I am inserting pictures via clipboard. These are stored in the database using BASE64 encoding.
But I will check the resources you gave me first.
Thank you!

If you’re using BASE64 encoding, that may be part of the issue. Rich text inputs/display relies on BBCode. In turn, BBCode displays hosted image files (based on a URL, not a text values).

If you were to draw an image element on the page, you could drop the encoded value in there and it would display (though I’m not sure that it would properly pick up on the image height and width.

Thank you, it is great explanation and very nice example of how to deal with RTE and images. I think I can build on this to make it working. Thank you.

May be just for clarification - I have not chosen BASE64 encoding for pictures.

It is default behaviour of Rich Text Element when you PASTE a picture in the element (which is possible).
In different post I have found interesting possibility of drag and drop a picture, that is currently on my page into the Rich Text Element - that could be pretty useful.
In such a case (using PASTE or Drag and Drop) this the picture is stored in the database like this:

Unfortunately I don’t know how to display it properly.
It can be displayed in the Rich text input, but I cannot configure it so that the toolbars are not visible and so that the element will stretch to fit the text.

In case anybody knows how to use it please let me know.
But thanks dan1, you showed me how to make it work in different way.

I take it you’re not using Bubble’s rich text element but one of the third-party ones. Given that, it may be worth reaching out to the developer to see if they’ll consider modifying it or showing a workaround.

Another idea - have you tried using a multiline input to display the content? (And changing the element to not be clickable)? Likely not going to solve the core issue, but worth a quick try.

Actually I use bubble RTE. I should have mentioned it in my description.
I will also try the multiline, thank you for a hint.

I was also thinking about ZeroQuode RTE, but:

  • I am not able to justify those $80
  • I have not seen a button for image insertion on their demopage, but I beleive it is working with images.
    On the other hand there is a mode of non input + no tools…

Have you tried Zeroquode’s forums? They tend to have a bit more documentation there. (Or may post an answer if you pose the question there…)

So I have tried the Multiline and it is not an option.

  • Even if I check “Stretch to fit content” it stays within the size of repeating group.
  • In case I disable input, it is not possible to scroll inside the element
    So it can’t be used for this purpose.

In case somebody wants to use Rich Text Plugin from Bubble and insert pictures, it is necessary to insert links of those pictures, even if you can paste a picture inside the element.
Otherwise you cannot display it using text element with those pictures.

Am I the only one who wants to use this feature and is a bit disappointed with it?
So I will try the ZeroQuode one in the end.

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