Custom editing preview for media

3 min

Optimizely comes with default editing previews for image and video-typed content data. However, you may need to customize the preview for images or video or add one for a media type. You can add or change a preview in the Optimizely templating system.

Customize a preview template

Sites often have a specific design for media content, such as displaying a caption with each image or displaying a document as a link with size and format information. To add a useful preview for editors in edit mode. add a template with a TemplateDescriptor attribute and tag it as preview. Then extend the IRenderTemplate<T> class where T is the content type to preview, as shown in the following example that 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

For media that is not an image or a video, the on-page edit mode is disabled by default because there is nothing to display in the editing preview. However, if you add an editing preview for a new type, then it follows that you may want to have on-page edit mode enabled for that type. Add a UIDescriptor for your media content type to override the default settings for media content. Then, you can specify which edit view is the default and, if required, disable particular edit views.

The following example creates a UIDescriptorFor a document content type, set the default edit view to AllPropertiesView.

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