One way would be to create a display template to render the content area.
"MyAreaDisplayName" relates to the name of the .cshtml file created.
If you need to do this I would suggest creating your own ContentAreaRenderer (if you haven't already) and overriding RenderContentAreaItem like this:
public class MyContentAreaRenderer : ContentAreaRenderer
{
protected override void RenderContentAreaItem(HtmlHelper htmlHelper, ContentAreaItem contentAreaItem, string templateTag, string htmlTag, string cssClass)
{
htmlHelper.RenderContentData(contentAreaItem.GetContent(), true, templateTag);
}
}
As a word of warning though - without the wrapping element, the editing UI isn't great (you can't drag blocks around, choose display options, etc.). The better option is to accept that there will be a wrapping element and add the appropriate classes to make it work with your front end.
As an alternative which keeps the edit functionality you might want to render the wrappers when in edit mode and remove them when the rest of the time like this:
protected override void RenderContentAreaItem(HtmlHelper htmlHelper, ContentAreaItem contentAreaItem, string templateTag, string htmlTag, string cssClass)
{
if (PageEditing.PageIsInEditMode)
{
base.RenderContentAreaItem(htmlHelper, contentAreaItem, templateTag, htmlTag, cssClass);
}
else
{
htmlHelper.RenderContentData(contentAreaItem.GetContent(), true, templateTag);
}
}
You'll still have issues though in that the rendering will be inconsistent between views so I'd still recommend trying to work with the wrapping elements if at all possible.
you can take a look at this package (it actually has almost nothing in common with Bootstrap anymore :) https://github.com/valdisiljuconoks/EPiBootstrapArea
Thanks Paul!
I rather like the opt in version Episerver already has implemented with HasContainer, so I made some changes.
public class CustomContentAreaRenderer : ContentAreaRenderer
{
protected override void RenderContentAreaItem(HtmlHelper htmlHelper, ContentAreaItem contentAreaItem, string templateTag, string htmlTag, string cssClass)
{
if (IsInEditMode(htmlHelper) || ShouldRenderChildrenWrappingElement(htmlHelper))
{
base.RenderContentAreaItem(htmlHelper, contentAreaItem, templateTag, htmlTag, cssClass);
}
else
{
htmlHelper.RenderContentData(contentAreaItem.GetContent(), true, templateTag);
}
}
protected virtual bool ShouldRenderChildrenWrappingElement(HtmlHelper htmlHelper)
{
bool? flag = (bool?)htmlHelper.ViewContext.ViewData["haschildrencontainer"];
return flag ?? true;
}
}
Usage:
@Html.PropertyFor(x => x.CurrentPage.ContentArea, new { HasContainer = false, HasChildrenContainer = false })
You can try this way:
1. Install package
PM > Install-Package EPiBootstrapArea
2. OR Render content area property like below:
@Html.PropertyFor(m => m.MyCOntentArea,
new
{
HasContainer = false,
HasItemContainer = false,
HasEditContainer = false
})
Hi all,
I am working with episerver 11 and following existing design from front-end dev. When I add block to content area, epi auto generate 2 div levels that break UI layout. I alreay know how to remove parent container when rending by using HasContainer property in view data but I still stuck for child containers. Is there anyway to remove them as well?
Any help would be appreciated.
Thank you