html - 具有 html 属性的 Sitecore 项目 - Webforms

Question

我在布局中有此代码来源:

<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>  

我还有一个图像字段，想要将图像 url 设置为 div 背景，如下所示:

<%
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>

但是这种方式在页面处于编辑模式时会出错，因为使用了 block 代码。如果您对这种情况有其他解决方案，请与我分享。谢谢!

Answer 1

尽量避免使用代码块。

您的页面(aspx.cs) 或控件(ascx.cs) 可以具有公共(public)属性。

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;
    }
}

你可以在你的代码中使用它

<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>

如果您收到此错误“无法修改控件集合，因为控件包含代码块”，请遵循 Presentation Component Troubleshooting

在评论中的问题后添加了关于页面编辑器图像编辑的内容:

无法在开箱即用的 Sitecore 中编辑 div 的背景图像。但是您可以为 PE 模式渲染标签而不是背景图像。例如:

<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>

并通过隐藏代码控制可见性

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

在更改标记和样式时，您可以在 PE 模式下获得相当不错的外观和编辑图像的能力。

或者，如果您有所见即所得的要求，您应该有 Sitecore Edit Frame for your image field .您将能够将背景图像编辑为字段。