Copied to clipboard

Flag this post as spam?

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


  • Nicolás Cova 48 posts 120 karma points
    Feb 21, 2017 @ 18:45
    Nicolás Cova
    1

    Image Cropper: Illegal characters in path

    Hello everybody,

    I'm using Image Cropper in Umbraco 7.5.4 and, as of late, I've been having lots of problems serving images. I noticed that I had to reload my browser multiple times for all of the images to load properly. When I took a peek at my browser's dev console, I noticed that I had Internal Server Errors for each and every image. That's when I noticed that every image's URL had a question mark (?) in the query string's rnd value. For example:

    <img src="/media/1174/wallpaper.png?anchor=center&amp;mode=crop&amp;width=600&amp;height=360&amp;rnd=131294058180000000?1487701944155" class="thumbnail">
    

    Notice the question mark after the bunch of zeroes? Why is that character showing up there?

    I implemented a workaround that involves checking for the existence of that character in the crop's URL and removing it before setting the SRC attribute of the IMG tag, but I feel that I really shouldn't be doing that. I mean, the cropped url should be OK out of the box, right?

    Has this happened to anyone else? I'd appreciate any help I can get.

  • Jeavon Leopold 3072 posts 13629 karma points MVP 11x admin c-trib
    Feb 21, 2017 @ 18:49
    Jeavon Leopold
    0

    I've never seen this before but it certainly shouldn't be happening.

    Could you post how you are generating your image Urls?

  • Nicolás Cova 48 posts 120 karma points
    Feb 21, 2017 @ 18:58
    Nicolás Cova
    0

    Thanks for the quick reply Jeavon,

    Basically, all of the image URL's are being generated the following way:

    <img src="@Umbraco.Media(fallbackImageId).GetCropUrl("HomeDestacada")"  class="thumbnail"/>
    

    I've just noticed in the docs that this way of generating the URL is for pre Umbraco v7.3.5 (and I'm working on 7.5.4). Could that be the culprit?

  • Jacob Alvarez 7 posts 98 karma points
    Feb 21, 2017 @ 20:18
    Jacob Alvarez
    0

    Nicolás, are you using Foundation for Sites?

  • Nicolás Cova 48 posts 120 karma points
    Feb 21, 2017 @ 21:57
    Nicolás Cova
    0

    Hi Jacob,

    Yes, I'm using Foundation for Sites. After doing some thinking (and backtracking in my git), I remembered that this issue started after I upgraded Foundation from version 6.1.X to 6.3.0.

    So, I downgraded from 6.3.0 to 6.2.3 and the problem seems to have gone away for now. Got any ideas why Foundation causes this?

  • Jacob Alvarez 7 posts 98 karma points
    Feb 21, 2017 @ 22:35
    Jacob Alvarez
    0

    Yes! I had the same problem and found what's happening. The line at fault is in the onImagesLoaded() function in foundation.util.timerAndImageLoader.js.

    $(this).attr('src', src + '?' + new Date().getTime());
    

    It's forcing images to load by appending a querystring with the current time to each image's src, which is breaking crop url's because they already have a querystring. That's the extra ?1487701944155 you're seeing on your url's. It's not caused by Umbraco. I applied a quick fix by changing the line to

    $(this).attr('src', src + (src.indexOf('?') === -1 ? '?' : '&') + 'forceLoad=' + new Date().getTime());
    

    This checks if there is a querystring already. If so, it'll tack on a new parameter with the time's value. If not, it'll add the querystring with the new parameter and value. I'll have to file an issue on their GitHub repo.

    What a coincidence, I had encountered the problem only an hour after your original post!

  • Nicolás Cova 48 posts 120 karma points
    Feb 22, 2017 @ 14:45
    Nicolás Cova
    0

    That's it Jacob! Awesome!

    Although, I tweaked your fix a little bit by also checking if the querystring has the rnd parameter. I'll only add the forceLoad parameter if there is no querystring or if it's missing the image cropper's random number (I think it's a bit overkill to have both the random number and the current time).

    Thank you so much!

  • Jacob Alvarez 7 posts 98 karma points
    Feb 22, 2017 @ 16:18
    Jacob Alvarez
    0

    Great! No problem! Also, looks like someone beat me to fixing the bug.

  • Jeavon Leopold 3072 posts 13629 karma points MVP 11x admin c-trib
    Feb 22, 2017 @ 14:46
    Jeavon Leopold
    0

    Great info @Jacob!

Please Sign in or register to post replies

Write your reply to:

Draft