DFE 1.1.0 - 4 Referencing and Rendering Assets

Assets from Digizuite can be rendered like any other assets in Episerver - either in Content Areas (using the included default controllers) or in XHTML properties or properties are either of the type ContentReference or Url. 

When rendered in a Razor view, you can either use the "PropertyFor" method - but you can also use one of several extension methods to retrieve the URL for the asset and use that directly in your rendering.

Referencing Assets in Content Models

When you create the properties in your content models, you can either make a ContentReference to hold the reference to them, or a Url. If you assign the proper UIHint, the same editorial experience will be shown.

        //Image Selector
        [UIHint(UIHint.Image)]
        public virtual ContentReference TestImage { get; set; }

        //Same image selector as above
        [UIHint(UIHint.Image)]
        public virtual Url AnotherTestImageWithUrl { get; set; }

        //This will allow the editor to pick any URL or asset
        public virtual Url UrlThatCanBeAnImage { get; set; }

        //Video selector
        [UIHint(UIHint.Video)]
        public virtual ContentReference TestVideo { get; set; }

The code above will be shown to the editor as seen below. 

The images that are marked as UIHint.Image will render with the image selector - whether their underlying type is ContentReference or Url. However, if you simply add a Url without a UIHint you will get a selector that can also point to external urls as well (see example below).

Notice how Digizuite has it's own selector in the Url selection.

If you decide to use the Image editor descriptor, you'll be browsing the media library using the dialog seen here. Even though you in this case access the entire media structure - including Episervers 'own' media, the Digizuite folders will be available below the Digizuite folder (a name that can be customized in configuration.

Default Controllers

As mentioned earlier, just as the integration comes with default models, it also comes with default controllers so that it will work out-of-the-box when you drag in Digizuite assets into for example a content area. They exist for both images and videos.

They are an absolute minimum and can be overwritten if/when needed. One thing they do feature is that they will check if they are currently rendered with a rendering tag - and if so, trying to resolve the proper Digizuite media format for that rendering tag.

Here is the main method from the default Video File Controller:

    [TemplateDescriptor(AvailableWithoutTag = true, Inherited = true)]
    public class DefaultVideoAssetController : PartialContentController<IDigizuiteVideo>
    {

        public DefaultVideoAssetController()
        {
        }

        public override ActionResult Index(IDigizuiteVideo currentContent)
        {
            var tag = ControllerContext.ParentActionViewContext.ViewData["tag"] as string;
            string ub = currentContent.ContentLink.DigizuiteMediaUrl(tag);            
            return Content($"<video controls autoplay name=\"media\" style=\"width: 100%;\"><source src=\"{ub}\" type=\"video/mp4\"></video>");
        }
    }

Using Rendering Tags

A common task is to ensure that the proper media format for any given media asset is delivered. The media format can either be directly controlled in code, as we will see further down, it can be managed by editors in the XHTML fields, but you can also set up rules as a developer to connect it with Episervers Rendering tags - just like the default controllers above takes into consideration. Read more about the rendering tags here: DFE 1.1.0 - 7 Dealing with Media Formats and Rendering Tags

Understanding URLs

As mentioned in the chapter DFE 1.1.0 - 2 Modelling Asset Content Types, you can assign Blob properties on your custom models to different media formats, so that when you render them you can simply call /[path to asset]/[Blob property name]. So, if you had a small media format, mapped to a "Small" property blob on the content model, you could simply call /[path to asset]/Small to get the small media format. In fact, the default Image class contains both Small, Medium and LargeThumbnail, just as the default Video contains "Preview" (lightweight version of the video), "Poster" (it's a full size single frame) and an "ImagePreview".

There are also some hardcoded options you can add to the URL, namely:

• "/Download" to download the asset.
• "/Source" to fetch the original source of the asset. This comes in handy when using SVG logos, where you typically want the source, rather than an image format.

It's also possible to specify the media format id directly by adding a url parameter called "mediaformatid", E.g. /globalassets/en/digizuite/5272-blueberry.jpg?mediaformatid=50034.

Extension Methods

To make it both faster and easier to generate the urls needed, we have added a few useful helper methods.

Getting the right media format

To fetch the right media formats we have created some extension methods that come in handy.

• formatid: 50034 | 50035 | 50036 | 50037

• formatname: Big | Medium | Small | Transparent

• tagging: span12 | span8 | span6 | span4

• Default media format: image = 50034, video = 50040

1. Through the MediaFormat pass as parameter to extension
2. Through the MediaFormat attribute on the content model
3. Through tagmapping pass as parameter to extension (in our example case, there is a rule set up in initialization that if the rendering tag is "span4" then it should use mediaformat small for images)
4. If nothing is defined we fall back to the default mediaformat (which should be configurable - and can vary based on file type)

ContentReference extension

The extension above also comes in a similar version for ContentReference - so if you have a contentreference to an asset, you can use it to get the url - either with a format ID, a format Name or a tag:

public static string DigizuiteMediaUrl(this ContentReference contentReference, object additionalParam = null)

Retrieving a Crop

Likewise, you might need to find a specific cropped version on an asset in code, and using this code you can do just that: