Versions Compared

Version Old Version 1 New Version 2
Changes made by

Brian Bak Laursen (Unlicensed)

Martin Ulisse

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

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

...

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 Optimizely's 'own' media, the Digizuite folders will be available below the Digizuite folder (a name that can be customized in configuration.

...

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 Optimizely's rendering tags - just like the default controllers above takes into consideration. Read more about the rendering tags here: DFE 3.0.0 - 7 Dealing with Media Formats and Rendering Tags

...

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 | Transparent
e.g. <img src="@Url.DigizuiteMediaUrl(Model.CurrentPage, x => Model.CurrentPage.ImageFormatMedium, "medium")" />
  • 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, video = 50040
e.g. <img src="@Url.GetMediaUrl(Model.CurrentPage, x => Model.CurrentPage.ImageFormatBig)" />
Priority to get specific media format
  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)


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;

...

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 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)" />