Hacking Image Sizes in the Rich Text Editor

Design help General
1

Has anyone found a way to scale images beyond the width of rich text editor? I like the width of the text body I’ve got. But I wish I had more control over which images fit to the width of that container, and which images can expand beyond the width of that container.

I guess I could make custom code to give images negative margin but that feels kind of messy?

Any ideas are much appreciated

Here’s a screen shot.

image
image1982×1224 126 KB

2

Hi @WillWill, thanks for the post, it would help to see an example of the post, while it is not possible to adjust the image size like shown in your diagram using the built in image sizing in the Rich Text, there may be other ways to pull off the effect through structure of the page, styling of the rich text block or using some custom css.

Here is how to share the project read only link: Share a read-only link | Webflow University

If you can let us know what page the layout is on, that will help.

3

Oh sure @cyberdave here’s the read only link

Check out the case study template page, specifically The Players' Tribune

I have the content set in CSS Grid. So the ideal solution would be to give figures in the Rich Text Editor class a grid-column: 1 / span 6; But that didn’t work. :upside_down_face:

4

I’ll be doing this (haven’t tried but can’t see why it shouldn’t work) by making the paragraphs and headings 80% width. That way the images appear to be bigger. So set the width of the RTE to whatever you want the images to be…

2 Likes
5

If anyone is still trying to figure out how to do this, this YouTube video explains it: How to Webflow: Styling Rich Text Elements for Webflow CMS template pages - Tutorial (2019) - YouTube

6

I have the same question and couldn’t find an answer here, so I figured out a way myself.

For my blog I have a fixed width of 680px, so I added custom code to the Blog Template page to override the full-width css.

.w-richtext-align-fullwidth {
width: 150% !important;
margin-left: -170px !important;
}

@media screen and (max-width: 1040px) {
.w-richtext-align-fullwidth {
width: 100% !important;
margin-left: auto !important;
}
}

150% of 680px = 1020px and to move the image back to the center I use -170px margin left.

Whenever I want an image with more width, I choose the “full width” option inside the CMS editor.

See example: Writing is Not Your Bottleneck in Audience Building. This is - Kevon Cheung

It is a hack but at least it works.

UPDATE: I found out once you update the CMS the image will be affected, and to fix it, you have to click non-fullwidth then full-width again. Not sure why that happens. So I temp remove it from my own blog.

Hope this helps.

7

This can be easily fixed with custom CSS. Paste the code in an embed or in the head tag.

<style>

/* Make RTE images full width size */

.w-richtext figure > div:first-child { position: relative; width: 100%; max-width: 100%; }
.w-richtext figure.w-richtext-align-fullwidth { position: relative; width: 100% !important; max-width: 100% !important; }

</style>```
3 Likes