Eric
Apr 25, 2016
  4486
(4 votes)

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.

image

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.

Apr 25, 2016

Comments

Please login to comment.
Latest blogs
Avoid Scandinavian Letters in File Names in Optimizely CMS

Discover how Scandinavian letters in file names can break media in Optimizely CMS—and learn a simple code fix to automatically sanitize uploads for...

Henning Sjørbotten | Jun 19, 2025 |

Exporting Optimizely databases causing errors

Solutions to a couple of recurring issues when migrating databases to the cloud.

Tomas Hensrud Gulla | Jun 18, 2025 |

Common Pitfalls with Search in Optimizely Graph - and How to Avoid Them

Optimizely Graph offers powerful, flexible search capabilities out of the box, making it a popular choice for headless implementations. However, li...

Michał Mitas | Jun 18, 2025

Introducing the Feature Experimentation Administrator Certification

We’re excited to announce the launch of the  Feature Experimentation Administrator Certification,  the newest addition to our growing suite of...

Satata Satez | Jun 18, 2025

UrlResolver Bug in Optimizely DXP: Troubleshooting Inconsistent URLs in Scaled-Out Apps

A while back, our team encountered a puzzling production bug: URLs generated by the UrlResolver would randomly differ depending on who accessed the...

David Drouin-Prince | Jun 18, 2025 |

Optimizely Commerce Connect: Enabling content-driven ecommerce experiences

The world of ecommerce today is a rapidly evolving field. No longer are customers satisfied with a long list of products that they have no idea how...

Shahrukh Ikhtear | Jun 16, 2025