ByteEditor Site Builder

Wiki menu

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

Primary button Secondary button

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

  1. Open the project folder
  2. Open the “App_Plugins” folder
  3. Create a folder for custom layouts, for example, name “CustomBlockView”. If you already have this folder, please open it. 
  4. In the folder create a test document named “bannerWithVideoBlock.html”
  5. 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)} }  

                `;
        });
    };
});
Знімок Екрана 2024 10 29 201836

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.

Знімок Екрана 2024 10 29 201935

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

Знімок Екрана 2024 10 29 203107

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

Знімок Екрана 2024 10 29 210236

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

Знімок Екрана 2024 10 29 210700

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

  1. Expand the "Partial Views" folder.
  2. Expand the "blockgrid" folder.
  3. If you hover over the "Components" folder in the content tree, you will see this icon: '...'. Click the icon.
  4. Click the "Create" button.
  5. Select “New empty partial view” from the list.
  6. In the name field, write “BannerWithVideoBlock.cshtml”
  7. 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 

Знімок Екрана 2024 10 29 210046

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

  1. Open the Block Grid page
  2. Click on the “Content” block
  3. Click the "Edit" button for  "Home - Main Grid - Block Grid" 
  4. Scroll to Ready Layout Blocks section
  5. Click the “Add block” button 
  6. Choose "Banner With Video" from the list
  7. Activate "Allow in the root"
  8. Make the “Allow in areas” field inactive.
Знімок Екрана 2024 10 29 210336
  1. Click the " Areas" button on the top right corner
  2. Enter 6 in the "Grid Columns for Areas"
  3. Click the " Add" button for the Areas block 
  4. For the “Alias” field, enter “hero”
  5. Click on the "Submit" button
  6. Specify the width of “12 columns” - full area width
  7. Add the path to the .html file for the Custom view field 

    ~/App_Plugins/CustomBlockView/bannerWithVideoBlock.html

  8. Add the path to the .css file for the “Custom stylesheet” field 

    ~/css/index.min.css

  9. Save your changes 
Знімок Екрана 2024 10 29 210425

Congratulations!

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

Previous
Next
Built with ByteEditor