Flexible image layouts inside a template rich text element

Design help CMS
1

Howdy! N00b here—I’m designing my first Webflow site, a design portfolio. Very impressed with the designer functionality for the overall layout, but for project template pages, I’m feeling let down by the WF CMS as compared with Wordpress’ flexibility/functionality, and I’m wondering if there’s something I’m missing. I want to create an RTE that supports various layouts with text and image interspersed according to what best suits it, in any permutation, like so:

01%20PM
01%20PM1122×980 4.01 KB

The full-width images are no problem, of course, and I’ve edited my text styles with nested selectors. Though I’d rather do it with a class so I could edit globally, the narrow images can be adjusted with the percentage setting in the editor. But I’m stuck on the side-by-side images. I tried floating them left and right with percentages set to 50% or less, but I can’t control the gutter width like I do elsewhere on grids/flexboxes. So:

• Is there a way to reference a class within the RTE to handle the side-by-side images? In Wordpress, I’d wrap this sort of thing in a custom div in the HTML editor.

• If not, is it possible to modify one of the basic RTE image layout options with custom CSS to get the result I want? That seems sketchy…

• Open to other suggestions/workarounds.

As I’ve lurked on the forums, these are the solutions I’ve seen that won’t work for me:

Make the template uniform (e.g. always have a description at the top, followed by an image gallery with however many pictures, each one with its own collection field). But I want to have the flexibility to have both simple one-paragraph project descriptions and longer case study-style posts with multiple paragraphs between images, and I would rather keep the main content together in one RTE.

Create a bunch of divs/classes with the particular grids/flexbox elements you need, and then show or hide with switches and conditional visibility as needed. But I can’t anticipate where in my content those classes would appear, so I’d have to create dozens of conditional collection fields, which is hackish and unsustainable.

1 Like
2

…Bueller? Bueller? Bueller?

Anyone have thoughts on this?

1 Like
3

You can use the data attribute on an element inside of a RTE. You can then add custom css to style the element in a custom code block or you can use javascript to add a class to elements that have the right data-name value pair.

4

Hello @reindeer,

I don’t know if I am understanding you question correctly but it seems that you want to create a cms collection with multiple layouts? if that is the case you can do that, here is a tutorial on how it is done Stream highlight: Creating multiple layouts for Webflow collection template pages - YouTube I hope it helps.

5

@webdev, thanks for your response. Does targeting elements with data attributes work when they’re in a dynamic RTE? And are you adding the data attributes to an element in an unbound RTE so that they’ll apply to that element’s entire class, or are you somehow wrapping the individual CMS image in the actual editor in such a way that the CSS or JS can interpret it and change the style for the specific image? I haven’t yet had cause to use the data attributes, so any examples or resources you can provide are much appreciated.

@Pablo_Cortes, thanks! Haven’t been on Webflow long, but have already gleaned a lot from your other videos. This one isn’t quite what I’m looking for, though. Your example blog has variations on a header image that’s positioned at the same place of every blog post, while I’m looking to apply styles to elements that could occur anywhere in the body of my project description—a templated solution won’t work for me.

1 Like
6

I see what you are saying now @reindeer. If you get to do what you want on webflow please share it with the community, it seems like something that could bring a lot of flexibility to the CMS.

7

Unfortunately not. However I had to craft a solution for a client using targeting dynamic RTE’s in a similar manner. It’s not an issue to add classes to elements, wrap elements and the like. The issue is figuring out how to target them in the RTE so a script can do its magic. Take a look at this blog post for ideas.

8

@webdev Thanks, great article. After reading that and doing some more poking around, I can think of two ways to target my side-by-side images in the dynamic RTE:

  1. Hijack Webflow’s float classes when they’re in my RTE class and use CSS math to get the exact gap size I want. Downside: I can never use the floats normally, but I’m not sure I’d need them anyway. —or—

  2. Target images with a particular alt text (maybe put a class name at the end of a regular alt text to target). Downside: questionable accessibility, but having your screen reader tell you a class name isn’t the end of the world.

Based on your experience, which do you think is preferable? I was thinking the first one.

9

@Pablo_Cortes @webdev Option 1 seems to be working for me. I know there’s more than one way to pluck a buzzard, so if there’s a better way or you have other thoughts, let me know.

For anyone interested in the same effect, this is what I did. Replace “project-description-rte” with the name of your dynamic RTE class (so you don’t affect all RTE’s site-wide) and the “4px” with a value equal to half of your desired gutter width.

<style>

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

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

</style>

Voila!

29%20PM
29%20PM1035×1264 398 KB

Also, Cat Ipsum - A Furrier Lorem Ipsum and http://placekitten.com/ for cat placeholder fun. :smile_cat:

6 Likes
10

That looks great @reindeer, thanks for sharing!

11

Five years later… native Webflow still doesn’t support adding classes to dynamic RTE elements but here’s a free plugin that does exactly what OP is doing manually.