Create ready block

Following this instruction's steps, you can create a new banner with the video on the background. You can recreate this block using the code snippets provided in the guide, or modify the steps to tailor it to your specific needs.

Expected result

Your Headline

Your subtitle

In order to create a new banner, for example, Banner With Video, we need a back office view, a controller, and a front view

Step 1. Basic changes to the code

Open the project folder
Open the “App_Plugins” folder
Create a folder for custom layouts, for example, name “CustomBlockView”. If you already have this folder, please open it.
In the folder create a test document named “bannerWithVideoBlock.html”
Please copy the following code and paste it into the file

<style>
    slot {
        cursor: initial;
        user-select: auto;
        --umb-block-grid--text-color: #fff;
        --umb-block-grid--text-color-hover: #9fbfff;
    }
</style>
<div class="section-hero" data-bs-theme="light" ng-style="{
    '--bs-btn-primary-color': '#' + style.button.text,
    '--bs-btn-primary-bg': '#' + style.button.fill,
    '--bs-btn-primary-border-color': '#' + style.button.stroke,
    '--bs-btn-primary-hover-color': '#' + style.button.textHover,
    '--bs-btn-primary-hover-bg': '#' + style.button.fillHover,
    '--bs-btn-primary-hover-border-color': '#' + style.button.strokeHover,

    '--bs-btn-primary-outline-color': '#' + style.buttonSecondary.text,
    '--bs-btn-primary-outline-border-color': '#' + style.buttonSecondary.stroke,
    '--bs-btn-primary-outline-hover-color': '#' + style.buttonSecondary.textHover,
    '--bs-btn-primary-outline-hover-bg': '#' + style.buttonSecondary.fillHover,
    '--bs-btn-primary-outline-hover-border-color': '#' + style.buttonSecondary.strokeHover,

    '--bs-heading-h1-color': '#' + style.content.h1,
    '--bs-heading-h2-color': '#' + style.content.h2,
    '--bs-heading-h3-color': '#' + style.content.h3,
    '--bs-heading-h4-color': '#' + style.content.h4,
    '--bs-heading-h5-color': '#' + style.content.h5,
    '--bs-heading-h6-color': '#' + style.content.h6,
    '--bs-border-color': '#' + style.content.border,
    '--bs-body-color': '#' + style.content.border,
     color: '#' + style.content.primary,
     '--bs-link-color': '#' + style.content.link,
     '--bs-link-hover-color': '#' + style.content.linkHover,
     '--bs-body-bg-rgb': '#' + style.content.background,
    'background-color': '#' + style.content.background}" ng-controller="bannerWithVideoBlockController" ng-click="block.edit()" ng-focus="block.focus">
    <style ng-include="'/App_Plugins/UmbracoBlockGrid/BlockViews/css/design.css'">
</style>
    <div class="license-message" ng-if="!licenseIsValid">
        <div class="license-block">
            <div class="img-holder">
                <img src="/App_Plugins/UmbracoBlockGrid/GlobalDesign/img/icon-calendar.svg" alt="...">
            </div>
            <div ng-bind-html="message | safe_html" class="content-holder"></div>
        </div>
    </div>
    <div class="py-4 d-flex flex-column align-items-center justify-content-center text-center position-relative text-white" style="min-height: 100vh;">
        <div class="container position-relative z-3">
            <div class="row justify-content-center">
                <div class="col-md-10 col-lg-7">
                    <h1 class="h1">
                        {{block.data.headline}}
                    </h1>
                    <umb-block-grid-render-area-slots ng-click="$event.stopPropagation()"></umb-block-grid-render-area-slots>
                </div>
            </div>
        </div>
        <div class="bg-black position-absolute top-0 start-0 object-fit-cover w-100 h-100 z-2 opacity-75"></div>
        {{mediaItem = (block.data.video[0].mediaKey | mediaItemResolver); ""}}
        <video ng-src="{{mediaItem.mediaLink}}" class="position-absolute top-0 start-0 object-fit-cover w-100 h-100 z-1" muted autoplay></video>
    </div>
</div>

6. Create a test document named “bannerWithVideoBlock.controller.js”
7. Copy the following code and paste it into the file

