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:
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:
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)
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+
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.
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?
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.
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.
I think I understand now. I would suggest the following approach:
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.
Add some content, view a page and Identify what you want to change in the output HTML markup.
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.
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
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.
I would suggest adding an HTML comment to each of the views to check you are now rendering the views from this new folder.
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.
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.