2019-01-08T08:55:31.0000000Zhttps://world.optimizely.com/blogs/maciej-golis/ Optimizely World <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.&nbsp;&nbsp;</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>.&nbsp;</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&nbsp;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>2019-01-08T08:55:31.0000000Z

Blog post