具有html属性的Sitecore项-Webforms

Question

I have this code origin in a layout:

<div class="pm-single-post-img-container" style="background-image:url(images/01.jpg);">
    <div class="pm-single-post-title full-width">
        <p>
        <sc:Text runat="server" Field="Title" />
        </p>
    </div>
</div>  

Also i have a image field , and want to get image url set to div background , like this :

<%
Sitecore.Data.Fields.ImageField imageField = Sitecore.Context.Item.Fields["Image"];
var thumbnailUrl = string.Empty;
if (imageField != null && imageField.MediaItem!=null)
{
    thumbnailUrl = Sitecore.Resources.Media.MediaManager.GetMediaUrl(imageField.MediaItem);
}
%>
<div class="pm-single-post-img-container" style="background-image:url(<%=thumbnailUrl%>);">
    <div class="pm-single-post-title full-width">
        <p>
            <sc:Text runat="server" Field="Title" />
        </p>
    </div>
</div>

But this way has error when the page in edit mode , because use block code. If you have another solution for this case , please share for me . Thanks !

Answer 1

Try to avoid to use code blocks.

Your page(aspx.cs) or control(ascx.cs) can have public property.

public string BackgroundUrl
{
    get
    {
        Sitecore.Data.Fields.ImageField imageField = Sitecore.Context.Item.Fields["Image"];
        var thumbnailUrl = string.Empty;
        if (imageField != null && imageField.MediaItem != null)
        {
            thumbnailUrl = Sitecore.Resources.Media.MediaManager.GetMediaUrl(imageField.MediaItem);
        }
        return thumbnailUrl;
    }
}

And you can use it in your code

<div class="pm-single-post-img-container" style="background-image:url(<%=BackgroundUrl%>);">
    <div class="pm-single-post-title full-width">
        <p>
            <sc:Text runat="server" Field="Title" />
        </p>
    </div>
</div>

If you get this error "The Controls collection cannot be modified because the control contains code blocks" follow Presentation Component Troubleshooting

Added about Page Editor image editing after question in comments:

There is no way to do editing of background image of div in Sitecore out of the box. But you can render tag instead of background image for PE mode. For example:

<sc:Image Field="Image" ID="ImagePE" runat="server" Visible="false">
<sc:Text runat="server" Field="Title" ID="TitlePE" Visible="false"/>
<div runat="server" ID="DivNormalMode">
 ... your current code
</div>

And control visibility by code behind

if (Sitecore.Context.PageMode.IsPageEditor)
{
    ImagePE.Visible = true;
    TitlePE.Visible = true;
    DivNormalMode.Visible = false;
}

While changing markup and styles you can achieve pretty good appearance in PE mode and ability to edit image.

Or, if you have WYSIWYG requirements you should have Sitecore Edit Frame for your image field . You will be able to edit background image as field.