EPiServer comes with default editing previews for image and video typed content data. However there might be
cases where you need to customize the editing preview for images or video; or perhaps add an editing preview
for a media type that doesn't have one by default. Adding or changing a preview can be done using the templating
system in EPiServer.
Custom preview template
It's quite common that sites have a specific design for media content. For example, an image should always be
shown with a caption or a document will be displayed as a link with size and format information. It can be very useful for editors to be able to see
a preview of this in edit mode. In order to add a new editing preview all you need to do is add a new template with a
TemplateDescriptor attribute that is tagged as preview and then also extend the IRenderTemplate<T> class
where T is the content type to preview. For example:
C#
[TemplateDescriptor(Default = true, Tags = new [] { RenderingTags.Preview })]
public partial class DocumentPreview : PreviewPage, IRenderTemplate<Document>
{
}
Enabling on-page edit
For media that is not an image or a video, the on-page edit mode is disabled by default since there is no editing preview to display. However if
you add an editing preview for a new type then it follows that you would want to have on-page edit mode enabled for that type. This can be achieved via
an UIDescriptor class. By simply adding a UIDescriptor for your media content type you will override the default settings for media content. You can then
specify which edit view should be the default and, if required, disabled particular edit views. In the example below we create a UIDescriptor for a document
content type and set the default edit view to all properties mode.
C#
[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.