Can rich text image in cms default to full-size?

I’d like my blog to have full-width images and smaller widths for text.

However every time I upload an image for the blog, it always defaults to a half-value and not taking the full-width. Is it possible to change this? I tried adding 100% width classes to the rich text images but it’s not working when I upload a new image.

Hi,

What do you mean?
When you add an image in the Rich text field in CMS, if you select this option
Screenshot_6
the image automatically takes the whole width of the rich text element.

see how in your screenshot the 2nd option is selected? When I upload an image it defaults to the 1st option on the left, which doesn’t apply a full width size.

Is there a way to control this?

Yes the default is the first option, but if you select the second one as in the screenshot it will take the full width.

yeah, that’s my pain. I wanted the full-width option to be my default value.

@MikeMiello - This is trivial to solve with a little custom code. The code example below assumes you only want to do this to rich text elements that have been assigned a class of “rtf” as indicated in the jQuery selector. It looks for any figure elements with a class of w-richtext-align-center which Webflow applies to figures in rich text elements by default. It then removes that class and adds the w-richtext-align-fullwidth class to each found element. This last class is what WF assigns to the image when you choose the full width icon.

Since the code I provide below depends on jQuery, you must load it into the document > Before Body Close custom code area on your CMS template.

<script>	
$(document).ready(function() {
	$(".rtf figure.w-richtext-align-center").each(function(){
		$(this).removeClass("w-richtext-align-center")
       .addClass("w-richtext-align-fullwidth");
	});
});
</script> 

If you had a different class assigned other than rtf on the RTE you would modify the selector on line two of the code. If you wanted to affect all rich text fields on the template you could replace the .rtf with .w-richtext (the default class WF ads to a RTE component).

Enjoy. I am off to celebrate Cinco de Mayo with my friend Patrón

1 Like

Thanks @webdev for the solution and pointing me in the right direction! This worked for me by removing .rtf class.

Because you showed me how to look at the code, I noticed that the figure is set to a max-width: 60%. If I bumped this up to 100%, I get the full-width effect I was going for.

.w-richtext figure { position: relative; max-width: 100%; }

Just to keep learning, is one way better than another?

Enjoy those margaritas!! Thanks for the help

1 Like

If you change the the WF default values for elements in CSS, you may run into issues where formatting the defaults leads to undesired results. I have seen plenty of forum posts where that was the issue. My preference is to override with an element class that I add, thus the “.rtf” class in my example.

2 Likes

great tip, thx u brother! :beers:

Thanks for asking this question!

I’m trying to get my rich text images to default to 100% width, too. But I wasn’t sure where exactly to place the following additional line of code, @MikeMiello. (I really know nothing about code. :grimacing:)

.w-richtext figure { position: relative; max-width: 100%; }

Could you share with me the entire setup of the code that was added to your project? Thanks in advance!

Hi KP,

So I used different classes and so I don’t have something that will just automatically work.

Do you know how to use Inspect Element with Chrome browser? This will help you find the various classes you need to manipulate. And once you do, you just need to insert those in the code that @webdev mentions.

Thanks Mike!

I did use the inspect element panel within Chrome, and was able to locate the line that needs to be adjusted, but I know so little about code, I have no idea where to actually put the information in the code, or how to format it. :confused:

Seems to me like there’s a bug with the CMS. If I select an image, set the option to center the image with exact width (1st option) and then to 100% width (2nd option) and save. The image results in being full size after.

Hi @webdev Jeff, I used your code and it works perfectly… but only for images with a resolution bigger than the container that contains the rich text. My rich text wrapper is 960 px (container 1280px - sidebar 25% ), when published thanks to your code all figures take full width and so do large images. But images with a width less than 960px, don’t take 100% of their parent despite the fact that I styled them to do so (you can see the style on Style Guide page). I don’t want to manually adjust the width as we have 800 blog posts and it’s a migration from other platform. I’d be so happy to hear that there is a solution to make all that images to take full with of figure automatically.

Here is my read-only link https://preview.webflow.com/preview/silverhawkwebsite?utm_medium=preview_link&utm_source=designer&utm_content=silverhawkwebsite&preview=7ea8868301e6c50db5841b48035518fd&pageId=60df2a5d8d8a373961fcf743&itemId=60f30c0aae20df9b4c9b0d6d&workflow=preview

Use the following 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>

Hey!

I was trying everything in this thread without any luck.
But, the stupidest thing worked for me:

Figure min width 100%
Image inside the figure min width 100%

Haha worked!

Wait, it almost worked. I think it made the images as large as their original size.