A gist for using responsive images in Umbraco's grid editor

Base.cshtml

@model dynamic
@using Umbraco.Web.Templates

@functions {
    public static string EditorView(dynamic contentItem)
    {
        string view = contentItem.editor.render != null ? contentItem.editor.render.ToString() : contentItem.editor.view.ToString();
        view = view.ToLower().Replace(".html", ".cshtml");

        if (!view.Contains("/"))
        {
            view = "grid/NutritionEditors/" + view;
        }
        return view;
    }
}
@try
{
    string editor = EditorView(Model);
    <text>@Html.Partial(editor, (object)Model, new ViewDataDictionary { { "grid", Convert.ToInt32(ViewData["grid"]) } })</text>
}
catch (Exception ex)
{
<pre>@ex.ToString()</pre>
}

Bootstrap3.cshtml

@inherits UmbracoViewPage<dynamic>
@using Umbraco.Web.Templates
@using Newtonsoft.Json.Linq

@* 
    Razor helpers located at the bottom of this file
*@

@if (Model != null && Model.sections != null)
{
    var oneColumn = ((System.Collections.ICollection)Model.sections).Count == 1;
    
    <div class="umb-grid">
        @if (oneColumn)
        {
            foreach (var section in Model.sections) {
                <div class="grid-section">
                    @foreach (var row in section.rows) {
                        @renderRow(row, true);
                    }
                </div>
            }   
        }else { 
            <div class="container">
                <div class="row clearfix">
                    @foreach (var s in Model.sections) {
                        <div class="grid-section">
                            <div class="col-md-@s.grid column">
                                @foreach (var row in s.rows) {
                                    @renderRow(row, false);
                                }
                            </div>
                        </div>
                    }
                </div>
            </div>   
        }
    </div>
}

@helper renderRow(dynamic row, bool singleColumn){
    <div @RenderElementAttributes(row)>
        @Umbraco.If(singleColumn, "<div class='container'>")
        <div class="row clearfix">
            @foreach ( var area in row.areas ) {
            <div class="col-md-@area.grid column">
                <div @RenderElementAttributes(area)>
                    @foreach (var control in area.controls) {
                        if (control !=null && control.editor != null && control.editor.view != null ) {
                            <text>@Html.Partial("grid/editors/base", (object)control, new ViewDataDictionary { { "grid", area.grid } })</text>
                        }
                    }
                </div>
            </div>}
        </div>
        @Umbraco.If(singleColumn, "</div>")
    </div>
}

@functions {
    public static MvcHtmlString RenderElementAttributes(dynamic contentItem)
    {
        var attrs = new List<string>();
        JObject cfg = contentItem.config;

        if(cfg != null)
            foreach (JProperty property in cfg.Properties()) {
                attrs.Add(property.Name + "=\"" + property.Value.ToString() + "\"");
            }
                
        JObject style = contentItem.styles;

        if (style != null) { 
        var cssVals = new List<string>();
        foreach (JProperty property in style.Properties())
            cssVals.Add(property.Name + ":" + property.Value.ToString() + ";");

        if (cssVals.Any())
            attrs.Add("style=\"" + string.Join(" ", cssVals) + "\"");
        }
            
        return new MvcHtmlString(string.Join(" ", attrs));
    }
}

Media.cshtml

@inherits Umbraco.Web.Mvc.UmbracoViewPage<dynamic>
@using Umbraco.Web.Templates


@if (Model.value != null)
{
    

    int grid = Convert.ToInt32(ViewData["grid"]);
    double gridCol = 12 / grid;
    var intGridCol = (int)Math.Ceiling(gridCol);

    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";
        }
    }
    <img sizes="(min-width: 1200px) calc(1120px / @intGridCol), (min-width: 992px) calc(920px / @intGridCol), (min-width: 768px) calc(700px / @intGridCol), 100vw" srcset="@url?width=200 200w,@url?width=200 200w,@url?width=340 340w,@url?width=447 447w,@url?width=541 541w,@url?width=628 628w,@url?width=703 703w,@url?width=775 775w,@url?width=843 843w, @url?width=908 908w,@url?width=967 967w,@url?width=1023 1023w,@url?width=1082 1082w,@url?width=1135 1135w,@url?width=1188 1188w,@url?width=1242 1242w,@url?width=1291 1291w,@url?width=1340 1340w, @url?width=1387 1387w,@url?width=1431 1431w,@url?width=1476 1476w,@url?width=1520 1520w,@url?width=1565 1565w,@url?width=1605 1605w,@url?width=1650 1650w,@url?width=1690 1690w, @url?width=1729 1729w,@url?width=1765 1765w,@url?width=1805 1805w,@url?width=1847 1847w,@url?width=1885 1885w,@url?width=1923 1923w,@url?width=1956 1956w,@url?width=1995 1995w,@url?width=2031 2031w,@url?width=2069 2069w,@url?width=2101 2101w,@url?width=2137 2137w,@url?width=2170 2170w,@url?width=2206 2206w,@url?width=2240 2240w" src="@url" alt="@Model.value.altText" class="xxs-margin-bottom xs-margin-bottom img-responsive">

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

package.manifest

{
    "gridEditors": [
        {
            "name": "Grid Image",
            "alias": "GridImage",
            "view": "media",
            "render": "/app_plugins/GridImage/media.cshtml",
            "icon": "icon-picture"
        }
    ]
}