Copied to clipboard

Flag this post as spam?

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


  • Chris Mahoney 220 posts 429 karma points
    Jan 12, 2023 @ 22:27
    Chris Mahoney
    0

    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.

    • 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.

Please Sign in or register to post replies

Write your reply to:

Draft