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.
Hi Chris, I know this a a late answer to you, but I figured I'd add some notes for future reference.
You don't need to update the images/media items, this would be set where the <img src="/media/..."/>is rendered in the Razor file. So you would need to update all your templates with the addition of &rmode=pad to rendered media image urls.
Thanks for the response, but I ended up having to go through all the pages manually. The images are inside rich text editors, not directly linked from the templates, so as far as I'm aware that trick wouldn't have worked.
Ah, yes, RTE's are tricky... I suppose you could do some sort of text replacement when rendering out the RTE content using RegEx or something. I'm glad you've gotten over the hurdle!
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.
Hi Chris, I know this a a late answer to you, but I figured I'd add some notes for future reference.
You don't need to update the images/media items, this would be set where the
<img src="/media/..."/>is rendered in the Razor file. So you would need to update all your templates with the addition of&rmode=padto rendered media image urls.This documentation has many examples of this URL-manipulation: https://docs.sixlabors.com/articles/imagesharp.web/processingcommands.html
Thanks for the response, but I ended up having to go through all the pages manually. The images are inside rich text editors, not directly linked from the templates, so as far as I'm aware that trick wouldn't have worked.
Ah, yes, RTE's are tricky... I suppose you could do some sort of text replacement when rendering out the RTE content using RegEx or something. I'm glad you've gotten over the hurdle!
is working on a reply...