🔧 Maintenance Alert: World will be on Read-Only Mode on February 18th, 10:00 PM – 11:00 PM EST / 7:00 PM – 8:00 PM PST / 4:00 AM – 5:00 AM CET (Feb 19). Browsing available, but log-ins and submissions will be disabled.

Maciej Golis
Jan 8, 2019
  3260
(3 votes)

Image Cropper Property Editors (using ImageResizing.NET)

Happy New Year All!

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.  

We made 2 editors available:

  • Image Reference
  • Image Reference List

The aspect ratio can be defined for each instance of the property editor individually

Usage

Image can be assigned by drag and dropping it into the drop zone:

Once the image is dropped, Image Cropper dialog is displayed:

Of course, any image can be edited or deleted at any point. Moreover images in Image Reference List editor can be reordered:

Implementation

The NuGet package is available in the EPiServer Nuget Feed. The source code and the implemenation guide can be found on GitHub.

Jan 08, 2019

Comments

Jan 8, 2019 03:26 PM

What I'd like it to be able to fix the ratio. If a shared image is being used in a block/page that's a fixed 16/9 area it would be good that the editor only supported that ratio and would mean large images could be reused across the board. Else users can still crop an image out that then when rendering through might be displayed in a different ratio

Maciej Golis
Maciej Golis Jan 8, 2019 06:46 PM

Hi Scott,

This is something that is supported out of the box. Please have a look at the code snippet below:

[ImageReference(CropRatio = (double)16/9)]
public virtual ImageReference SingleImage { get; set; }

Thanks, M

valdis
valdis Jan 9, 2019 06:31 PM

hey, this is nais that you finally packed it up as nugget :) would be cool if you could add syntax sugars for rendering picture tag as well (https://github.com/valdisiljuconoks/ImageResizer.Plugins.EPiServerBlobReader#render-picture-element).

also would be awesome to jump to StructureMap v4.x

don't take it like critisism :), I just don't have naything else to do as reviewing foreign code.. i added coupe github issues. just my old man 2 cents :)

Please login to comment.
Latest blogs
The missing globe can finally be installed as a nuget package!

Do you feel like you're dying a little bit every time you need to click "Options" and then "View on Website"? Do you also miss the old "Globe" in...

Tomas Hensrud Gulla | Feb 14, 2025 | Syndicated blog

Cloudflare Edge Logs

Optimizely is introducing the ability to access Cloudflare's edge logs, which gives access to some information previously unavailable except throug...

Bob Davidson | Feb 14, 2025 | Syndicated blog

Comerce Connect calatog caching settings

A critical aspect of Commerce Connect is the caching mechanism for the product catalog, which enhances performance by reducing database load and...

K Khan | Feb 14, 2025

CMP DAM asset sync to Optimizely Graph self service

The CMP DAM integration in CMS introduced support for querying Optimizly Graph (EPiServer.Cms.WelcomeIntegration.Graph 2.0.0) for metadata such as...

Robert Svallin | Feb 13, 2025