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>

此外，我有一个图像字段，并希望将图像网址设置为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>

但是当页面处于编辑模式时这种方式有错误，因为使用块代码。如果您对此案例有其他解决方案，请与我分享。谢谢！

Answer 1

尽量避免使用代码块。

您的页面（aspx.cs）或控件（ascx.cs）可以拥有公共属性。

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>

如果出现此错误＆＃34;无法修改Controls集合，因为控件包含代码块＆＃34;关注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模式下获得非常好的外观并且能够编辑图像。

或者，如果您有WYSIWYG要求，则应该Sitecore Edit Frame for your image field。您将能够将背景图像编辑为字段。

具有html属性的Sitecore项目 - Webforms

1 个答案: