Display options for blocks

Vote:
 

I have added the code below in Global.asax but the icons and the text for the display options don't show and also their functionality don't work.

What else should I change and where?

var options = ServiceLocator.Current.GetInstance();

options
.Add("full", "/displayoptions/full", MyEPiServerSiteMVC2.Global.ContentAreaTags.FullWidth, "", "epi-icon__layout--full")
.Add("wide", "/displayoptions/wide", MyEPiServerSiteMVC2.Global.ContentAreaTags.TwoThirdsWidth, "", "epi-icon__layout--two-thirds")
.Add("narrow", "/displayoptions/narrow", MyEPiServerSiteMVC2.Global.ContentAreaTags.OneThirdWidth, "", "epi-icon__layout--one-third");

}

#133051
Aug 25, 2015 16:43
Vote:
 

Hi,

You could try to move your code from Global.asax into InitialozationModule

#133106
Aug 25, 2015 21:45
Vote:
 

Hi Angela,

Please find the steps below to implements display options for Content Areas.

Step1 

Add the below classes 

public class DisplayOptionWithCss : DisplayOption

{
public DisplayOptionWithCss() { }
public DisplayOptionWithCss(string id, string name, string tag, string iconClass, string cssClass)
{
this.Id = id;
this.Name = name;
this.Tag = tag;
this.IconClass = iconClass;
this.CssClass = cssClass;
}
public string CssClass { get; set; }
}

step2 

public class ContentAreaRendererWithDisplayOptionWithCss : ContentAreaRenderer
{
private readonly DisplayOptions _displayOptionsOwn;
private readonly IContentRepository _contentRepositoryOwn;
public ContentAreaRendererWithDisplayOptionWithCss()
: this(EPiServer.ServiceLocation.ServiceLocator.Current.GetInstance<IContentRenderer>(), EPiServer.ServiceLocation.ServiceLocator.Current.GetInstance<TemplateResolver>(), EPiServer.ServiceLocation.ServiceLocator.Current.GetInstance<ContentFragmentAttributeAssembler>(), EPiServer.ServiceLocation.ServiceLocator.Current.GetInstance<IContentRepository>(), EPiServer.ServiceLocation.ServiceLocator.Current.GetInstance<DisplayOptions>())
{
}
public ContentAreaRendererWithDisplayOptionWithCss(IContentRenderer contentRenderer, TemplateResolver templateResolver, ContentFragmentAttributeAssembler attributeAssembler, IContentRepository contentRepository, DisplayOptions displayOptions)
: base(contentRenderer, templateResolver, attributeAssembler, contentRepository, displayOptions)
{
_displayOptionsOwn = displayOptions;
_contentRepositoryOwn = contentRepository;
}

public string DefaultChildrenCssClass { get; set; }
protected override void RenderContentAreaItem(HtmlHelper htmlHelper, ContentAreaItem contentAreaItem, string templateTag, string htmlTag, string cssClass)
{
ViewContext viewContext = htmlHelper.ViewContext;
DefaultChildrenCssClass = viewContext.ViewData["defaultchildrencssclass"] as string;
IContent content = contentAreaItem.GetContent(this._contentRepositoryOwn);
if (content == null)
{
return;
}


//var templateModel = this.ResolveTemplate(htmlHelper, content, templateTag);

base.RenderContentAreaItem(htmlHelper, contentAreaItem, templateTag, htmlTag, " " + cssClass +Convert.ToString(content.Property["CssClass"].Value));


}

protected override string GetContentAreaItemTemplateTag(HtmlHelper htmlHelper, ContentAreaItem contentAreaItem)
{
DisplayOption displayOption = LoadDisplayOption(contentAreaItem);
if (displayOption != null && !string.IsNullOrEmpty(displayOption.Tag))
{
return displayOption.Tag;
}
return this.GetContentAreaTemplateTag(htmlHelper);
}

protected override void BeforeRenderContentAreaItemStartTag(System.Web.Mvc.TagBuilder tagBuilder, EPiServer.Core.ContentAreaItem contentAreaItem)
{
var displayOption = LoadDisplayOption(contentAreaItem) as DisplayOptionWithCss;

if (displayOption != null && !string.IsNullOrEmpty(displayOption.CssClass))
{
tagBuilder.AddCssClass(displayOption.CssClass);
if (displayOption != null)
tagBuilder.Attributes["data-displayOption"] = displayOption.Id;
}
else
AddNonEmptyCssClass(tagBuilder, DefaultChildrenCssClass);
}


protected DisplayOption LoadDisplayOption(ContentAreaItem contentAreaItem)
{
string displayOptionId = null;
if (contentAreaItem.RenderSettings != null && contentAreaItem.RenderSettings.ContainsKey(EPiServer.Core.Html.StringParsing.ContentFragment.ContentDisplayOptionAttributeName))
displayOptionId = "" + contentAreaItem.RenderSettings[EPiServer.Core.Html.StringParsing.ContentFragment.ContentDisplayOptionAttributeName];
if (string.IsNullOrEmpty(displayOptionId))
return null;
return _displayOptionsOwn.Get(displayOptionId);
}
}

