Recently I’m working on a project which has a requirement. We need focal point selector for an image. So the idea is you pick a focal point and application based on requested image size crop the image based on selected focal point. So I store the focal point (x,y) as a comma separated in string.

public class ImageFile : ImageData
{
	[UIHint("FocalPoint")]
	public virtual string FocalPoint { get; set; }
}

Now we want make the EPiServer custom editor named “FocalPoint”. There are many post about this so I ignore this part but what I need to pass current image URL to be passed to my editor. So for doing this we need EditorDescriptor as below:

	[EditorDescriptorRegistration(TargetType = typeof(string), UIHint = "FocalPoint")]
	public class FocalPointEditorDescriptor : EditorDescriptor
	{
		public FocalPointEditorDescriptor()
		{
			this.ClientEditingClass = "alloy.editors.FocalPointSelector";
		}
		public override void ModifyMetadata(ExtendedMetadata metadata, IEnumerable attributes)
		{
			base.ModifyMetadata(metadata, attributes);
		}
	}

Now we want to change the code to pass current image URL to editor, so editor can load the image and user can select the focal point. Code below is a magic which need to be injected into ModifyMetadata method.

			var contentDataMetadata = metadata as ContentDataMetadata;
			if (contentDataMetadata != null)
			{
				var imageFile = contentDataMetadata.OwnerContent as IContentMedia;
				if (imageFile != null)
				{
					metadata.EditorConfiguration["imageURL"] = UrlResolver.Current.GetUrl(imageFile.ContentLink);
				}
			}

And now we can access the value in our edit in JS:

define([
	"dojo/_base/connect",
	"dojo/_base/declare",
	"dijit/_CssStateMixin",
	"dijit/_Widget",
	"dijit/_TemplatedMixin",
	"dijit/_WidgetsInTemplateMixin",
	"epi/shell/widget/_ValueRequiredMixin",
	"dojo/dom",
	"dojo/on",
	"dojo/text!./templates/FocalPointSelector.html"],

	function (
		connect,
		declare,
		_CssStateMixin,
		_Widget,
		_TemplatedMixin,
		_WidgetsInTemplateMixin,
		_ValueRequiredMixin,
		dom,
		on,
		template) {

		return declare(
			"ras.editors.FocalPointSelector", [
				_Widget,
				_TemplatedMixin,
				_WidgetsInTemplateMixin,
				_CssStateMixin,
				_ValueRequiredMixin],
			{
				templateString: template,
				selector: null,
				intermediateChanges: false,
				image: null,
				value: null,
				onChange: function (value) { },
				postCreate: function () {
					this.image = dojo.create("img", { "style": "width:100%;height:100%", "src": this.imageURL }, this.domNode);
				}
			});
	});

And you can see “imageURL” is being passed to our javascript code and we can use it.