Flex layout for Images inside CMS Rich Text Element

Design help General
1

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

Screen Shot 2022-01-11 at 20.39.47
Screen Shot 2022-01-11 at 20.39.47978×1294 135 KB

Hope somebody can help me please!

2

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

3

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.

Screen Shot 2022-01-15 at 19.21.46
Screen Shot 2022-01-15 at 19.21.461782×1022 133 KB

Screen Shot 2022-01-15 at 19.22.03
Screen Shot 2022-01-15 at 19.22.031752×662 62.6 KB

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 https://preview.webflow.com/preview/viajeros-a-la-deriva?utm_medium=preview_link&utm_source=designer&utm_content=viajeros-a-la-deriva&preview=1b2e83f1d06dfe09036ab9d3109380ce&pageId=61db048cc4621688bb2702f4&itemId=61e346ec0e1bc4cfaaed081d&workflow=preview

4

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.

5

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

Screen Shot 2022-01-18 at 12.48.54
Screen Shot 2022-01-18 at 12.48.541920×800 85.1 KB

I need both photos to be next to each other…

6

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.

7

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…

8

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).

9

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)

10

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

11

@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…

12

UPDATED Readable Link: https://preview.webflow.com/preview/viajeros-a-la-deriva?utm_medium=preview_link&utm_source=designer&utm_content=viajeros-a-la-deriva&preview=c0613a84f716b2534955ebd50a0369f3&workflow=preview

13

Hey there. This appears to be a fairly dead topic, but I was able to find a marginal solution to what you (and a client of mine) are wanting. If you add the following custom code to your site (includes a 960 breakpoint)…

  @media only screen and (min-width: 960px) {
  figure.w-richtext-align-floatleft, figure.w-richtext-align-floatright {max-width: 48%;}
figure.w-richtext-align-floatleft + figure.w-richtext-align-floatright {float: none; display: inline-block;}
  } /* end min-width: 960px */

…then whenever you have a float-left image immediately followed by a float-right image, the two should appear side by side in the published site (just not in the editor/Designer).

14

Thank you so much for this!

What exactly is the second line of CSS doing with the + symbol? I’m a front-end designer and haven’t encountered it before. Again, thank you!

15

That operator forces the second element to immediately follow the first element.