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 233 posts 445 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.

  • Heather Floyd 603 posts 1001 karma points MVP 5x c-trib
    Aug 30, 2023 @ 20:18
    Heather Floyd
    0

    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.

    This documentation has many examples of this URL-manipulation: https://docs.sixlabors.com/articles/imagesharp.web/processingcommands.html

  • Chris Mahoney 233 posts 445 karma points
    Aug 30, 2023 @ 20:22
    Chris Mahoney
    0

    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.

  • Heather Floyd 603 posts 1001 karma points MVP 5x c-trib
    Aug 30, 2023 @ 21:50
    Heather Floyd
    0

    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!

Please Sign in or register to post replies

Write your reply to:

Draft