Image point property editor for Episerver
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
build
doc
samples
src/ImagePointEditor
.gitattributes
.gitignore
ImagePointEditor.sln
License.md
ReadMe.md

ReadMe.md

Episerver image point property editor

This editor makes it possible to select a point on an image by clicking on the image.
Main purpose is to be able to set a focal point for an image, and use that focal point when the image is resized.
The ImagePointEditor can be used together with the Picture helper in ImageProcessor.Web.Episerver to automatically use a focal point when image is resized.

How to use

Add a string property to your ImageData model. Decorate the property with the ImagePoint UI hint.

[UIHint(ImagePoint.UIHint)]
[Display(Name = "Focal point")]
public virtual string ImageFocalPoint { get; set; }

Now it's possible to place a point when editing an image in "All properties view":

The x and y values of the point is saved as a string, in the format <x value>|<y value>. The x and y values range from 0-1.
Ex:
0|0 = left top corner
1|1 = right bottom corner
0.5|0.5 = center of image
0.5|0 = center top

How to install

Easiest is to add nuget from the EPiServer Nuget Feed:

Install-Package ImagePointEditor

But if you don't want your solution to be dependent on some random guy's nuget package 🙂, it's' fairly easy to add all the parts manually.

Changes made to your solution

When the nuget is added the following changes are made to you solution

  • Add reference to ImagePointEditor.dll, which only contains the EditorDescriptor/UIHint.
  • Add the Dojo module in the modules\_protected folder
  • Add module in Web.config:
<episerver.shell>
    <protectedModules>
        <add name="ImagePointEditor" />
    </protectedModules>
</episerver.shell>