Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
doc
 
 
 
 
 
 
 
 
 
 

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>



Version history

V1.0.1

  • Fixed edge-case "path issue" (issue #5).

V1.0.0

  • Initial version.

About

Image point property editor for Episerver

Resources

License

Releases

No releases published

Packages

No packages published