Piranha CMS block inside and outside container div - piranha-cms

Question

From code template we have:
<div class="block #block.CssName()">
<div class="container">
#Html.DisplayFor(m => block, block.GetType().Name)
</div>
</div>
it make my content block always inside container class. How to make a flexible page where we can put a block inside and outside container

Answer 1

You can check the block type and put a different class on the div besides "container" like this:
<!-- language: lang-razor -->
<div class="block #block.CssName()">
<div class="#(block.GetType().Name == "MySpecialBlock" ? "myspecialclass" : "container") ">
#Html.DisplayFor(m => block, block.GetType().Name)
</div>
</div>
or you can remove the div altogether:
<!-- language: lang-razor -->
<div class="block #block.CssName()">
#Html.DisplayFor(m => block, block.GetType().Name)
</div>
with the intention of editing each DisplayTemplate .cshtml file and add a wrapper div there. i.e. /Views/Cms/DisplayTemplates/HtmlBlock.cshtml :
<div class="myWrapperClass">
#Html.Raw(Model)
</div>
Note: If you did this, you'd probably want to edit each of the various block type templates to add a wrapper of some kind.
Another possibility would be to write a helper class that checks the block type and automatically returns a specific class depending on each block type.
using Piranha.Extend;
namespace MyProject.Classes
{
public static class Helper
{
public static string getWrapperCssClassForBlockType (Block block)
{
string blockName = block.GetType().Name;
string className = "";
switch(blockName)
{
case "HtmlBlock":
className = "row";
break;
case "QuoteBlock":
className = "myQuoteClass";
break;
default:
className = "container";
break;
}
return className;
}
}
}
Then just call the helper method from in your template(s):
#using MyProject.Classes;
#foreach (var block in Model.Blocks)
{
var wrapperClass = Helper.getWrapperCssClassForBlockType(block);
<div class="block #block.CssName()">
<div class="#wrapperClass">
#Html.DisplayFor(m => block, block.GetType().Name)
</div>
</div>
}

Answer 2

So finally i've made it by removing containerfrom template:
<div class="block #block.CssName()">
<!--<div class="container">-->
#Html.DisplayFor(m => block, block.GetType().Name)
<!--</div>-->
</div>
It make all standard block sit outside container. Next i made a group block of container. Any block can be inside this container group block except standard group block such as gallery and columns. Luckily it is open source, so we can make our own columns and gallery group block to be inside a container by modify cshtml template. I dont know how piranha.org do this
But i think my solve fit my purpose