I selected background image for row in umbraco CMS from media folder.
Url of the image is /media/1001/home.jpg.
But in html I get style="background-image:urlmedia1001home.jpg;".
So the result is that image is not displayed.
Configuration for grid layout is:
[
{
"label": "Set a background image",
"description": "Set a row background",
"key": "background-image",
"view": "imagepicker",
"modifier": "url({0})",
"applyTo": "row"
}
]
In Umbraco CMS database in table cmsContentXml is saved correct URL /media/1001/home.jpg.
I am using clean Umbraco installation without Fanoe or any other Starter Kit template.
Hello, I'm having the same issue and I've upgrade from 7.5.6 to 7.5.7 and it's still not rendering the background-image attribute correctly. It's removing brackets and single quotes from the modifier:
I found the solution to the problem. It ended up being the code on the Bootstrap 3 grid under the Partial Views section. For some reason the update didn't fix the problem for me, but once I changed to the code I'm pasting below, the problem was solved.
@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="[email protected] 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="[email protected] 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)</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())
{
var propertyValue = HttpUtility.HtmlAttributeEncode(property.Value.ToString());
attrs.Add(property.Name + "=\"" + propertyValue + "\"");
}
JObject style = contentItem.styles;
if (style != null) {
var cssVals = new List<string>();
foreach (JProperty property in style.Properties())
{
var propertyValue = property.Value.ToString();
if (string.IsNullOrWhiteSpace(propertyValue) == false)
{
cssVals.Add(property.Name + ":" + propertyValue + ";");
}
}
if (cssVals.Any())
attrs.Add("style=\"" + HttpUtility.HtmlAttributeEncode(string.Join(" ", cssVals)) + "\"");
}
return new MvcHtmlString(string.Join(" ", attrs));
}
}
Removing: TemplateUtilities.CleanForXss() resolves it.
However this is a bug and should be reported in if its not fixed in the latest version. Running 7.5.6 now.
Background image url in grid layout not working
I selected background image for row in umbraco CMS from media folder. Url of the image is /media/1001/home.jpg. But in html I get style="background-image:urlmedia1001home.jpg;".
So the result is that image is not displayed.
Configuration for grid layout is: [ { "label": "Set a background image", "description": "Set a row background", "key": "background-image", "view": "imagepicker", "modifier": "url({0})", "applyTo": "row" } ]
In Umbraco CMS database in table cmsContentXml is saved correct URL /media/1001/home.jpg.
I am using clean Umbraco installation without Fanoe or any other Starter Kit template.
Does anybody have the same issue?
There might be a problem in Umbraco 7.5.6 version. Upgrading to Umbraco 7.5.7 and background image is OK.
I too am having this issue, even after upgrading to 7.57
Hello, I'm having the same issue and I've upgrade from 7.5.6 to 7.5.7 and it's still not rendering the background-image attribute correctly. It's removing brackets and single quotes from the modifier:
"modifier": "url('{0}')"
Hi
I am also experiencing this issue. Anyone found out the issue?
I found the solution to the problem. It ended up being the code on the Bootstrap 3 grid under the Partial Views section. For some reason the update didn't fix the problem for me, but once I changed to the code I'm pasting below, the problem was solved.
Thanks.
Removing: TemplateUtilities.CleanForXss() resolves it. However this is a bug and should be reported in if its not fixed in the latest version. Running 7.5.6 now.
Seems to be fixed in 7.5.7 and above
http://issues.umbraco.org/issue/U4-9262
is working on a reply...