HomeDev GuideAPI Reference
Dev GuideAPI ReferenceUser GuideGitHubNuGetDev CommunitySubmit a ticketLog In
GitHubNuGetDev CommunitySubmit a ticket

Examples in this topic are based on an empty Optimizely Content Management System (CMS) project, as described in [Create a starter project](🔗).

Optimizely has built-in features supporting working with media such as documents, images and video. Built-in features include multiple file upload and drag-and-drop of media into the `ContentArea`, `ContentReference`, and `XhtmlString` properties. To use these features, you must first **define media types** in your [content model](🔗), just as for other content types.

Similar to a page type, a media type defines a set of properties. Media like an image for example, is an instance of the .NET class defining the media type upon which the media is based, and implementing the `IContent` interface. Media is routed in the same way as pages but has a built-in template that returns the image or document.

## Add media types

You should create specific classes for media of type images, video, and anything generic other than video or image, such as text or PDF files.

The following code sample is a simple media type for images. Inheriting from `ImageData` adds built-in functionality like thumbnail display in lists and editing previews. See [Media types and templates](🔗).

## Media structure

Media used in site content must be available in folders in the **Assets** pane. The folder structure is shared with blocks, so when you create a folder for images, the same folder will also be created for blocks. You can set access rights for folders to restrict editor access.

The assets folder structure is intended to be used as follows:

  • **For All Sites** – Assets available for sharing across a website, or all websites in a multi-site scenario.

  • **For This Site** – Assets available within a site in a multi-site scenario, see [Initial configuration](🔗).

  • **For This Page** – Assets only be available for a specific page (or block).

See [Media types and templates](🔗).

## Upload media

Media can be uploaded as follows:

  • **Drag-and-drop** into the Assets pane, or through the **Upload Files** option in the context menu (see [Optimizely user interface](🔗).

  • Programmatically by using the CMS API.

  • Through a custom provider.

In a standard installation, media will be automatically published and indexed when uploaded, (unless you have a content approval workflow in place). This can be changed through the `UIOptions.AutoPublishMediaOnUpload` setting.

## Image Editor

CMS has a built-in image editor providing basic image editing capabilities like resize and crop.

To help editors applying the correct image size for content, you can configure preset values that editors can select in the image editor. The configuration is added to the \<episerver> section of the _web.config_ file. The configuration example below adds image size options "small", "medium", and "large" to the Image Editor.

The result when editing an image in the Image Editor.


## Add an image link property

Link properties are commonly used to let editors to select an image from a an assets folder, and link it to the page for display on the front-end. The following example shows how to add an image link property with rendering to a page.

Using `ContentReference` you can link to an image. Adding the `UIHint.Image` attribute allows you to specifically select content types that implement `IContentImage`, so only images will be available for selection in the folder structure. Omitting `UIHint.Image` will display all types of content in the folder structure.

This code adds a "Page image" property letting you link an image to the page, either through drag-and-drop, or by selecting from the asset folder structure.

Add a controller for the rendering of the test page.

Add a view to complete the rendering of the linked image on the test page.

The image is rendered, both in on-page edit and preview views, and on the front-end.

See also [Assets and media](🔗).