Hi,
I am having issues with image files on iOS devices. The query string that Umbraco 8 places at the end of an image url is preventing these images displaying on iOS devices. Seems fine on other devices.
for example: /media/zzyljno0/calculator-and-pen-225.jpg?width=225&height=166
In Umbraco 7, the same image would render fine, with the query string present: for example: /media/1223/calculator-and-pen-225.jpg?width=225&height=166
Please can someone let me know how to prevent this query string from being added to the image path. When I remove it (manually in Dev tools, for example), the images is rendered correctly.
Can you elaborate? The query string parameters cause the image to go through Image Processor and resize/crop/edit the image which is then cached. Without the query string the raw image is served up so if the image was 12MB, the whole 12MB image would be returned.
Have you, by some chance, added a new crop to the Image Cropper data type and the images that are having issues are images that already existed?
Hi Nik,
Thank you for your reply.
When I test the pages, on my old iPhone, and also on Browserstack, on various iterations of iOS devices, incuding iPads, there is an outline for the image, but just a blank area on the page where the image should be rendered. The message coming back from the Dev tools is as follows (when i remove the query string in Dev tools, the image appears) One thing I have thought about is removing the FiftyOne mobile detection, to see if its that, I'll give that a go:
The specified path, file name, or both are too long. The fully qualified file name must be less than 260 characters, and the directory name must be less than 248 characters.
Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code.
Exception Details: System.IO.PathTooLongException: The specified path, file name, or both are too long. The fully qualified file name must be less than 260 characters, and the directory name must be less than 248 characters.
Source Error:
An unhandled exception was generated during the execution of the current web request. Information regarding the origin and location of the exception can be identified using the exception stack trace below.
Stack Trace:
[PathTooLongException: The specified path, file name, or both are too long. The fully qualified file name must be less than 260 characters, and the directory name must be less than 248 characters.]
System.IO.__Error.WinIOError(Int32 errorCode, String maybeFullPath) +579
System.IO.Directory.InternalCreateDirectory(String fullPath, String path, Object dirSecurityObj, Boolean checkHost) +1394
System.IO.Directory.InternalCreateDirectoryHelper(String path, Boolean checkHost) +92
FiftyOne.Foundation.Mobile.Detection.Feature.ImageOptimiser.OptimisedImageResponse(HttpContext context) +1054
FiftyOne.Foundation.Mobile.Detection.DetectorModule.OnPostAuthorizeRequest(Object sender, EventArgs e) +826
System.Web.SyncEventExecutionStep.System.Web.HttpApplication.IExecutionStep.Execute() +223
System.Web.HttpApplication.ExecuteStepImpl(IExecutionStep step) +213
System.Web.HttpApplication.ExecuteStep(IExecutionStep step, Boolean& completedSynchronously) +91
Hi again Nik,
Yes, that is it. We use FiftyOne degrees free version to aid mobile detection, looking at the config file for it, I deactivated the image optimisation, and bingo, the images appeared.
Remove query string from image paths
Hi, I am having issues with image files on iOS devices. The query string that Umbraco 8 places at the end of an image url is preventing these images displaying on iOS devices. Seems fine on other devices.
for example: /media/zzyljno0/calculator-and-pen-225.jpg?width=225&height=166
In Umbraco 7, the same image would render fine, with the query string present: for example: /media/1223/calculator-and-pen-225.jpg?width=225&height=166
Please can someone let me know how to prevent this query string from being added to the image path. When I remove it (manually in Dev tools, for example), the images is rendered correctly.
Has anyone else had this issue?
Thank you,
Kind regards,
Pete
Hi Peter,
Can you elaborate? The query string parameters cause the image to go through Image Processor and resize/crop/edit the image which is then cached. Without the query string the raw image is served up so if the image was 12MB, the whole 12MB image would be returned.
Have you, by some chance, added a new crop to the Image Cropper data type and the images that are having issues are images that already existed?
Nik
Hi Nik, Thank you for your reply. When I test the pages, on my old iPhone, and also on Browserstack, on various iterations of iOS devices, incuding iPads, there is an outline for the image, but just a blank area on the page where the image should be rendered. The message coming back from the Dev tools is as follows (when i remove the query string in Dev tools, the image appears) One thing I have thought about is removing the FiftyOne mobile detection, to see if its that, I'll give that a go:
The specified path, file name, or both are too long. The fully qualified file name must be less than 260 characters, and the directory name must be less than 248 characters. Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code.
Exception Details: System.IO.PathTooLongException: The specified path, file name, or both are too long. The fully qualified file name must be less than 260 characters, and the directory name must be less than 248 characters.
Source Error:
An unhandled exception was generated during the execution of the current web request. Information regarding the origin and location of the exception can be identified using the exception stack trace below.
Stack Trace:
[PathTooLongException: The specified path, file name, or both are too long. The fully qualified file name must be less than 260 characters, and the directory name must be less than 248 characters.] System.IO.__Error.WinIOError(Int32 errorCode, String maybeFullPath) +579 System.IO.Directory.InternalCreateDirectory(String fullPath, String path, Object dirSecurityObj, Boolean checkHost) +1394 System.IO.Directory.InternalCreateDirectoryHelper(String path, Boolean checkHost) +92 FiftyOne.Foundation.Mobile.Detection.Feature.ImageOptimiser.OptimisedImageResponse(HttpContext context) +1054 FiftyOne.Foundation.Mobile.Detection.DetectorModule.OnPostAuthorizeRequest(Object sender, EventArgs e) +826 System.Web.SyncEventExecutionStep.System.Web.HttpApplication.IExecutionStep.Execute() +223 System.Web.HttpApplication.ExecuteStepImpl(IExecutionStep step) +213 System.Web.HttpApplication.ExecuteStep(IExecutionStep step, Boolean& completedSynchronously) +91
Hi again Nik, Yes, that is it. We use FiftyOne degrees free version to aid mobile detection, looking at the config file for it, I deactivated the image optimisation, and bingo, the images appeared.
Kind regards, Pete
is working on a reply...