Customising Umbraco's Default Grid Editors

Oct 19, 2016
mvc umbraco asp.net c-sharp
1 min read

Create a new directory in App_Plugins called anything you like. This will be your “package” directory
Copy the web.config file that’s inside the main “Views” directory (not your project’s main web.config!) into your package directory. This is needed for MVC to work properly

Create a package.manifest file and put this in it (come back and modify these properties as necessary):

{
 “gridEditors”:
 [{
  “name”: “Speaker Portrait”,
  “alias”: “speakerPortrait”,
  “view”: “media”,
  “render”: “/app_plugins/yourpackagedir/MediaMarkup.cshtml”,
  “icon”: “icon-picture”,
  “config”:
  {
   “style”: “height:270px; width:187px”,
   “markup”: “"<a class='image featured’>#value#</a>““
  }
 }]
}

Find the .cshtml file for the editor you’re modifying in \Views\Partials\Grid\Editors and copy it into your package directory

Edit that to add the functionality you want, I added “markup” to the media editor like so:

@model dynamic
@using Umbraco.Web.Templates

@if (Model.value != null)
{
    var url = Model.value.image;
    if(Model.editor.config != null && Model.editor.config.size != null){
        url += “?width=” + Model.editor.config.size.width;
        url += “&height=” + Model.editor.config.size.height;

        if(Model.value.focalPoint != null){
            url += “&center=” + Model.value.focalPoint.top +”,” + Model.value.focalPoint.left;
            url += “&mode=crop”;
        }
    }

    var element = $”<img src="{url}" alt="{Model.value.altText}">";
    string markup = Model.editor.config.markup.ToString();

    if (!markup.Contains("#value#"))
    {
        throw new Exception(“Error: markup not configured correctly”);
    }

    markup = markup.Replace("#value#", element);
    @Html.Raw(markup);

    if (Model.value.caption != null)
    {
        <p class="caption”>@Model.value.caption</p>
    }
}