angular.module("umbraco").controller("bannerWithVideoBlockController", function ($scope, globalDesignService, licensesService, editorState) {
    $scope.licenseIsValid = true;
    $scope.message = "";

    licensesService.checkTrialForm().then(function (isSubmitted) {
        if (isSubmitted) {
            licensesService.checkLicense().then(function (isValid) {
                $scope.licenseIsValid = isValid;
                if (!isValid) {
                    $scope.message = licensesService.getExpiredText();
                }
            });
        }
    });

    const updateStyles = (elementType) => {
        globalDesignService.getDesignSettings(editorState.getCurrent().id).then(function (design) {
            $scope.design = design;
            $scope.$watch('block.data.backgroundColor', function (newValue) {
                $scope.style = design.getStyle(newValue);
            });

            const getFontStyles = (elementType) => {
                return `    
                    font-size: ${design.typography[elementType].desktop}px;  
                    font-family: ${design.typography[elementType].font.fontFamily}, ${design.typography[elementType].font.fontCategory};  
                    font-weight: ${design.typography[elementType].font.fontWeight};  
                    font-style: ${design.typography[elementType].font.fontStyle};  
                `;
            };

            $scope.styles = ` 
                .section-hero-1{
                    font-family: ${design.typography.text.font.fontFamily};
                    color: #${design.baselineColors.content.text};
                    ${getFontStyles(elementType)};
                }
                
                .section-hero-2{
                    font-family: ${design.typography.text.font.fontFamily};
                    color: #${design.baselineColors.content.text};
                    ${getFontStyles(elementType)};
                }

                .section-hero-3{
                    font-family: ${design.typography.text.font.fontFamily};
                    color: #${design.baselineColors.content.text};
                    ${getFontStyles(elementType)};
                }


                h1, .h1 {  ${getFontStyles('h1')} }
                h2, .h2 {  ${getFontStyles('h2')} }
                h3, .h3 {  ${getFontStyles('h3')} }
                h4, .h4 {  ${getFontStyles('h4')} }
                h5, .h5 {  ${getFontStyles('h5')} }
                h6, .h6 {  ${getFontStyles('h6')} }

                .lead-lg{
                    font-size: ${design.typography.text.desktop + 4}px;  
                }

                .lead-md{
                    font-size: ${design.typography.text.desktop}px;  
                }

                .lead-sm{
                    font-size: ${design.typography.text.desktop - 2}px;  
                }
                
             
                ${elementType}, .${elementType} { ${getFontStyles(elementType)} }  

                `;
        });
    };
});

8. Go to the Umbraco website
9. Create a text document named “package. manifest” in the “CustomBlockView” folder. If you already have this document, please open it.
10. Add the following JSON to the package.manifest file:

{
  "javascript": [
    "~/App_Plugins/CustomBlockView/bannerWithVideoBlock.controller.js"    
  ]  
}

11. Restart the project to start the controller.

Step 2. How to create a layout in Umbraco

1. Run your project locally where the “ByteEditor Site Builder 1.X” package is installed, and open the Umbraco back office.
2. Open the tab “Settings”.
3. Expand the Document Types folder. Expand the Blocks Folder.
4. Hover over the "Ready Layout Blocks" folder in the content tree you will see this icon '...'. Click the icon '...'.
5. Click the “Create” button.
6. Select “Element type” from the list.
7. Name the "Banner With Video" block.
8. Add an icon for the layout.
9. On the right side, next to the “lock” icon, change the text from “bannerWithVideo” to “bannerWithVideoBlock”.
10. Click on the "Add group" button
11. Name the group “Content”
12. Click on the "Add property" button
13. Name the property “Headline”
14. Click on the "Select editor" button
15. Select “Textbox” from the list. Then select "Text string"
16. Click on the "Submit" button
17. Make the Field mandatory by clicking on the corresponding toggle button on the Property Settings screen.
18. Click on the "Submit" button

19. Click on the "Add property" button
20. Name the property “Video”
21. Click on the "Select editor" button
22. Select “Media Picker” from the list. Then select the configuration called "Video - Image - Media Picker"
23. Click on the "Submit" button

24. On the right side of the screen, find the “Compositions” button and click on it.
25. Scroll to the “/Blocks/Compositions/” block
26. Select the “Section Margins” and “Section Settings” checkboxes
27. Click on the "Submit" button
28. Click on the "Save" button

