When I add an image to a node via the Media Picker inside the RTE, it resizes my images to 500px wide (backend AND frontend).. Isn't it possible to turn this off?
I've already looked in Data types -> RTE, but no width is set. The height of the editor is set to 500 though, however playing around with the numbers here does not have any effect on the images (just the RTE itself).
Normally you can edit the values by going to the "Rich text editor" property editor in the "Developer->Datatypes->Richtext editor". But as mentioned it's currently missing. Hopefully it will be available in coming releases.
That issue is actually something slightly different - it's applying querystring parameters to the image to apply resizing using ImageProcessor, which is implemented, but it currently defaults to 500px width (which is far too small for a lot of modern responsive designs).
It would also be useful if you could apply a default and/or compulsory class to RTE images (I'm thinking "slimmage", for responsive image scaling), and also set it to not apply a width and height style to the image, which messes up responsive scaling.
Yes, I added this issue a while ago, as the other one was marked as fixed :)
It'd be great if someone could take a look at it, we are working on different projects that are all affected by this "bug" - it's just annoying to work with.
I just tested v 7.1.4 and unfortunately it's still not working (updated the issue too).
I found something in a RTE config js file somewhere, but editing it didn't change anything (I can try to find it again if you'd want to try it out too? :) )
var newSize = imageHelper.scaleToMaxSize(500, size.w, size.h);
It works for me, just change 500 to your desired maximum - I did have to clear the browser cache not just force refresh to pick up the new version of the file.
I also commented out the following lines just below (5106-5107), to get rid of the style which has width and height - this doesn't appear to have any side effects and then allows the images to scale to max-width while maintaining aspect ratio, but (there was bound to be a but, wasn't there?) if the image size is changed in the RTE then it adds width and height attributes (not a style), so I need to track down that bit of code and modify it too.
var s = "width: " + newSize.width + "px; height:" + newSize.height + "px;"; editor.dom.setAttrib(imgElm, 'style', s);
And finally I added an additional line to put a class on all attributes to trigger SlimResponse to convert them into correct slimmage markup:
This will undoubtedly be blatted if an editor sets a class on the image, so it's a half baked solution (as well as being hard coded at the moment), but it's a start!
Hmm - wouldn't recommend trying the slimmage trick. Slimmage (currently, at least) will only change the width parameter on the querystring, which results in images with lots of padding around them if you also add height (various other crops are available if you set the ImageProcessor parameters, but that's what you'll get from the RTE output). It'll also force all images to the maximum width your CSS permits (probably 100% of the container), which isn't always what you want. Think I'm just going to have get rid of the height and educate the editors to set the class where it's appropriate, or live without responsive scaling in RTE areas.
I understand this is an old post.. But This still seems to be the case within the Grid RTE. I'm not sure why they are different, but any image I pull from Media into Grid RTE will output like this.. WRONG
Alright, disregard I was able to get this working.. There really does seem to be some issues in here though.. I was able to get it to work fairly consistently by following these
I changed/resaved the grid settings (inside your Grid Data Type for RTE)
When sizing an image down multiple times (like an image that is 2000+ pixels), go slow.. For me it seemed like if I went too quickly on localhost it would cause strange issues.
Don't hold Shift key, aspect ratio is maintained by default.
Some combination of 2/3 seems to generate Black Padding around the image. I've read elsewhere that others have issues. It seems to only happen if you try and resize using mouse/image handle too quickly, but I don't know for sure.
Images in RTE resized to 500px width
Hi everyone
When I add an image to a node via the Media Picker inside the RTE, it resizes my images to 500px wide (backend AND frontend).. Isn't it possible to turn this off?
I've already looked in Data types -> RTE, but no width is set. The height of the editor is set to 500 though, however playing around with the numbers here does not have any effect on the images (just the RTE itself).
Have you tried setting the 'Maximum default size of inserted images' setting to a large value, like 1500? 500 might be a default fallback value?
No, where is that option located? :)
I'm running 7.1.2 btw.
Hi Signe
The option is currently missing in v7.
According to this issue http://issues.umbraco.org/issue/U4-4212 it should be fixed...however I just checked in 7.1.2 and it's not there yet.
Normally you can edit the values by going to the "Rich text editor" property editor in the "Developer->Datatypes->Richtext editor". But as mentioned it's currently missing. Hopefully it will be available in coming releases.
Hope this helps.
/Jan
Thank you Jan. Hopefully it will be fixed in the next release.
Hi Signe
Perhaps - Feel free to add a comment on the issue asking about this ;-)
Cheers, Jan
That issue is actually something slightly different - it's applying querystring parameters to the image to apply resizing using ImageProcessor, which is implemented, but it currently defaults to 500px width (which is far too small for a lot of modern responsive designs).
It would also be useful if you could apply a default and/or compulsory class to RTE images (I'm thinking "slimmage", for responsive image scaling), and also set it to not apply a width and height style to the image, which messes up responsive scaling.
There's already a relevant issue:
http://issues.umbraco.org/issue/U4-4967
No action on it as yet, though.
Yes, I added this issue a while ago, as the other one was marked as fixed :)
It'd be great if someone could take a look at it, we are working on different projects that are all affected by this "bug" - it's just annoying to work with.
I just tested v 7.1.4 and unfortunately it's still not working (updated the issue too).
Fingers crossed :)
Don't suppose you've found where that 500px is actually set? I'd hoped it might at least be in a configuration file, but it doesn't appear to be.
I found something in a RTE config js file somewhere, but editing it didn't change anything (I can try to find it again if you'd want to try it out too? :) )
If you've any recollection of what is was called I can go looking for it myself!
I think it's located in umbraco / Js / umbraco / umbraco.services.js around line 5222.
Hopefully you can make more of it than I could :)
It's line 5104 (in Umbraco 7.1.1):
var newSize = imageHelper.scaleToMaxSize(500, size.w, size.h);
It works for me, just change 500 to your desired maximum - I did have to clear the browser cache not just force refresh to pick up the new version of the file.
I also commented out the following lines just below (5106-5107), to get rid of the style which has width and height - this doesn't appear to have any side effects and then allows the images to scale to max-width while maintaining aspect ratio, but (there was bound to be a but, wasn't there?) if the image size is changed in the RTE then it adds width and height attributes (not a style), so I need to track down that bit of code and modify it too.
var s = "width: " + newSize.width + "px; height:" + newSize.height + "px;";
editor.dom.setAttrib(imgElm, 'style', s);
And finally I added an additional line to put a class on all attributes to trigger SlimResponse to convert them into correct slimmage markup:
editor.dom.setAttrib(imgElm, 'class', 'slimmage');
This will undoubtedly be blatted if an editor sets a class on the image, so it's a half baked solution (as well as being hard coded at the moment), but it's a start!
Hmm - wouldn't recommend trying the slimmage trick. Slimmage (currently, at least) will only change the width parameter on the querystring, which results in images with lots of padding around them if you also add height (various other crops are available if you set the ImageProcessor parameters, but that's what you'll get from the RTE output). It'll also force all images to the maximum width your CSS permits (probably 100% of the container), which isn't always what you want. Think I'm just going to have get rid of the height and educate the editors to set the class where it's appropriate, or live without responsive scaling in RTE areas.
I understand this is an old post.. But This still seems to be the case within the Grid RTE. I'm not sure why they are different, but any image I pull from Media into Grid RTE will output like this.. WRONG
Arbitrary values above, but the main point is that the grid RTE is not adding the width/height as query strings in the SRC. aka RIGHT
Having a hard time hunting it down as well.. Anyone experience this? The grid RTE seems like a stubborn beast.
Alright, disregard I was able to get this working.. There really does seem to be some issues in here though.. I was able to get it to work fairly consistently by following these
Some combination of 2/3 seems to generate Black Padding around the image. I've read elsewhere that others have issues. It seems to only happen if you try and resize using mouse/image handle too quickly, but I don't know for sure.
Hope that helps someone. Cheers.
is working on a reply...