Copied to clipboard

Flag this post as spam?

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


  • Andrei Canef 33 posts 84 karma points
    Aug 18, 2016 @ 08:54
    Andrei Canef
    0

    Image Cropper and ImageCropMode.Pad

    Hi,

    I'm using the image cropper in the context of an APIController. I have a cropper data type with 4 different crop aliases.

    In the controller, I then have a method that takes the crop alias as a parameter, and returns the fully qualified URL to the image(I have more logic creating that further down in the code), like so:

    var relativePath = item.GetCropUrl(propertyAlias,
                                cropAlias.ToUpperInvariant());
    

    My crops are (to simplify the example) 100x100, 200x200, 300x300 and 400x400. In most cases, the user uploads an image that's at least 400x400, which I can then crop down.

    However (and this is where it all goes pear-shaped), for a specific document type, they'll be uploading a smaller image and want it padded out with a white (or transparent) background.

    At that point, I'm doing

    x.GetCropUrl(null, null, propertyAlias, cropAlias.ToUpperInvariant(), null, ImageCropMode.Pad, null, true, true, true, null, null, false)
    

    That's the only method I could find that allowed me to specify a different ImageCropMode. However, what seems to happen at that point is that the cropAlias is getting ignored, and that I just get back the default image uploaded (with no padding).

    Any ideas would be much appreciated.

  • Damiaan 442 posts 1302 karma points MVP 6x c-trib
    Aug 18, 2016 @ 14:58
    Damiaan
    0

    A guess in the wild, but i think you need to use "BoxPad" when upscaling your image.

  • Andrei Canef 33 posts 84 karma points
    Aug 18, 2016 @ 16:41
    Andrei Canef
    0

    BoxPad and Min have been added in 4.4.0 according to the docs, and they don't show up in Intellisense. Guessing the version of the library that Umbraco is using hasn't been updated yet?

  • James Jackson-South 489 posts 1747 karma points c-trib
    Aug 19, 2016 @ 09:04
    James Jackson-South
    0

    Hi Andrei,

    I'll need a wee bit of info in order to see what is going on.

    What is the generated crop url? What versions of Umbraco and ImageProcessor.Web are you running?

    Cheers

    James

  • Andrei Canef 33 posts 84 karma points
    Aug 19, 2016 @ 09:26
    Andrei Canef
    0

    Hi James,

    Thank you for taking a look.

    Umbraco 7.4.3, ImageProcessor.Web 4.5.3 according to Nuget.

    The URL that gets rendered is http://localhost:56418/media/1014/testimage.jpg?mode=pad&upscale=false&rnd=131159107150000000

    This is based on me calling

    x.GetCropUrl(null, null, propertyAlias, cropAlias.ToUpperInvariant(), null, ImageCropMode.Pad, null, true, true, true, null, null, false)
    

    I was initially suspecting one of the booleans might control the padding/borders, but I tried different combinations and none seem to work. Not sure if I'm missing something in the documentation :)

  • Jeavon Leopold 3074 posts 13632 karma points MVP 11x admin c-trib
    Aug 19, 2016 @ 15:08
    Jeavon Leopold
    0

    We need to add BoxPad and Min to Umbraco as they didn't exist when we wrote the GetCropUrl methods long ago!

  • Andrei Canef 33 posts 84 karma points
    Aug 19, 2016 @ 15:09
    Andrei Canef
    0

    Hi Jeavon,

    So are you saying that I can't actually add padding/borders to an image that's smaller than my crop?

    I guess my option would then be to upgrade ImageProcessor.Web and generate the URL myself, without using GetCropUrl?

  • Jeavon Leopold 3074 posts 13632 karma points MVP 11x admin c-trib
    Aug 19, 2016 @ 15:26
    Jeavon Leopold
    0

    You could roll your own, or maybe a something a little hacky until we update Umbraco, e.g.

    var boxpadString = new HtmlString(Url.GetCropUrl(mediaItem, imageCropMode: ImageCropMode.Pad, imageCropAnchor: ImageCropAnchor.Center).ToString().Replace("=pad", "=boxpad"));
    

    I have created a PR to add the new options https://github.com/umbraco/Umbraco-CMS/pull/1444

  • Andrei Canef 33 posts 84 karma points
    Aug 19, 2016 @ 15:32
    Andrei Canef
    0

    Hi Jeavon,

    That would fix the ImageCropMode, but it still doesn't make it take into account my cropAlias.

    I get http://localhost:56418/media/1014/testimage.jpg?mode=boxpad&upscale=false&rnd=131159107150000000 as the URL

  • Jeavon Leopold 3074 posts 13632 karma points MVP 11x admin c-trib
    Aug 19, 2016 @ 15:35
    Jeavon Leopold
    0

    If you have a predefined crop then it should crop as it will be cropped manually, not pad....?

  • Andrei Canef 33 posts 84 karma points
    Aug 19, 2016 @ 15:39
    Andrei Canef
    0

    I have a predefined crop of 400x400. I'm uploading an image of 100x100 and I'd like it to have 150px of padding added all around.

    x.GetCropUrl(null, null, propertyAlias, cropAlias.ToUpperInvariant(), null, ImageCropMode.Pad, null, true, true, true, null, null, false).Replace("=pad", "=boxpad")
    

    That gives me http://localhost:56418/media/1014/testimage.jpg?mode=boxpad&upscale=false&rnd=131159107150000000 as the URL. The image stays as 100x100.

  • Jeavon Leopold 3074 posts 13632 karma points MVP 11x admin c-trib
    Aug 19, 2016 @ 15:41
    Jeavon Leopold
    0

    So you want to add a border?

    I don't think ImageProcessor does that, I would use CSS instead...

  • Andrei Canef 33 posts 84 karma points
    Aug 19, 2016 @ 15:50
    Andrei Canef
    0

    According to http://imageprocessor.org/imageprocessor-web/imageprocessingmodule/resize/, that's what boxpad is supposed to do...

    I'll try and build the URL using solely image processor for this particular case, and see if I get anywhere.

Please Sign in or register to post replies

Write your reply to:

Draft