Versions Compared

Version Old Version 1 New Version Current
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 : IInitializableModuleIConfigurableModule
    {
   
    public void Initialize(InitializationEngine context)
        {
            if (context.HostType == HostType.WebApplicationConfigureContainer(ServiceConfigurationContext context)
            {
  
             // 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 tags toAdd Digizuite mediatag formatsMapping
                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.

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.

Image Removed