Episerver and ImageProcessor: New Crop addition and renaming of UI package

I wanted to see if the Image Cropper Property Editors could work with my ImageProcessor add-ons too. Turned out they did. Just had to make some small changes to using statements and url formatting and that was basically it. I have now added the functionality from the package (NuGet Package: ITMeric.ImageCrop, source: https://github.com/itMeric/ITMeric.ImageCrop) by Maciej Golis to the ImageProcessor add-on family. Thank you Maciej for creating this!

Because of this addition, I changed the ImageProcessor.Web.Episerver.UI package too. This has now been renamed to ImageProcessor.Web.Episerver.UI.Blocks. Along with the rename I added the CropProcessImageBlock to the package. This block basically has the same functionality as the ProcessImageBlock but uses the Image Cropper property editor for selecting and cropping the image at the same time

You can use all the other methods (or method collections) to manipulate the cropped image. See Episerver and ImageProcessor: now for editors too! for more information about the blocks functionality.

Of course you can also use the Crop package standalone. The blog post from Maciej and the Readme in the original GitHub repository contain more information about it's usage. Only thing that is not ported over is the CropRatio attribute as this functionality is not present in the ImageProcessor library (added in 5.3)

So, to summarize we now have ImageProcessor.Web.Episerver.UI.Blocks and ImageProcessor.Web.Episerver.UI.Crop. The first has a dependency on the second because of the addition of the new block described above. The previous ImageProcessor.Web.Episerver.UI package will be discontinued. The new packages are submitted to the feed.

To learn more about the ImageProcessor, you can check out my other blog posts. A good starting point would be this one

The code for the package is available on my GitHub account. I still really appreciate feedback in the comments below and help in the form of issues and, even better, pull requests in the repository.

Hope this helps.

Jan 15, 2019

Comments

Jan 16, 2019 12:30 PM

What does the CropRation do? This would be great for our editors but only if we can contrain the selection mask down to a forced ratio as you can in image editors.

That way only the ratio we need is chosen when images are reused in different blocks/pages.

Vincent Baaij Jan 17, 2019 08:27 AM

@Scott I originally did not copy over the CropRatio because I thought it was something that was passed on the the actual processing layer and that it was ImageResizer specific. Took a better look and I was wrong. Turns out to be exactly that what you describe.

Working on a new version now that allows you to set the CropRatio on the block level for the CropProcessImageBlock. If you use the ImageReference standalone, you can just set the CropRatio in the ImageReference attribute like this:

[ImageReference(CropRatio = 16/3)]
[Display(Name = "Image", Order = 1)]
public virtual ImageReference Image { get; set; }

Look out for the 5.3 version to appear on the feed. That will be the one which will include this functionality.

Vincent Baaij Jan 17, 2019 08:49 AM

Was a bit too quick with the CropRatio on the block level. I currently don't know of a way to make this a setting that editors could change when adding the block to a ContentArea

The CropRatio can be set again though on the ImageReference attribute as soon in the previous comment(s).

Jan 18, 2019 11:14 AM

Yes all I'm looking for is the ability to set the ratio on the ImageReference where each image is used either on page or block. So that it can be maintained when going through the renderer. This would allow an image to be used multiple times.

This sounds excellent if it's working like that. Thanks for the great work Vincent

Maciej Golis Jan 25, 2019 04:23 PM

Hi All,

@Vincent - that looks amazing! Really well done!

@Scott - that's one of the main features of main package. Please feel free to try it out - look forward to hearing your thoughts.

Maciej

Please login to comment.