Change DisplayName (MetaData) for Image property for standard Image Dialog using EditorDescriptor

This is a very simple way of changing the “Name” for a property when showed for the editors. We had a scenario were the editors would like to know the size of images when choosing what image to use for a specific image property.

The property it self was just an ordinary ContentReference:

[UIHint(UIHint.Image)]
public virtual ContentReference Eric { get; set; }

Nothing fancy with that just that we had  validation on the pages saying that the image needed to be in a specific format like: 500px x 340px. This worked totally fine but the editor forgot the size and often picked the wrong size from the asset pane.  To fix this we created a new EditorDescriptor inheriting from the ImageReferenceEditorDescriptor. By doing so we got the same dialog for selecting images but was able to change MetaData.

[EditorDescriptorRegistration(UIHint = "MyImage", TargetType = typeof(ContentReference))]
public class MyImageDescriptor : ImageReferenceEditorDescriptor
{
      public override void ModifyMetadata(ExtendedMetadata metadata, IEnumerable<Attribute> attributes)
      {
          metadata.DisplayName = string.Format("{0}<br/>{1}", metadata.DisplayName, "500 x 340px");
          base.ModifyMetadata(metadata, attributes);
      }
}

The new property would look like:

[UIHint("MyImage")]
public virtual ContentReference Eric { get; set; }

Doing this will result in a heading can contain more information then just the “Name” set in the model.

This is just an example, but what we did was that we extended this a little to handle different scenarios depending on the parent data. For instance if we used an image on an articlepage we had styleguides with one size and other sizes on newspage.

Lets say you have a validation attribute with information about the size of the image. You could then get the attribute by calling: metadata.Parent.Attributes and use that in your EditorDescriptor.