DFO 4.0.0 - 6 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 4.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 CustomizedRenderingInitialization class in a standard Alloy .net 6 site - where usually only the display modes are configured, to also map the media formats:

[ModuleDependency(typeof(InitializationModule))]
public class CustomizedRenderingInitialization : IConfigurableModule
{
    public void ConfigureContainer(ServiceConfigurationContext context)
    {
        // Implementations for custom interfaces can be registered here.
        context.ConfigurationComplete += (o, e) =>
            // Register custom implementations that should be used in favour of the default implementations
            context.Services.AddTransient<IContentRenderer, ErrorHandlingContentRenderer>()
                .AddTransient<ContentAreaRenderer, AlloyContentAreaRenderer>();

    }

    public void Initialize(InitializationEngine context)
    {
        context.Locate.Advanced.GetInstance<ITemplateResolverEvents>().TemplateResolved += TemplateCoordinator.OnTemplateResolved;

        // Add Digizuite tag Mapping
        var mapper = context.Locate.Advanced.GetInstance<TagMapper>();
        mapper.AddMediaFormatMapping(Globals.ContentAreaTags.NarrowWidth, "Thumbnail", 10);
    }

    public void Uninitialize(InitializationEngine context)
    {
        context.Locate.Advanced.GetInstance<ITemplateResolverEvents>().TemplateResolved -= TemplateCoordinator.OnTemplateResolved;       
    }
}

This will ensure that whenever the 'Narrow' (=1/3 width) display mode or rendering tag is engaged, we'll render all images as "Thumbnail".

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.