Specify the default display option globally

[JasonRodman]

I am looking for a simple way to set the display mode globally to a custom mode that disables the layout features. I have a need to do this since adding the current default messes up the design of our site, and it will take time to rework components to support it. In the meantime we want to opt-in to using the layout features one place at a time. The only way I could think of doing this was adding a "none" option that does not have any css class patterns, and I simply want to make it the default everywhere if possible. Any ideas how this can be done, or if a feature can be added?

[valdisiljuconoks]

Hi,

Just to rephrase to get an idea, you are looking for a way to add explicit "None" display option, this option does not add any CSS classes to the content area item wrapper element and make it default everywhere (in all content areas for newly added blocks)?

[JasonRodman]

Yes, that was the idea I had at the time. I just needed a way for the default to not add the css classes unless a specific layout option was chosen. I found a workaround for the moment. In an initialization module I turned off all the built in display options and then added them all back in, but changed the tag used for the full width option. This tricked your renderer into not putting the default full width css classes since the hard-coded default tag doesn't exist in the display options. So the "automatic" choice now behaves like this and worked beautifully without having to add an explicit "none" option. Its not ideal but it works for now.

[valdisiljuconoks]

great that you found workaround within existing functionality. default global display option is nice feature request anyways.

would you mind sharing your init module code?

[JasonRodman]

Yeah, that would be great coupled with a discreet "None" option that disables the css classes as well. I could not get a none option to work in my experimentation. I tried to set all the css patterns to empty strings but it ignored them. The closest I got was to setting all the width settings to zero, which didnt match up with any css styles and were ignored. Here is my init module code:

` ConfigurationContext.Setup(ctx => { ctx.DisableBuiltinDisplayOptions = true;

            // override display options so that the default is not full width
            // so we can avoid adding the bootstrap classes unless the user
            // specifically requests them to be added by choosing a size.
            ctx.CustomDisplayOptions.AddRange(new[]
            {
                new DisplayModeFallback
                {
                    Name = "Full width (1/1)",
                    Tag = ContentAreaTags.FullWidth + "-width", 
                    LargeScreenWidth = 12,
                    MediumScreenWidth = 12,
                    SmallScreenWidth = 12,
                    ExtraSmallScreenWidth = 12,
                    Icon = "epi-icon__layout--full"
                },
                new DisplayModeFallback
                {
                    Name = "Three quarters width (3/4)",
                    Tag = ContentAreaTags.ThreeQuartersWidth,
                    LargeScreenWidth = 9,
                    MediumScreenWidth = 6,
                    SmallScreenWidth = 12,
                    ExtraSmallScreenWidth = 12,
                    Icon = "epi-icon__layout--three-quarters"
                },
                new DisplayModeFallback
                {
                    Name = "Two thirds width (2/3)",
                    Tag = ContentAreaTags.TwoThirdsWidth,
                    LargeScreenWidth = 8,
                    MediumScreenWidth = 6,
                    SmallScreenWidth = 12,
                    ExtraSmallScreenWidth = 12,
                    Icon = "epi-icon__layout--two-thirds"
                },
                new DisplayModeFallback
                {
                    Name = "Half width (1/2)",
                    Tag = ContentAreaTags.HalfWidth,
                    LargeScreenWidth = 6,
                    MediumScreenWidth = 6,
                    SmallScreenWidth = 12,
                    ExtraSmallScreenWidth = 12,
                    Icon = "epi-icon__layout--half"
                },
                new DisplayModeFallback
                {
                    Name = "One third width (1/3)",
                    Tag = ContentAreaTags.OneThirdWidth,
                    LargeScreenWidth = 4,
                    MediumScreenWidth = 6,
                    SmallScreenWidth = 12,
                    ExtraSmallScreenWidth = 12,
                    Icon = "epi-icon__layout--one-third"
                },
                new DisplayModeFallback
                {
                    Name = "One quarter width (1/4)",
                    Tag = ContentAreaTags.OneQuarterWidth,
                    LargeScreenWidth = 3,
                    MediumScreenWidth = 6,
                    SmallScreenWidth = 12,
                    ExtraSmallScreenWidth = 12,
                    Icon = "epi-icon__layout--one-quarter"
                }
            });
        });`

[valdisiljuconoks]

v5.3 is on the way to the feed