Customising Umbraco's Default Grid Editors

  1. Create a new directory in App_Plugins called anything you like.  This will be your “package” directory
  2. 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
  3. Create a package.manifest file and put this in it (come back and modify these properties as necessary):

    “name”: “Speaker Portrait”,
    “alias”: “speakerPortrait”,
    “view”: “media”,
    “render”: “/app_plugins/yourpackagedir/MediaMarkup.cshtml”,
    “icon”: “icon-picture”,
    “style”: “height:270px; width:187px”,
    “markup”: “"<a class='image featured’>#value#</a>““
  4. Find the .cshtml file for the editor you’re modifying in \Views\Partials\Grid\Editors and copy it into your package directory
  5. 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.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);

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