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.
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).
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?
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 :)
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"));
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:
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
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.
A guess in the wild, but i think you need to use "BoxPad" when upscaling your image.
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?
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
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
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 :)
We need to add BoxPad and Min to Umbraco as they didn't exist when we wrote the GetCropUrl methods long ago!
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?
You could roll your own, or maybe a something a little hacky until we update Umbraco, e.g.
I have created a PR to add the new options https://github.com/umbraco/Umbraco-CMS/pull/1444
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
If you have a predefined crop then it should crop as it will be cropped manually, not pad....?
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.
That gives me http://localhost:56418/media/1014/testimage.jpg?mode=boxpad&upscale=false&rnd=131159107150000000 as the URL. The image stays as 100x100.
So you want to add a border?
I don't think ImageProcessor does that, I would use CSS instead...
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.
is working on a reply...