Copied to clipboard

Flag this post as spam?

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


  • Kap 16 posts 166 karma points
    Aug 02, 2024 @ 12:33
    Kap
    0

    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.

  • Huw Reddick 1929 posts 6697 karma points MVP 2x c-trib
    Aug 02, 2024 @ 14:14
    Huw Reddick
    0

    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.

  • Kap 16 posts 166 karma points
    Aug 02, 2024 @ 17:38
    Kap
    0

    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.

  • Huw Reddick 1929 posts 6697 karma points MVP 2x c-trib
    Aug 02, 2024 @ 17:44
    Huw Reddick
    0

    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?

  • Kap 16 posts 166 karma points
    Aug 02, 2024 @ 17:48
    Kap
    0

    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.

  • Huw Reddick 1929 posts 6697 karma points MVP 2x c-trib
    Aug 02, 2024 @ 17:52
    Huw Reddick
    0

    seems to work OK for me in 13.4.1.

    Do you have anything related to static web assets in your program.cs?

  • Kap 16 posts 166 karma points
    Aug 02, 2024 @ 18:00
    Kap
    0

    No, this is all I have in Program.cs

    builder.CreateUmbracoBuilder()
    .AddBackOffice()
    .AddWebsite()
    .AddDeliveryApi()
    .AddComposers()
    .Build();
    
    WebApplication app = builder.Build();
    
    await app.BootUmbracoAsync();
    
    
    app.UseUmbraco()
        .WithMiddleware(u =>
        {
            u.UseBackOffice();
            u.UseWebsite();
        })
        .WithEndpoints(u =>
        {
            u.UseInstallerEndpoints();
            u.UseBackOfficeEndpoints();
            u.UseWebsiteEndpoints();
        });
    
    await app.RunAsync();
    

    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.

  • Huw Reddick 1929 posts 6697 karma points MVP 2x c-trib
    Aug 02, 2024 @ 18:59
    Huw Reddick
    0

    yes, sounds like something is getting in the way somewhere. Let us know if you do figure it out, might help someone else.

  • Kap 16 posts 166 karma points
    Aug 02, 2024 @ 22:28
    Kap
    100

    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.

  • Rob Schall 4 posts 73 karma points
    17 days ago
    Rob Schall
    0

    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:

    app.UseWhen(context => !context.Request.Path.StartsWithSegments("/media"),
        appBuilder => appBuilder.UseStaticFiles());
    

    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.

Please Sign in or register to post replies

Write your reply to:

Draft