Piranha CMS block inside and outside container div

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

Answer 3

Here's a solution, I'm building a big project and looks that if you want to customize, it's better to try modifying bootstrap things, and with an input field with the enum controll if full width or centered:

Models.CustomBlocks.CustomColumnBlock
@{
    var containerClass = Model.Width.EnumValue.ToLower() == "centered" ? "container" : "container-fluid";
    var background = Model.ColorMode.EnumValue.ToLower();
}

<section class="bg-@background position-relative m-0 px-0">
    <div class="@containerClass">
        <span class="position-absolute top-0 start-0 w-100 h-100 px-0"></span>
        <div class="bg-size-cover bg-repeat-0 bg-position-center position-relative pb-3 py-lg-4 py-xl-5 m-auto px-0"
            data-bs-theme="@Model.ColorMode.EnumValue.ToLower()">
            <div class="position-relative zindex-2 px-0">
                <div class="row align-items-center px-0 m-0">
                    @foreach (var item in Model.Items)
                    {
                        <div class="col-md m-4">
                            @Html.DisplayFor(m => item, item.GetType().Name)
                        </div>
                    }
                </div>
            </div>
        </div>
    </div>
</section>