Copied to clipboard

Flag this post as spam?

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


  • Roel Snetselaar 151 posts 305 karma points
    Jun 23, 2014 @ 23:02
    Roel Snetselaar
    0

    RTE - unwanted 'borders' as a result of auto resize

    I'm running into a quite annoying issue when my customer started using images in the RTE.

    After publishing, unwanted black 'borders' are added. I assume, as a result of the auto resize within the RTE.

    Umbraco version: 7.1.1

    Just after adding an image it looks like this:

    looks fine

    After reloading the page, it looks like this:

    unwanted border

    And also in the frontend it looks like this:

    enter image description here

    I did some searching and I ran into this: https://gist.github.com/bjawnie/e59b98b20f6d680c4151 Except when I try to modify the file I don't see my changes getting reflected. I did touch the web.config, so the application is restarted.

    and I ran into this unsolved issue: http://issues.umbraco.org/issue/U4-4729

    Currently I unfortunately don't have a solution for this issue. Anyone else ran into this problem? How did you solve it? / work around it?

  • Lucas Chasteen 24 posts 92 karma points
    Jun 23, 2014 @ 23:17
    Lucas Chasteen
    2

    To have the changes in \Umbraco\Js\umbraco.services.js you'll need to increment your Client Dependency version in /config/clientdependency.config, then restart the app, you should then see your changes.

  • Roel Snetselaar 151 posts 305 karma points
    Jun 23, 2014 @ 23:32
    Roel Snetselaar
    0

    Thanks Lucas! I didn't know about incrementing the Client Dependency version. That seems to work as far as changing the umbraco.services.js

  • Roel Snetselaar 151 posts 305 karma points
    Jul 09, 2014 @ 22:29
    Roel Snetselaar
    0

    I did some more digging, definately seems like a bug to me. (Will file an issue on issues.umbraco.org)

    Also discussed this with James (Imageprocessor) South.

    Seems like a round issue in the javascript.

    Also I found out, width as well as height is used for resizing. While when using only width, the height is determined automatically by Imageprocessor while preserving the aspect ratio.

    More information: http://imageprocessor.org/imageprocessor-web/resize.html

    For now I made a workaround by adding &bgcolor in the querystring within these files:

    umbraco\js\umbraco.controllers.js

    umbraco\js\umbraco.services.js

    I've been testing this in 7.1.1 as well as in a clean 7.1.4 install and an upgraded 7.1.1 install to 7.1.4. The issue still seems to be there in 7.1.4.

  • James Jackson-South 489 posts 1742 karma points c-trib
    Aug 05, 2014 @ 17:26
    James Jackson-South
    1

    I've actually released an update to ImageProcessor (v1.9.5) on Nuget that should ensure this does not happen again by always rounding up not down when parsing floats.

    https://www.nuget.org/packages/ImageProcessor/

  • Roel Snetselaar 151 posts 305 karma points
    Aug 05, 2014 @ 17:56
    Roel Snetselaar
    0

    Nice one James! And I didn't even file an issue in the Umbraco issuetracker yet :)

    How are ImageProcessor updates streamed into the Umbraco core currently?

  • James Jackson-South 489 posts 1742 karma points c-trib
    Aug 05, 2014 @ 18:33
    James Jackson-South
    1

    They're not really.

    The guys grab the latest they can I think on Nuget install but it's limited to max out on v2 just now. I shall negotiate to change when I'm ready to release that. :)

  • Joel Hansen 38 posts 96 karma points
    Sep 21, 2014 @ 20:52
    Joel Hansen
    0

     

    Hi,

    I'm having the same problem, but it seems I'd need another solution.

    The resulting image is right here. As you can see in the right-hand side, there is a thin black padding.

     

    The image URL querystring looks like this: ?width=500&height=239.72602739726029

    If I change the height to 240, then the problem is solved. But the problem is that the image is inserted by the client directly into the TinyMCE, so I can't control the querystring.

    I'm running Umbraco 7.1.5, and I have manually updated the project with the latest ImageProcessor NuGet packages. The ImageProcessor version is 2.0.0.0.

    A possible solution could also be to set the Transparent parameter to False by default, but I can't figure out how to do that. I have tried a number of things in the /config/imageprocessor/processing.config file, but to no avail. I hope you're able to help!

    Kind regards

    Joel

  • James Jackson-South 489 posts 1742 karma points c-trib
    Sep 21, 2014 @ 23:24
    James Jackson-South
    0

    Hi Joel,

    I'll have another look. Can you post the original image without any resizing so I can test with it?

    I'm working on a new release just now.

    Cheers

    James

  • Joel Hansen 38 posts 96 karma points
    Sep 21, 2014 @ 23:26
    Joel Hansen
    0

    Thank you James.

    Sure, here is the original image.

  • Joel Hansen 38 posts 96 karma points
    Sep 21, 2014 @ 23:27
    Joel Hansen
    0

    Uhm, it seems that got cropped too!

    You can get it here instead

    https://dl.dropboxusercontent.com/u/1763655/crop-problem-original.jpg

  • James Jackson-South 489 posts 1742 karma points c-trib
    Sep 22, 2014 @ 10:48
    James Jackson-South
    0

    Thanks.

    I noticed something the other day when I was doing some colour conversion code where using (byte)double was rounding down whereas Convert.ToByte(double)was giving the expected output - This might be related.

    I'll soon know anyway.

  • James Jackson-South 489 posts 1742 karma points c-trib
    Sep 22, 2014 @ 13:44
    James Jackson-South
    1

    enter image description here

    Ok, so I figured it out.... I can't believe I didn't spot this straight away.

    The resize method was never originally designed to take the width and height attributes as a decimal value since pixel are integral values. Umbraco shouldn't be requesting them as such.

    It's probably quicker and easier for me to update ImageProcessor (I have an update due anyway) to accept and correctly parse the decimal values as integers so I'll do that asap.

  • Zac 237 posts 538 karma points
    Apr 22, 2015 @ 17:35
    Zac
    0

    We found that this issue still exists in v7.2.4.  We even tried using the latest versions of ImageProcessor from Nuget to no avail.

    In order to fix it for our needs, we set the image resizing to always output in png format (this shows a transparent line instead of a black line).

    To do this, we modified the following files:

    1. /umbraco/js/umbraco.services.js

    changed                                                 

    var src = img.url + "?width=" + newSize.width + "&height=" + newSize.height; 
    to
    var src = img.url + "?width=" + newSize.width + "&height=" + newSize.height + "&format=png";

     

    2. /umbraco/js/umbraco.controllers.js
    changed
       var qs = "?width=" + e.width + "px&height=" + e.height + "px";
       to
       var qs = "?width=" + e.width + "px&height=" + e.height + "px&format=png";
     
    Hope this helps some people.
     
  • James Jackson-South 489 posts 1742 karma points c-trib
    Apr 22, 2015 @ 18:41
    James Jackson-South
    0

    Thats not a wise idea. You're gonna increase output size a huge amount by hacking around and doing that to all your images.

    How about you share the image and the url and image that is causing the problem?

    Truth be told. Umbraco should fix this. The API for ImageProcessor explicitly states int as the parameter type.

  • Zac 237 posts 538 karma points
    Apr 22, 2015 @ 22:56
    Zac
    0

    Thanks James.  We understand the increase in size, but figure this is the best we can do until Umbraco really fixes the issue.

    The problem occurs with any jpeg image that we use in the RTE, our clients often resize the images within the RTE and Umbraco normally calculates the height as a decimal, which leads to these black borders in the image.

  • Zac 237 posts 538 karma points
    Apr 22, 2015 @ 22:58
    Zac
    0

    Or, would this work without the black borders, if we just round the decimals to ints?

    Answer: Nope - this doesn't work if we just round the decimals to ints.  
    We still saw this issue on a client uploaded image: original size 3600 x 600, umbraco sized 783 x 130.

  • Roel Snetselaar 151 posts 305 karma points
    Jun 13, 2015 @ 21:52
    Roel Snetselaar
    0

    So, to sum things up:

    James said:

    It's probably quicker and easier for me to update ImageProcessor (I have an update due anyway) to accept and correctly parse the decimal values as integers so I'll do that asap.

    Question: did you manage to take care of this James?

    Zac said:

    We found that this issue still exists in v7.2.4. We even tried using the latest versions of ImageProcessor from Nuget to no avail.

    So I'm guessing the fix suggested by James is not added or it's not working.

    Later on, James said:

    Truth be told. Umbraco should fix this. The API for ImageProcessor explicitly states int as the parameter type.

    So I could create an issue on the issue tracker for this. But I'm not entirely sure using integers instead of decimals solves the problem, because Zac said:

    Or, would this work without the black borders, if we just round the decimals to ints? Answer: Nope - this doesn't work if we just round the decimals to ints. We still saw this issue on a client uploaded image: original size 3600 x 600, umbraco sized 783 x 130.

  • James Jackson-South 489 posts 1742 karma points c-trib
    Jun 14, 2015 @ 06:06
    James Jackson-South
    0

    To be honest, I don't know. All I know is ImageProcessor correctly resizes images.

  • MrFlo 148 posts 391 karma points
    Oct 29, 2015 @ 15:24
    MrFlo
    0

    The issue is here and it still need to be fixed: http://issues.umbraco.org/issue/U4-4736

  • Alex Brown 129 posts 617 karma points
    Apr 19, 2017 @ 10:52
    Alex Brown
    0

    Seems as though this is still an issue?

  • Cimplex 108 posts 570 karma points
    Apr 24, 2017 @ 12:47
    Cimplex
    0

    I upgraded from 7.2.6 to 7.5.13 and got this issue. Is there a fix or some kind of workaround?

  • Alex Brown 129 posts 617 karma points
    Apr 24, 2017 @ 14:16
    Alex Brown
    0

    I uploaded PNGs as a workaround for now.

  • Yoeri Van de Moortel 7 posts 80 karma points
    Jun 14, 2017 @ 09:16
    Yoeri Van de Moortel
    1

    I just ran into this issue (again) ... and solved it by using an iis rewrite rule. Non-obtrusive solution, easily removable when the issue gets fixed ;-)

    Added a rule to match all jpg/jpeg extensions that has a querystring param containing height/width. Rewrite those url's and prepend bgcolor=fff to the query string. No further code-modifications needed.

    1 - Add rewrite extension to IIS 7 (probably already there).

    2 - Modify your web.config adding the following rewrite rule:

       <rewrite>
            <rules>
                <rule name="Add bgcolor parameter" stopProcessing="true">
                    <match url=".*" />
                    <conditions>
                      <add input="{REQUEST_FILENAME}" pattern="\.*(jpe?g)" />
                      <add input="{QUERY_STRING}" pattern="height=(.*)" />
                      <add input="{QUERY_STRING}" pattern="width=(.*)" />
                      <add input="{QUERY_STRING}" pattern="bgcolor=fff" negate="true" />
                      <add input="&amp;{QUERY_STRING}" pattern="^(&amp;.*)|^&amp;$" />
                    </conditions>
                    <action type="Redirect" url="{R:0}?bgcolor=fff" appendQueryString="false" redirectType="Found" />
                </rule>
            </rules>
        </rewrite>
    
  • Nicole Polet 50 posts 202 karma points
    Sep 26, 2017 @ 22:18
    Nicole Polet
    0

    I am having this same problem.

    @Yoeri: Thanks for posting your solution. However I notice that it breaks Umbraco's native image cropper. I.e. the image that gets inserted into the template is the original dimensions, not the dimensions specified by the cropper.

    Any way to prevent this from happening to image cropper images?

  • Sergey Sagan 5 posts 25 karma points
    Aug 17, 2018 @ 02:05
    Sergey Sagan
    0

    Yoeri Van de Moortel answer actually works, just change the last line of the rewrite rule to:

    <action type="Redirect" url="{R:0}?{QUERY_STRING}&amp;bgcolor=fff" appendQueryString="false" redirectType="Found" />
    
Please Sign in or register to post replies

Write your reply to:

Draft