Custom Preview for Block Grid.

Questions
1

Hello, I’m new in the Umbraco world, and I’m trying to build a pet project.
I’m using Umbraco 13 for my project. I created a block grid for the section. In the block grid I define 3 areas column1, column2 and column3. I want to build a custom preview in the back office for the section with the possibility to place areas in places where I want them in my layout. Is it possible to do. Could not find any information about this.
For example, like this:

<div class="custom-block">
    <div class="area column1">
        <h3>Column 1</h3>
        <umb-block-grid-render-area area="column1"></umb-block-grid-render-area>
    </div>
    <div class="area column2">
        <h3>Column 2</h3>
        <umb-block-grid-render-area area="column2"></umb-block-grid-render-area>
    </div>
    <div class="area column3">
        <h3>Column 3</h3>
        <umb-block-grid-render-area area="'column3"></umb-block-grid-render-area>
    </div>
</div>
2

Hi Serhiybo,

The Block Grid page in the documentation give a great overview of all the layers involved.

In terms of a custom back office block preview though there are two choices:

  1. Implement the standard Umbraco approach which is outlined in the Custom View page and involves creating an Angular view (This will need to be changed when upgrading to anything v14+, so is not a future proofed solution)
  2. Use the Block Preview community package. This uses the same razor views that render the frontend of the website for the back office previews. This is particularly worthwhile if you have many block types to render as you don’t need to maintain two views for each and it is a more future proofed approach with an upgrade to v14+
3

Thanks for the answer Matt. I understand that we can use Block Preview community package but is didn’t match my requirements. So I want to build custom layout for the Block and I want to place area inside of this layouts. is it even possible? Because I tried already everything and it does not work. In Question I shared the code for example I need.

4

Do you mean that you are nesting the blocks? So the item with the custom-block class is a block and that block contains three other blocks with the area columnx classes?

5

I need to create section Block. This block will have areas (column1, column2, column3) where I will insert other blocks (image, rich text etc.) But I want for the section block have custom layout. Not use build in Areas size. I want to place Areas in different places in my layout.

6

Okay, do you have this rendering correctly in the front-end of the website Serhiybo?

7

Here is simple example

@inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage<Umbraco.Cms.Core.Models.Blocks.BlockGridItem>
@using Umbraco.Community.BlockPreview.Extensions
@{
    if (Model?.Areas.Any() != true) { return; }
}


    <div class="col-lg-4 mb-5 mb-lg-0">
        <span>1st colum</span>
        @await Html.GetPreviewBlockGridItemAreaHtmlAsync(Model.Areas.ElementAt(0))
         
    </div>
    <div class="col-lg-4 mb-5 mb-lg-0">
        <span>2nd colum</span>
        @await Html.GetPreviewBlockGridItemAreaHtmlAsync(Model.Areas.ElementAt(1))
       
    </div>
    <div class="col-lg-4 mb-5 mb-lg-0">
        <span>3rd colum</span>
        @await Html.GetPreviewBlockGridItemAreaHtmlAsync(Model.Areas.ElementAt(2))
        
    </div>

BlockPreview model render all area under first column. I need to render each area in specified column. I could not do thhi not with block preview not with custom preview.

8

I think I understand now. I would suggest the following approach:

  1. Get the editor experience correct for managing the blocks in the back-office, even if the output HTML is initially not what you want, make sure the editor sees the correct layout.
  2. Add some content, view a page and Identify what you want to change in the output HTML markup.
  3. Compare the HMTL to the views in the Views/Partials/blockgrid folder (this is what Umbraco is using to render the entire block grid) . This should help you to understand which level is rendering the markup you want to adjust.
  4. Create a new folder myBlockgrid folder (or whatever it should be called) at the same level as the blockgrid folder and copy the views from the blockgrid folder into it
  5. In your page template where you have @await Html.GetBlockGridHtmlAsync(Model, "myGrid") add an extra string parameter with the path to your new default view.
  6. I would suggest adding an HTML comment to each of the views to check you are now rendering the views from this new folder.
  7. Add you own custom logic to any of those 4 views to adjust the output HTML to your needs. You’ll still have the standard Umbraco originals to refer to and can easily switch back and forth by removing or adding the path.

I hope you find a solution with this approach

9

Thank for remained me that Umbraco render allot of his staff in HTML. Also I install Block Grid Example and I see that Inspiration Block do the staff which I need (render area in specific place in HTML). So I hope I could move from here. At least have few idea to try.

Thanks again.

1 Like
10

If you are using CSS Grid then you can have a custom stylesheet with a different layout.

1 Like