Blog posts by Maciej Golis2019-01-08T08:55:31.0000000Z/blogs/maciej-golis/Optimizely WorldImage Cropper Property Editors (using ImageResizing.NET)/blogs/maciej-golis/dates/2018/10/image-cropper-property-editors-using-imageresizing-net/2019-01-08T08:55:31.0000000Z<p>Happy New Year All!</p>
<p>There are many ways an image crop can be defined. As we know, editors do like as much flexibility as possible :) Having discussed various approaches with multiple content teams, we have decided to enable cropping at the page or block level. </p>
<p>We made 2 editors available:</p>
<ul>
<li>Image Reference</li>
<li>Image Reference List</li>
</ul>
<p>The aspect ratio can be defined for each instance of the property editor <span>individually</span>. </p>
<h2>Usage</h2>
<p>Image can be assigned by drag and dropping it into the drop zone:</p>
<p><img src="https://itmholding.azurewebsites.net/assets/epi/single_image_start.jpg" width="300" alt="" height="90" /></p>
<p>Once the image is dropped, Image Cropper dialog is displayed:</p>
<p><img src="https://itmholding.azurewebsites.net/assets/epi/cropper.jpg" width="584" alt="" height="436" /></p>
<p>Of course, any image can be edited or deleted at any point. Moreover images in Image Reference List editor can be reordered:</p>
<p><img src="https://itmholding.azurewebsites.net/assets/epi/image_list_drag.jpg" width="568" alt="" height="257" /></p>
<h2>Implementation</h2>
<p>The NuGet package is available in the <a href="https://nuget.episerver.com/package/?id=ITMeric.ImageCrop">EPiServer Nuget Feed</a>. The source code and the implemenation guide can be found on <a href="https://github.com/itMeric/ITMeric.ImageCrop/">GitHub</a>.</p>