There's been a longstanding feature in Umbraco where if you have an image in the Media section, you can access it via e.g. /media/1234/my-image.png?width=400&height=300, causing it to be resized to a particular size.
I'm upgrading an old site from Umbraco 7.6 to 10.3.2 and there's some subtly different behaviour here. Let's say that the image in Media is 500x500.
In Umbraco 7, accessing my-image.png?width=400&height=300 results in an image with extra space added to the left and right, with the original square image centred within the new rectangular image. This may or may not be default behaviour (I inherited the site).
In Umbraco 10, my-image.png?width=400&height=300 gives me a rectangular image with the top and bottom cut off.
It appears that Umbraco 10 doesn't maintain the original aspect ratio by default. Unfortunately I'm struggling to find the official name of this resize functionality so it's hard to search for information on how to configure it.
How can I configure Umbraco 10 to maintain the aspect ratio and pad out the edges like Umbraco 7 did?
Thanks :)
Edit: After a bit of poking around, it looks like the trick is to set ImageSharp's ResizeMode (https://docs.sixlabors.com/api/ImageSharp/SixLabors.ImageSharp.Processing.ResizeMode.html) to Pad instead of Crop... but I'm not sure where to do that. I can add "&rmode=pad" to the image URL, which gives the exact results I'm looking for, but it's not practical to apply that change to every image on the site.
Pad images to keep aspect ratio
Hi everyone,
There's been a longstanding feature in Umbraco where if you have an image in the Media section, you can access it via e.g. /media/1234/my-image.png?width=400&height=300, causing it to be resized to a particular size.
I'm upgrading an old site from Umbraco 7.6 to 10.3.2 and there's some subtly different behaviour here. Let's say that the image in Media is 500x500.
It appears that Umbraco 10 doesn't maintain the original aspect ratio by default. Unfortunately I'm struggling to find the official name of this resize functionality so it's hard to search for information on how to configure it.
How can I configure Umbraco 10 to maintain the aspect ratio and pad out the edges like Umbraco 7 did?
Thanks :)
Edit: After a bit of poking around, it looks like the trick is to set ImageSharp's ResizeMode (https://docs.sixlabors.com/api/ImageSharp/SixLabors.ImageSharp.Processing.ResizeMode.html) to Pad instead of Crop... but I'm not sure where to do that. I can add "&rmode=pad" to the image URL, which gives the exact results I'm looking for, but it's not practical to apply that change to every image on the site.
is working on a reply...