Umbraco 13 Image Querystring width and height ignored
Hi All,
Hope it is ok to create a new thread for this. I have found a similar issue with Umbraco 12, which has been answered, however the solution does not appear to be applicable to this situation. I didnt want to add it to a thread which already had a solution.
I am upgrading an Umbraco V8 site to Umbraco 13, and am having an issue, where the Image querystring is not handled correctly (This is running under IIS Express while debugging in Visual Studio 2022). I have an image which is 561x600 in size. The page I am porting uses GetCropUrl to retrieve a smaller version of the image.
The image returned by the GetCropUrl is media/4v1oeav0/<Image name>.png?width=112&height=118&v=1da4799bf30dd70"
If I use that URL in a browser for the Umbraco 8 website, I get the resized image, however on Umbraco 13, I get the original size image.
I have found references to disabling app.UseStaticFiles() however I dont believe that is present in the Program.cs file I am using (Startup.cs is now merged with Program.cs)
At the moment, the only way I can work around this is to retrieve the URL from GetCropUrl, and extract the width and height and then use them as the width and height attributes in the img element directly. However this will require changing everywhere that GetCropUrl is used.
Does anyone know of a better solution please? Is there anyway of allowing the width/hight querystring parameters to work? I have played around with a .net core website, and experience the same issue, so I dont think it is limited to Umbraco.
It is possible that this is how it is supposed to be, and that the behaviour in 8 and before is wrong. The actual page which displays it is using a Media Picker insteaed of an Image Cropper. Could that be the cause? It worked in v8, but in 13 all the images are their full size rather than the resized size.
I created a new Umbraco 13 project, and it correctly resizes the same image, so it must be something with either the existing code or the database. I will investigate further.
Finally got to the bottom of it. The old project had the Media folder at the level of the root of the visual studio project. Everything worked except the Image Scaling. Moving the Media files into the wwwroot/Media folder fixed it.
Looks like the scaling does not work when the Media files are not under the wwwroot/Media folder.
We ran into something very similar here. The issue is in fact the UseStaticFile() Handler. If you don't isolate it to avoid /media items, umbraco can't grab that request and manipulate the file on load as necessary. To avoid this, just add something like:
This will tell umbraco, for any requests outside of /media for static files, go ahead an allow it like usual (images in /wwwroot, etc). But for anything inside /media, do not all that route to process and instead let Umbraco process it.
Umbraco 13 Image Querystring width and height ignored
Hi All,
Hope it is ok to create a new thread for this. I have found a similar issue with Umbraco 12, which has been answered, however the solution does not appear to be applicable to this situation. I didnt want to add it to a thread which already had a solution.
I am upgrading an Umbraco V8 site to Umbraco 13, and am having an issue, where the Image querystring is not handled correctly (This is running under IIS Express while debugging in Visual Studio 2022). I have an image which is 561x600 in size. The page I am porting uses GetCropUrl to retrieve a smaller version of the image.
The image returned by the GetCropUrl is
media/4v1oeav0/<Image name>.png?width=112&height=118&v=1da4799bf30dd70"
If I use that URL in a browser for the Umbraco 8 website, I get the resized image, however on Umbraco 13, I get the original size image.
I have found references to disabling app.UseStaticFiles() however I dont believe that is present in the Program.cs file I am using (Startup.cs is now merged with Program.cs)
At the moment, the only way I can work around this is to retrieve the URL from GetCropUrl, and extract the width and height and then use them as the width and height attributes in the img element directly. However this will require changing everywhere that GetCropUrl is used.
Does anyone know of a better solution please? Is there anyway of allowing the width/hight querystring parameters to work? I have played around with a .net core website, and experience the same issue, so I dont think it is limited to Umbraco.
Thanks.
Kap.
what exact version of Umbraco are you using?
Do you have any other styles/classes on the image or container that may be overriding the crop size?
I'm using 13.4.1 and have no problems with crop sizes.
Hi Huw,
Thanks for the reply. Im using 13.4.1 as well.
I dont think any thing else is overriding it, because if I browse to the umbraco 8 server
https://
the image is the correct size (ie 100 by 100 pixels) but if I do the same to my dev machine (exact same url with just the host changed): https://localhost:44339/media/jivjqlnq/technician-using-ipad-app.jpg?width=100&height=100&v=1d7378a2e39bf70
The image is the full size of the image
It is possible that this is how it is supposed to be, and that the behaviour in 8 and before is wrong. The actual page which displays it is using a Media Picker insteaed of an Image Cropper. Could that be the cause? It worked in v8, but in 13 all the images are their full size rather than the resized size.
Thanks again,
Kap.
It shouldn't matter which picker as the magic happens because of the query string. Is there anything in the logs about the image processor?
No, there is no mention of "image" in the logs. When viewing the image directly from the browser, I am not seeing any logs entries at all.
I will try and create a new Umbraco 13 site and see if I get the same issue.
Thanks
Kap.
seems to work OK for me in 13.4.1.
Do you have anything related to static web assets in your program.cs?
No, this is all I have in Program.cs
I created a new Umbraco 13 project, and it correctly resizes the same image, so it must be something with either the existing code or the database. I will investigate further.
Thanks again for the Help Huw.
yes, sounds like something is getting in the way somewhere. Let us know if you do figure it out, might help someone else.
Finally got to the bottom of it. The old project had the Media folder at the level of the root of the visual studio project. Everything worked except the Image Scaling. Moving the Media files into the wwwroot/Media folder fixed it.
Looks like the scaling does not work when the Media files are not under the wwwroot/Media folder.
Thanks for the support Huw!
Kap.
We ran into something very similar here. The issue is in fact the UseStaticFile() Handler. If you don't isolate it to avoid /media items, umbraco can't grab that request and manipulate the file on load as necessary. To avoid this, just add something like:
This will tell umbraco, for any requests outside of /media for static files, go ahead an allow it like usual (images in /wwwroot, etc). But for anything inside /media, do not all that route to process and instead let Umbraco process it.
is working on a reply...