Versions Compared

Version Old Version 5 New Version 6
Changes made by

Martin Ulisse

Martin Ulisse

Saved on

Key

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

...

It is, in fact the same kind of rendering tags that are applied, when an editor decides on a specific Display Mode.Image Removed

...


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

Code Block
languagec#
    [InitializableModule]
    [ModuleDependency(typeof(EPiServer.Web.InitializationModule),typeof(Digizuite.Episerver.DigizuiteProviderInit))]
  
 public class DisplayRegistryInitializationCustomizedRenderingInitialization : IInitializableModule
   IConfigurableModule
{
   
    public void InitializeConfigureContainer(InitializationEngineServiceConfigurationContext context)
 
      {
            if (context.HostType == HostType.WebApplication)
            {
                // RegisterImplementations Displayfor Optionscustom interfaces can be registered here.
           var options = ServiceLocator.Current.GetInstance<DisplayOptions>();
context.ConfigurationComplete += (o, e) =>
            // Register custom optionsimplementations that should be used in favour of the default implementations
          .Add("full", "/displayoptions/full", Global.ContentAreaTags.FullWidth, "", "epi-icon__layout--full")
    context.Services.AddTransient<IContentRenderer, ErrorHandlingContentRenderer>()
                .Add("wide", "/displayoptions/wide", Global.ContentAreaTags.TwoThirdsWidth, "", "epi-icon__layout--two-thirds")AddTransient<ContentAreaRenderer, AlloyContentAreaRenderer>();

    }

    public         .Add("narrow", "/displayoptions/narrow", Global.ContentAreaTags.OneThirdWidth, "", "epi-icon__layout--one-third");void Initialize(InitializationEngine context)
    {
            AreaRegistration.RegisterAllAreas();

      context.Locate.Advanced.GetInstance<ITemplateResolverEvents>().TemplateResolved += TemplateCoordinator.OnTemplateResolved;

        //Map the tagsAdd to Digizuite media formats
       tag Mapping
        var mapper = context.Locate.Advanced.GetInstance<TagMapper>();

               mapper.AddMediaFormatMapping(GlobalGlobals.ContentAreaTags.OneThirdWidthNarrowWidth, "SmallThumbnail", 10);
    }

    public      mapper.AddMediaFormatMapping(Global.ContentAreaTags.TwoThirdsWidth, "Medium", 10);void Uninitialize(InitializationEngine context)
    {
           
            }
        }

        public void Preload(string[] parameters){}
context.Locate.Advanced.GetInstance<ITemplateResolverEvents>().TemplateResolved -= TemplateCoordinator.OnTemplateResolved;       
 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 formatThumbnail".

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.