Assets from Digizuite can be rendered like any other assets in Optimizely either in Content Areas (using the included default controllers) or in XHTML properties or properties are either of the type ContentReference or Url.
...
As mentioned in the chapter DFO 4.0.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"Thumbnail and Preview.
There are also some hardcoded options you can add to the URL, namely:
...
To fetch the right media formats we have created some extension methods that come in handy.
UrlHelper extension
We have extended the UrlHelper in MVC, so you can easily in your razor templates use it, not only to get the ContentUrl, but also to get the url to an asset with the proper media format.
public static string DigizuiteMediaUrl(this UrlHelper urlHelper, IContentData model, Expression<Func<IContentData, ContentReference>> propertyExpression, object additionalParam = null)
The additionalParam can be a
formatid: 50034 | 50035 | 50036 | 50037
e.g. <img src="@Url.DigizuiteMediaUrl(Model.CurrentPage, x => Model.CurrentPage.BannerImage, 50034)" />
formatname: Big | Medium | Small | TransparentThumbnail | Preview
e.g. <img src="@Url.DigizuiteMediaUrl(Model.CurrentPage, x => Model.CurrentPage.ImageFormatMedium, "mediumPreview")" />
tagging: span12 | span8 | span6 | span4
e.g. <img src="@Url.DigizuiteMediaUrl(Model.CurrentPage, x => Model.CurrentPage.MainImage, Global.ContentAreaTags.OneThirdWidth)" />
Default media format: image = 50034 3, video = 50040 10079
e.g. <img src="@Url.GetMediaUrl(Model.CurrentPage, x => Model.CurrentPage.ImageFormatBig)" />
Priority to get specific media format
Through the MediaFormat pass as parameter to extension
Through the MediaFormat attribute on the content model
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)
If nothing is defined we fall back to the default mediaformat (which should be configurable - and can vary based on file type)
As site As site developer we can get media url via content reference extension where the format return base on name, id or tagging
public static string DigizuiteMediaUrl(this ContentReference contentReference, object additionalParam = null)
e.g.
var tag = ControllerContext.ParentActionViewContext.ViewData["tag"] as string;
string ub = currentContent.ContentLink.DigizuiteMediaUrl(tag);
Optimizely UrlExtensions
If you use the default Optimizely url extension like this @Url.ContentUrl(@Model.DemoImage). It will render a url like this /globalassets/en/digizuite/5272-blueberry.jpg. This will return the default format.
ContentReference extension
...
Likewise, you might need to find a specific cropped version on an asset in code, and using this code you can do just that:
public static ContentReference GetCrop(this ContentReference contentReference, string cropName)
e.g. <img src="@Url.ContentUrl(Model.CurrentPage.ImageFormatSmall.GetCrop("banner"))" />
Combine Combine get crop and media format by Name, Id or a tagging
e.g. <img src="@Model.CurrentPage.ImageFormatSmall.GetCrop("square").DigizuiteMediaUrl("Small")" />
e.g. <img src="@Model.CurrentPage.ImageFormatSmall.GetCrop("square").DigizuiteMediaUrl(50036)" />