Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Bo Jacobsen 154 posts 882 karma points
    Apr 21, 2016 @ 12:34
    Bo Jacobsen
    0

    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.

    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. 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?

  • Kristoffer Eriksen 169 posts 388 karma points
    May 12, 2016 @ 10:11
    Kristoffer Eriksen
    0

    Is there anyone with a solution or comment to the above problem?

  • Manish 372 posts 905 karma points
    May 12, 2016 @ 10:18
    Manish
    0

    Hi

    Instead of using rich text editor why don't you go for grid. it gives you many option

    Manish

  • Manish 372 posts 905 karma points
    May 12, 2016 @ 10:24
    Manish
    0

    Hi

    I am not able to replicate this issue. Is there any specific point when black border occurs.

    Manish

  • Bo Jacobsen 154 posts 882 karma points
    May 13, 2016 @ 12:22
    Bo Jacobsen
    0

    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

    From:
    <img id="__mcenew" src="/media/6856/image.jpg?width=344&height=230" alt="something" width="344" height="230" data-id="1433">
    
    To:
    <img id="__mcenew" src="/media/6856/image.jpg?width=340&height=230" alt="something"  data-id="1433">
    
  • Naveed Ali 92 posts 234 karma points
    May 12, 2016 @ 12:20
    Naveed Ali
    0

    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

  • Bo Jacobsen 154 posts 882 karma points
    May 13, 2016 @ 12:25
    Bo Jacobsen
    0

    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.

  • Nawaz 18 posts 71 karma points
    Jun 12, 2018 @ 11:36
    Nawaz
    0

    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

    <img src="/media/2124/group.jpg?width=120&amp;height=174" alt="" width="120" height="174" data-udi="umb://media/e25688" />
    

    to

    <img src="/media/2124/group.jpg" alt="" width="120" height="174" data-udi="umb://media/e25688" />
    

    This fixed it for me.

  • Bo Jacobsen 154 posts 882 karma points
    1 week ago
    Bo Jacobsen
    0

    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

Please Sign in or register to post replies

Write your reply to:

Draft