Step 3. How to create a front end view of the Ready Block

Expand the "Partial Views" folder.
Expand the "blockgrid" folder.
If you hover over the "Components" folder in the content tree, you will see this icon: '...'. Click the icon.
Click the "Create" button.
Select “New empty partial view” from the list.
In the name field, write “BannerWithVideoBlock.cshtml”
Please copy the following code and paste it into the file

@using PageBuilder.Core.Infrastructure.Helpers
@using Umbraco.Cms.Core.Models
@inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage<Umbraco.Cms.Core.Models.Blocks.BlockGridItem<BannerWithVideoBlock>>
@{
    var design = ViewData["Design"] as Design;
    var style = DesignHelper.GetBackgroundColor(Model.Content.BackgroundColor, design?.BaselineColors, design?.Styling);
    var video = Model.Content.Video;
}
<div class="section-hero" style="
--bs-btn-primary-color: @style.Button.Text;
--bs-btn-primary-bg: @style.Button.Fill;
--bs-btn-primary-border-color: @style.Button.Stroke;
--bs-btn-primary-hover-color: @style.Button.TextHover;
--bs-btn-primary-hover-bg: @style.Button.FillHover;
--bs-btn-primary-hover-border-color: @style.Button.StrokeHover;

--bs-btn-primary-outline-color: @style.ButtonSecondary.Text;
--bs-btn-primary-outline-border-color: @style.ButtonSecondary.Stroke;
--bs-btn-primary-outline-hover-color: @style.ButtonSecondary.TextHover;
--bs-btn-primary-outline-hover-bg: @style.ButtonSecondary.FillHover;
--bs-btn-primary-outline-hover-border-color: @style.ButtonSecondary.StrokeHover;

--bs-body-color: @style.Content.Primary;
--bs-secondary-color: @style.Content.Secondary;
--bs-link-color: @style.Content.Link;
--bs-link-hover-color: @style.Content.LinkHover;
--bs-body-bg-rgb:  @style.Content.Background;
--bs-border-color: @style.Content.Border;
--bs-heading-h1-color: @style.Content.H1;
--bs-heading-h2-color: @style.Content.H2;
--bs-heading-h3-color: @style.Content.H3;
--bs-heading-h4-color: @style.Content.H4;
--bs-heading-h5-color: @style.Content.H5;
--bs-heading-h6-color: @style.Content.H6;
color: var(--bs-body-color);
background-color: @style.Content.Background">
    <div class="py-4 d-flex flex-column align-items-center justify-content-center text-center position-relative text-white" style="min-height: 100vh;">
        <div class="container position-relative z-3">
            <div class="row justify-content-center">
                <div class="col-md-10 col-lg-7">
                    <h1 class="h1">@Model.Content.Headline</h1>
                    @if (Model.Areas.Any(a => a.Any()))
                    {
                        @await Html.GetBlockGridItemAreasHtmlAsync(Model)
                    }
                </div>
            </div>
        </div>
        <div class="bg-black position-absolute top-0 start-0 object-fit-cover w-100 h-100 z-2 opacity-75"></div>
        @if (video is not null)
        {
            <video class="bg-black position-absolute top-0 start-0 object-fit-cover w-100 h-100 z-2 opacity-75" muted autoplay src="@video.Url()"></video>
        }
    </div>
</div>

7. Click on the "Save" button
8. Restart the project

Step 4. How to add Ready Block to the Block Grid

Open the Block Grid page
Click on the “Content” block
Click the "Edit" button for "Home - Main Grid - Block Grid"
Scroll to Ready Layout Blocks section
Click the “Add block” button
Choose "Banner With Video" from the list
Activate "Allow in the root"
Make the “Allow in areas” field inactive.

Click the " Areas" button on the top right corner
Enter 6 in the "Grid Columns for Areas"
Click the " Add" button for the Areas block
For the “Alias” field, enter “hero”
Click on the "Submit" button
Specify the width of “12 columns” - full area width
Add the path to the .html file for the Custom view field

~/App_Plugins/CustomBlockView/bannerWithVideoBlock.html
Add the path to the .css file for the “Custom stylesheet” field

~/css/index.min.css
Save your changes

Congratulations!

You have created your first Ready Blocks. Now you can add it to your design.

ByteEditor Website Builder