Inserting images into richtext editor always scales the image to the maximum width
Hi I'm trying to insert an image into the standard richtext editor but every time that I insert the image it upscaled to fit the width of the editor (in my case 700px). The image that I'm inserting is 220px by 170px. But as soon as I click insert it maximises to full screen.
I've tried amended the default image size in the editors settings but this makes no difference.
Does anyone have any ideas?
This is what Inspect Element in Chrome tells me:
Type: PNG Image
Size: Unknown (not cached)
Dimensions: 220px x 170px (scaled to 700px x 541px)
The image is being scaled regardless of what browser I use (tried IE8,9, Chrome, Opera and Firefox). The image is deffo only 220px wide and in the RTE I've set the default image size as 220px but it still blows it up!
Can you maybe try taking a screencast of the issue at something like screenr.com ? I guess what you described is pretty self explanatory but I wonder if anything will ring a bell if we can see it happen
Apologies for the delay in getting back to you, I blame the weekend interrupting!
Sadly I can't use screencast as it's blocked by my internal network security (all of these files are on my works machine). It does appear to be something occurring with the css. When I attach the CSS to the Richtext Editor is when the problem occurs, unfortunately this css has been supplied by an external designer and it's massive! It seems that there's something in the CSS that's overriding any setting that I enter through Umbraco. Also when I allow certain styling elements to be accessible through the editor ie. Available on the dropdown, its just ignoring the selection and bouncing back to the default 'styles' selection......
Interesting! So, you can try to see which CSS rule is affecting the image using your inspector. You just need to inspect outside TinyMCE then drill into it and find your image inside the iframe.
Alternatively, it might be a better idea to use a separate stylesheet just for the editor. I typically create an editor.css with some basic styles to match the look/feel of the site. Usually I think its overkill to try to re-use the front-end's CSS file, as things like page backgrounds usually just get in the way.
Inserting images into richtext editor always scales the image to the maximum width
Hi I'm trying to insert an image into the standard richtext editor but every time that I insert the image it upscaled to fit the width of the editor (in my case 700px). The image that I'm inserting is 220px by 170px. But as soon as I click insert it maximises to full screen.
I've tried amended the default image size in the editors settings but this makes no difference.
Does anyone have any ideas?
This is what Inspect Element in Chrome tells me:
Type: PNG Image
Size: Unknown (not cached)
Dimensions: 220px x 170px (scaled to 700px x 541px)
I don't understand why it's scaling the image up!
Thanks in advance,
Craig
Hi Craig,
Sounds strange, the RTE automatically downsizes images to fit a max width you set in the options, but I've never heard of it automatically upscaling.
What version of Umbraco, browser, etc are you using? I'll see if I can reproduce here.
-Tom
Hi Tom,
It's umbraco 4.9.0. I still trying to solve (well randomly pressing different things!), any help is much appreciated :)
Craig
Hmm, no luck reproducing here. What browser? What do you have your max width set to in the RTE properties?'
Are you sure the image isn't in fact that big?
-Tom
Hi again Tom.
The image is being scaled regardless of what browser I use (tried IE8,9, Chrome, Opera and Firefox). The image is deffo only 220px wide and in the RTE I've set the default image size as 220px but it still blows it up!
Craigy
Very strange! Running out of ideas :)
Can you reproduce this with other images?
Can you maybe try taking a screencast of the issue at something like screenr.com ? I guess what you described is pretty self explanatory but I wonder if anything will ring a bell if we can see it happen
-Tom
Hi Tom,
Apologies for the delay in getting back to you, I blame the weekend interrupting!
Sadly I can't use screencast as it's blocked by my internal network security (all of these files are on my works machine). It does appear to be something occurring with the css. When I attach the CSS to the Richtext Editor is when the problem occurs, unfortunately this css has been supplied by an external designer and it's massive! It seems that there's something in the CSS that's overriding any setting that I enter through Umbraco. Also when I allow certain styling elements to be accessible through the editor ie. Available on the dropdown, its just ignoring the selection and bouncing back to the default 'styles' selection......
Have you seen anything like this before?
Thanks for your time and assistance once again
Craig
Hi Craig,
Interesting! So, you can try to see which CSS rule is affecting the image using your inspector. You just need to inspect outside TinyMCE then drill into it and find your image inside the iframe.
Alternatively, it might be a better idea to use a separate stylesheet just for the editor. I typically create an editor.css with some basic styles to match the look/feel of the site. Usually I think its overkill to try to re-use the front-end's CSS file, as things like page backgrounds usually just get in the way.
-Tom
hi ,
Is there any way to align image and text in Rich Text Editor like in images below...
Thanks in Advance...
Urvish
is working on a reply...