DFO 3.0.0 - 7 Dealing with Media Formats and Rendering Tags
Digizuite DAM offers a number of different media formats of each asset. These are generated as soon as the asset exist in the DAM and are defined in the DAM Center. The default url for a digizuite media will server the original source. Out of the box the Digizuite media types will have a preview and a thumbnail quality, which you append to the url like this, /globalassets/digizuite/3260-parrot.jpg/preview. This will serve the preview format.
But, sometimes these qualities are not enough for what you are trying to accomplish in your design - or perhaps the visitor is using a mobile device with smaller screen and/or bandwidth than a desktop. Sure, you can setup the proper stylesheets to scale the media assets to your liking, but you'll still be faced with the issue that the scaling happens client side, so the client still has to fetch a rather large image from the server hosting the web site - putting pressure on both the server, the client and the connection between them with a potentially slow experience as the result.
The recommended approach is to ensure - as a developer - that you are always requesting the best media format for the specific placement of an asset.
One way to achieve this is by writing it directly in the code that fetches the images - for example by using one of the Rendering overloads described here: DFO 3.0.0 - 4 Referencing and Rendering Assets.
That will work well, for any case where you are specifically outputting a specific asset. But sometimes it's more tricky that - for example when you use a Content Area. If for example, an image is dragged into a Content Area, then typically the editor can choose between certain display options in Optimizely - for example "Full", "Narrow" and "Wide" - but sometimes even more. Or maybe the entire Content Area is in a sidebar that is always narrow.
Optimizely has a clever solution to this with "Rendering Tags".
For example, an entire ContentArea can have a specific rendering tag - as this "Sidebar" on the Alloy product page:
@Html.PropertyFor(x => x.CurrentPage.RelatedContentArea, new { CssClass = "row", Tag = Global.ContentAreaTags.OneThirdWidth })
It is, in fact the same kind of rendering tags that are applied, when an editor decides on a specific Display Mode.
To support the rendering tags, the integration comes with a TagMapper - a singleton class that keeps track of which rendering tags maps to which media format.
As an example, here we've modified the DisplayRegistryInitialization class in a standard Alloy site - where usually only the display modes are configured, to also map the media formats:
[InitializableModule]
[ModuleDependency(typeof(EPiServer.Web.InitializationModule),typeof(Digizuite.Episerver.DigizuiteProviderInit))]
public class DisplayRegistryInitialization : IInitializableModule
{
public void Initialize(InitializationEngine context)
{
if (context.HostType == HostType.WebApplication)
{
// Register Display Options
var options = ServiceLocator.Current.GetInstance<DisplayOptions>();
options
.Add("full", "/displayoptions/full", Global.ContentAreaTags.FullWidth, "", "epi-icon__layout--full")
.Add("wide", "/displayoptions/wide", Global.ContentAreaTags.TwoThirdsWidth, "", "epi-icon__layout--two-thirds")
.Add("narrow", "/displayoptions/narrow", Global.ContentAreaTags.OneThirdWidth, "", "epi-icon__layout--one-third");
AreaRegistration.RegisterAllAreas();
//Map the tags to Digizuite media formats
var mapper = context.Locate.Advanced.GetInstance<TagMapper>();
mapper.AddMediaFormatMapping(Global.ContentAreaTags.OneThirdWidth, "Small", 10);
mapper.AddMediaFormatMapping(Global.ContentAreaTags.TwoThirdsWidth, "Medium", 10);
}
}
public void Preload(string[] parameters){}
public void Uninitialize(InitializationEngine context){}
}
This will ensure that that whenever the 'Narrow' (=1/3 width) display mode or rendering tag is engaged, we'll render all images as "Small", and if 'Wide' (=2/3's width) is active we will use the Medium media format.
It is of course also possible to use the media format ID's as they appear in the DAM center. The number at the end is the priority, in case of multiple conflicting rules, e.g. you have one rule based on a mobile device related rendering tag and another rule based on a specific location - then the priority will decide which is followed.
XHTML Properties
This leaves us with only one place where we cannot control the media format selection - and that is the xhtml properties, where typically the editors can easily insert images directly from Digizuite. The solution in that case is an extension to TinyMCE that allows the editors to pick the desired media format, after an image is inserted.
