errata release 15.3.0‐beta - idseefeld/Wysiwg.Umbraco.Community.Extensions GitHub Wiki

These are the correct steps for getting started:

Installation

Add the package to an existing Umbraco website (v15+) from nuget:

dotnet add package Umbraco.Community.wysiwgUmbracoCommunityExtensions

Currently you need to manually setup the Block Grid views in the backoffice. This will be automated in a future release: While debuging your website call /umbraco/swagger and choose from the dropdown wysiwgUmbraco Community Extensions Backoffice API, authorize (in the popup leave client_secret blank) and click Try it out and Execute buttons in the install panel. This should respond with status 200: "Installed"
Screenshot: swagger dashboard

Now go to the settings section of the backoffice and you should find new Document and Data types:

Screenshot: document and data types

Before you proceed in your IDE, you should create a "Simple Page" document type with template with.
Add property "Grid", select property editor "Block Grid" and configuration "wysiwg65_BlockGrid". Choose Label above in the appearance section.
Allow the page at root.

Finally build the typed models with ModelsBuilder.
Otherwise you will get an compile time error regarding 'Umbraco.Cms.Web.Common.PublishedModels.SimplePage' when you use the following markup.

CSS & HTLM

In your IDE (e.g. Visual Studio) you should find the file \Views\SimplePage.cshtml which will not do much in its initial state. An example markup for the page could be:

@using Umbraco.Cms.Web.Common.PublishedModels;
@inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage<SimplePage>
@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <title>Simple Page</title>

    <link rel="shortcut icon" type="image/png" href="/favicon.png" />

    <link href="~/styles/customblockgrid.min.css" rel="stylesheet" />

    <style>
        figure{
            margin: 0
        }
        figure img{
            width: 100%;
        }
        body, html{
            margin: 0;
        }
        #canvas{
            max-width: 1200px;
            margin: 0 auto;
        }
    </style>
</head>
<body id="top">
    <div id="canvas">
        @await Html.GetBlockGridHtmlAsync(Model.Grid)

        <footer>
            <a href="/umbraco" target="_blank">backoffice</a>
        </footer>

    </div>
</body>
</html>

Currently the Crop Alias Dropdown on the Picture with Crop Block Grid element is configured with data type wysiwg65_CropNames and correspond with the crops defined on data type wysiwg65_ImageMediaPicker. You can change the values and add more crops. There are known issues with Original [none] option, as it will be rendered only in backoffice and you need to configure the same crops on data type Image Cropper (or the cropper used on Image media type)

The referenced customblockgrid.min.css could be extracted from the backoffice data type: Screenshot: wysiwg65_BlockGrid data type

Just click the Link to default layout stylesheet and copy the content into file wwwroot/styles/customblockgrid.min.css.

⚠️ **GitHub.com Fallback** ⚠️