step3

Intialization module

[InitializableModule]
[ModuleDependency(typeof(EPiServer.Web.InitializationModule))]
public class ContentAreaDisplayOptionInitialization : IInitializableModule
{
public void Initialize(InitializationEngine context)
{
//Add initialization logic, this method is called once after CMS has been initialized
var options = ServiceLocator.Current.GetInstance<DisplayOptions>();

options
.Add(new DisplayOptionWithCss(ContentAreaTags.Col20, "Full width", "", "col20 LayoutGrid","columns twenty"))
.Add(new DisplayOptionWithCss(ContentAreaTags.Col15, "75% width", "", "col15 LayoutGrid", "columns fifteen"))
.Add(new DisplayOptionWithCss(ContentAreaTags.Col14, "66% width", "", "col14 LayoutGrid", "columns fourteen"))
.Add(new DisplayOptionWithCss(ContentAreaTags.Col10, "50% width", "", "col10 LayoutGrid", "columns ten"))
.Add(new DisplayOptionWithCss(ContentAreaTags.Col6, "33% width", "", "col6 LayoutGrid", "columns six"))
.Add(new DisplayOptionWithCss(ContentAreaTags.Col4, "25% width", "", "col5 LayoutGrid", "columns five"));

}

public void Preload(string[] parameters) { }

public void Uninitialize(InitializationEngine context)
{
//Add uninitialization logic
}
public static class ContentAreaTags
{
public const string Col4 = "four";
public const string Col6 = "six";
public const string Col10 = "ten";
public const string Col14 = "fourteen";
public const string Col15 = "fifteen";
public const string Col20 = "twenty";
}
}

step4

Add the CSS styles in client resource  folder .

@media only screen and (min-width:768px) {
.columns {
margin-left: 1.0101%;
float: left;
}

.columns:first-child, .alpha {
margin-left: 0;
}

.one {
width: 4.0404%;
}

.two {
width: 9.09091%;
}

.three {
width: 14.14141%;
}

.four {
width: 19.19192%;
}

.five {
width: 24.24242%;
}

.six {
width: 29.29293%;
}

.seven {
width: 34.34343%;
}

.eight {
width: 39.39394%;
}

.nine {
width: 44.44444%;
}

.ten {
width: 49.49495%;
}

.eleven {
width: 54.54545%;
}

.twelve {
width: 59.59596%;
}

.thirteen {
width: 64.64646%;
}

.fourteen {
width: 69.69697%;
}

.fifteen {
width: 74.74747%;
}

.sixteen {
width: 79.79798%;
}

.seventeen {
width: 84.84848%;
}

.eighteen {
width: 89.89899%;
}

.nineteen {
width: 94.94949%;
}

.twenty {
width: 100%;
}
}

#133107
Aug 25, 2015 23:39
Vote:
 

If you are using Bootstrap v3 - this package may become handy. 

http://nuget.episerver.com/en/OtherPages/Package/?packageId=EPiBootstrapArea

#133164
Aug 26, 2015 21:32
* You are NOT allowed to include any hyperlinks in the post because your account hasn't associated to your company. User profile should be updated.