Responsive imgs in rich editor

Hey @NigelG & @emmanuel. First. Thanks for your time. I need some help. Im using rich editor to add some texts with images . The imgs in big resolutions are ok but in mobile arent.

Desktop resolution

Mobile

Thank you

Why are you using rich text editor?

You can add a text element and then make an image element below the text element. That way, you achieve the desired effect, but you have control over the responsive behavior of each element (and other benefits).

@skylershelton Thanks for your anwser. Im using rich text editor because not always the structure of that content is text + image. Its up to the user. The field is open, like a blog post.

1 Like

Have you tried setting master CSS styles in the Bubble Settings dashboard? You may be able to hunt down the specific class or id Bubble assigns to images within rich text and create your own mobile styles using media queries.

@philip Where in the settings can I do that? I didnt see it. Is it adding a custom hosted css file in the scripts header?

This is found under SEO & Metatags

It might not be the answer to your problem but I have managed to change quite a few Bubble core styles with this method.

2 Likes

I mean you could do that too I guess, although unless you are knowledgeable about how this works, I would recommend against it.

If it’s optional for a user, use an image upload element and then use an image element that displays the user uploaded image.

Rich text editor’s primary purpose is to edit text - I’d personally be wary about relying on it, or for that matter, any other element used out of context - for production usage.

Either way, good luck on your design, and if you do figure out how to make images within rich text editor to behave responsively, make sure to update the thread! :slight_smile:

1 Like

Thanks for your help @philip and @skylershelton. It was like Philip Said, a litlle hardcoded solution but it works. Check out.

Rich editor with responsive imgs.
http://patrocinioscolombia.com/version-test/evento/1484566023900x741147800632295400?debug_mode=true

I will review the UX, probably works too to have sopmething like a gallery.

Thanks for your time!

6 Likes

@skylershelton @julian

In one of of my apps we have a multimedia ‘thing’ in the database. Let’s call it a multimedia block. This block has several types of data possible within the one thing (text, images, videos, geographic locations, metadata, etc). I then built a page view that gives a user control of a repeating group of the multimedia block elements allowing people to create their own repeating list of content organized their way.

So it goes:

Block 1 contains text
Block 2 contains a single image
Block 3 contains a single file
Block 4 contains text
Block 5 contains a list of videos
Block 6 contains text

Say you want to write a new blog article:

A blog article using this method is actually a single repeating list of Blocks each with a type of data assigned to it:

Block 2 - Cover image
Block 6 - Text
Block 5 - Video embeds in slider format
Block 4 - Text
Block 1 - Text
Block 3 - Link to file at end of article

When a user goes to create a new blog they just drag and drop these pieces together in a repeating list and ta-da! You’ve just created a super simple article creation editor+viewer tool.

2 Likes

@philip That’s quite clever, I’m impressed!

Looks good @julian :smiley:

2 Likes

That´s pretty nice. I will work in something similar. It’s a very good solution.

1 Like

Thanks guys! I’m quite proud of the resulting UX. With Bubble’s powerful conditional statements, I’ve only had to create a single reusable repeating group that can handle 9 different types of content (instead of creating 9 different repeating lists with 1 type of content each). Much faster development for myself and content creators in the app. Win-win!

2 Likes

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