Streaming live at 10am (PST)

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.