Flex layout for Images inside CMS Rich Text Element

Hello everyone! Happy 2022!

I’m creating a photography & travel blog so I have multiple posts and photographs play a big role. I’m creating each blog post under the same CMS collection and I’m using Rich Text for the content ofc, BUT because photographs are very important and have many of them on each post, I need to display them on grids or flexbox and not each photo below the other one…

Problem is the Rich Text only allows to insert a photo but not style it… so my question is, how can I do it?

I need to achieve the same look of this post: https://viajerosaladeriva.com/2021/07/18/guia-de-10-dias-norte-argentino/

or see image below

Hope somebody can help me please!

Hello @Quitos, can you share your read only link? that way I can see what type of set up you have.

Hey Pablo,

I made it work by adding this css script:

<style>

.w-richtext figure.w-richtext-align-floatleft {
margin-right: 0px;
width: calc(50% - 4px);
}

.w-richtext figure.w-richtext-align-floatright {
margin-left: 0px;
width: calc(50% - 4px);
}

</style>

Now I encountered a second issue - If I try to add text below two images which are set side by side with this css custom code, the text will put on a side (when writing but not on published) instead of below… so it’s very frustating.

Can’t add TEST TEST TEST TEST text below image… can’t add a new paragraph… so I had to create another Rich Text element as a plan B but I don’t want to do this…

Here’s the read only link Webflow - Viajeros A La Deriva

Hello @Quitos, so I think you don’t actually need to add that custom styling, you just have to style your RTElement, it is a little tricky but here is a tutorial on how to do it How to Webflow: Styling Rich Text Elements for Webflow CMS template pages - Tutorial (2019) - YouTube. In the tutorial you will see how to style your RTElements including the images used on your collections. I hope this helps.

Oh great video! Now the thing is how can I put two figures element next to each other…?


I need both photos to be next to each other…

Hey @Quitos, I don’t think you will be able to display your images next to each other inside a RTE. What you can do is to create a grid with images from the collection to be displayed between the content.

Hey Pablo, thanks for your reply.

Unfortunately it looks like it’s not possible to do so. Very disappointing.

I’ve already tried doing what you suggested but it’s too messy. I have 10s of blog posts with different length and structures. I might end up using individual pages for each blog post OR just have each image below each other…

I ran into a similar problem. Then I discovered that you can style rich text elements that are not connected to a collection list. So, set styles within the RTE (such as all paragraphs) before connecting to collection list (if already connected, disconnect, style, and reconnect).

Yes, I tried that but each image is inside a Figure element so I cannot make them side by side. (see screenshot I posted above a few days ago)

You can always use custom HTML and CSS inside a RTF embed code element.

@webdev Hi, thanks for your reply. As I mentioned above (or see quoted message) I managed to put each photo side by side using some custom css, but then on the CMS I couldn’t continue writing below the images because for the css cc to work I had to set images to “align-left” and “align-right” from the RTE image options. So everything was a mess… (see TES TEST TEST text on the screenshot…).

Does anyone has a better custom code ideas that might work? I’ve read ALL Forum posts of people that had the same issue but there is NOT one solution. I hope Webflow sees this and add a native solution…

UPDATED Readable Link: Webflow - Viajeros A La Deriva