Streaming live at 10am (PST)

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

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: