I got a huge problem, when inserting images with the media picker and resizing them in the Richtext Editor. The problem is that it often gives a black background/border.
When the image is being resized, it gets a querystrig and width + height set on the img tag.
Not resized
<img id="__mcenew" src="/media/6856/image.jpg" alt="something" rel="1433" data-id="1433" />
When resized
<img id="__mcenew" src="/media/6856/image.jpg?width=344&height=230" alt="something" width="344" height="230" data-id="1433">
Here is 3 visuel exsamples of the error occurring.
My question is. What can i do to fix it?
Addon question is: Why does all inserted images get the same id?
The problem occurs sometimes when the image is being resized.
I think its when the ratio of the image becomes dot something, instead of a whole number.
if i remove the width and height of the img tag and adjust the src paragraf width and height to a size that fit the ratio of image. Then the black border goes away.
Can you please double check the images as it looks like the border is on the images themselves as I cannot replicate this
Also I would recommend using a media picker to upload images as it is a lot more cleaner and easier for client and developer
p.s I had a client with same issue and when I asked for the image files I could see they had borders on them. A quick "crop" in Microsoft paint solved removing the borders from the image
I can confirm I get the same issue when resizing images you sometimes get black borders. The workaround as mentioned above is, remove the width and height from the src url.
Richtext Editor Media Picker Resizing Image Sometimes Gives Black Borders
Using Umbraco 7.3.5
Hello everyone!
I got a huge problem, when inserting images with the media picker and resizing them in the Richtext Editor. The problem is that it often gives a black background/border.
Here is 3 visuel exsamples of the error occurring.
My question is. What can i do to fix it?
Addon question is: Why does all inserted images get the same id?
Is there anyone with a solution or comment to the above problem?
Hi
Instead of using rich text editor why don't you go for grid. it gives you many option
Manish
Hi
I am not able to replicate this issue. Is there any specific point when black border occurs.
Manish
The problem occurs sometimes when the image is being resized. I think its when the ratio of the image becomes dot something, instead of a whole number.
if i remove the width and height of the img tag and adjust the src paragraf width and height to a size that fit the ratio of image. Then the black border goes away.
like this
Hi Bo,
Can you please double check the images as it looks like the border is on the images themselves as I cannot replicate this
Also I would recommend using a media picker to upload images as it is a lot more cleaner and easier for client and developer
p.s I had a client with same issue and when I asked for the image files I could see they had borders on them. A quick "crop" in Microsoft paint solved removing the borders from the image
Thanks
Nav
Its all double checked. No black borders on the images.
And the images is uploaded via the media picker and choosen from the media picker in the Rich Text editor.
The problem occurs when i try to resize them. But only sometimes. But enough times to make me nuts.
I can confirm I get the same issue when resizing images you sometimes get black borders. The workaround as mentioned above is, remove the width and height from the src url.
from this
to
This fixed it for me.
Hi Nawaz.
The only problem with that, is that it is not editor friendly for our customers.
What i found out is that ImageProcessor.Web Rounds Op/Down in Pixels from a float to an int. And i think thats where it goes wrong.
One got the same issue here https://github.com/JimBobSquarePants/ImageProcessor/issues/127
Another thread about it here https://our.umbraco.com/forum/umbraco-7/using-umbraco-7/53921-RTE-unwanted-borders-as-a-result-of-auto-resize-
One found a workaround here http://issues.umbraco.org/issue/U4-4736
is working on a reply...