Don't miss out Virtual Happy Hour this Friday (April 26).

Try our conversational search powered by Generative AI!

AI OnAI Off
Loading...
Area: Optimizely CMS
Applies to versions: 10 and higher
Other versions:
ARCHIVED This content is retired and no longer maintained. See the version selector for other versions of this topic.

Custom editing preview for media

Recommended reading 
Note: This documentation is for the preview version of the upcoming release of CMS 12/Commerce 14/Search & Navigation 14. Features included here might not be complete, and might be changed before becoming available in the public release. This documentation is provided for evaluation purposes only.

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

Customizing 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 new template with a TemplateDescriptor attribute that is tagged as preview. Then extend the IRenderTemplate<T> class where T is the content type to preview as shown in the following example that register a 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
}

Enabling 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 UIDescriptor for a document content type and set the default edit view to all properties mode.

[UIDescriptorRegistration]
public class DocumentUIDescriptor : UIDescriptor<Document>
{
    public DocumentUIDescriptor() : base("icon-document")
    {
        DefaultView = CmsViewNames.AllPropertiesView;
    }
}
Do you find this information helpful? Please log in to provide feedback.

Last updated: Jul 02, 2021

Recommended reading