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:
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.
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?
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 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!
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).
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:
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.
I've never seen this before but it certainly shouldn't be happening.
Could you post how you are generating your image Urls?
Thanks for the quick reply Jeavon,
Basically, all of the image URL's are being generated the following way:
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?
Nicolás, are you using Foundation for Sites?
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?
Yes! I had the same problem and found what's happening. The line at fault is in the
onImagesLoaded()function infoundation.util.timerAndImageLoader.js.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?1487701944155you're seeing on your url's. It's not caused by Umbraco. I applied a quick fix by changing the line toThis 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!
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!
Great! No problem! Also, looks like someone beat me to fixing the bug.
Great info @Jacob!
is working on a reply...