Create a gist now

Instantly share code, notes, and snippets.

@wjonesy /Base.cshtml
Last active Mar 27, 2017

Embed
What would you like to do?
A gist for using responsive images in Umbraco's grid editor
@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>
}
@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));
}
}
@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>
}
}
{
"gridEditors": [
{
"name": "Grid Image",
"alias": "GridImage",
"view": "media",
"render": "/app_plugins/GridImage/media.cshtml",
"icon": "icon-picture"
}
]
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment