Customize the editing preview for media

Optimizely includes default editing previews for image and video content. Add or change a preview through the templating system to customize how other media types display in edit view.

Customize a preview template

Preview templates let editors see media content in context: an image with its caption, or a document as a link with size and format information. Add a template with a TemplateDescriptor attribute tagged as preview, then extend IRenderTemplate<T> where T is the content type to preview.

The following example registers an MVC controller as a preview template for Document:

[TemplateDescriptor(Tags = new [] {
  RenderingTags.Preview
})]
public partial class DocumentPreview: ContentController<Document> {
  //Do some custom preview for document
}

Enable on-page edit view

On-page edit mode is off by default for media that is not an image or a video because there is nothing to display. After adding an editing preview for a new type, enable on-page edit mode by adding a UIDescriptor for the media content type to override default settings.

The following example creates a UIDescriptor for a document content type and sets the default edit view to All Properties:

[UIDescriptorRegistration]
public class DocumentUIDescriptor: UIDescriptor<Document> {
  public DocumentUIDescriptor(): base("icon-document") {
    DefaultView = CmsViewNames.AllPropertiesView;
  }
}