css - 从 sitecore 图像项在 xslt 文件中设置 div 的背景图像

Question

正如问题所述，我正在尝试在 XSL 文件中为 Sitecore 电子邮件组件设置背景图片。

如果我用图像源硬编码一个变量，然后使用 Style 设置 Div 的背景，那么我可以看到我的 div 设置了背景。

<?xml version="1.0" encoding="UTF-8"?>

<xsl:stylesheet version="1.0"
  xmlns:xsl="http://www.w3.org/1999/XSL/Transform" 
  xmlns:sc="http://www.sitecore.net/sc" 
  xmlns:dot="http://www.sitecore.net/dot"
  exclude-result-prefixes="dot sc">

<!-- output directives -->
<xsl:output method="html" indent="no" encoding="UTF-8" />

<!-- parameters -->
<xsl:param name="lang" select="'en'"/>
<xsl:param name="id" select="''"/>
<xsl:param name="sc_item"/>
<xsl:param name="sc_currentitem"/>

<!-- variables -->
<!-- Uncomment one of the following lines if you need a "home" variable in you code -->
<!--<xsl:variable name="home" select="sc:item('/sitecore/content/home',.)" />-->
<!--<xsl:variable name="home" select="/*/item[@key='content']/item[@key='home']" />-->
<!--<xsl:variable name="home" select="$sc_currentitem/ancestor-or-self::item[@template='site root']" />-->
  <xsl:variable name="backgroundurl">-/media/Images/go-ape-forest-banner-background.ashx</xsl:variable>

<!-- entry point -->
<xsl:template match="*">
  <xsl:apply-templates select="$sc_item" mode="main"/>
</xsl:template>

<!--==============================================================-->
<!-- main                                                         -->
<!--==============================================================-->  
<xsl:template match="*" mode="main">  
    <div style="background:url({$backgroundurl}); background-repeat:no-repeat; background-size:100% 100%; height:200px; border-radius: 25px; border: 2px solid black; padding-left: 20px;padding-right: 20px;">

  </div>

</xsl:template> 
</xsl:stylesheet>

正如您从上面的屏幕截图中看到的那样，只要图像显示为 div 的背景图像，这就可以工作，但这不是我想要的，背景图像应该根据 Sitecore 元素设置，在在这种情况下，元素背景图像字段而不是硬编码变量。

我可以访问组件模板中的各种元素。在这种情况下，我们有以下字段:

• Logo (图片)
• 图标(图片)
• 背景(图片)
• 标题(单行文本)
• 图标文本(单行文本)

我可以使用以下 Sitecore 控件访问页面上的这些元素:

• <sc:image field="logo"/>
• <sc:image field="icon" />
• <sc:image field="background" />
• <sc:text field="headline"/>
• <sc:text field="icon text"/>

如果我将以上内容添加到我的 xsl 页面上，它们将正确呈现，如下面的屏幕截图所示:

我想获取背景图像字段并从中获取 src 值，然后将我的 div 的背景设置为此值。

知道这可以/应该如何完成吗？

问候，

漫画程序员

编辑:

我注意到一些有趣的事情，你或许可以帮助我理解正在发生的事情。

当我在 XSLT 文件中使用以下内容时:

<img src="{sc:fld('background',.,'src')}" alt="{sc:fld('background',.,'alt')}" />

并检查源代码输出，我在页面上呈现了以下内容。

<img src="" alt="go-ape-forest-banner-background" sc-part-of="placeholder rendering" class="scEnabledChrome">

我可以看到 src 字段是空的，这是一个问题。这是sitecore SDN上的以下链接中sitecore提供的方法

Assessing Field Values in Sitecore

当我使用时:

<img src="{sc:field('background',.,'src')}" alt="{sc:fld('background',.,'alt')}" />

请注意 src 字段上的 fld 现在已更改为字段，当我检查源时我得到以下信息。

<img src="&lt;input id='fld_B9ACE161A86D474390C7DA8308D79278_4C5D9258F7CF44B8A073A078CAEC08B0_en_1_00a4e02d3315484a8da1a756f2ef2d69_6759' class='scFieldValue' name='fld_B9ACE161A86D474390C7DA8308D79278_4C5D9258F7CF44B8A073A078CAEC08B0_en_1_00a4e02d3315484a8da1a756f2ef2d69_6759' type='hidden' value=&quot;&amp;lt;image mediapath=&amp;quot;&amp;quot; alt=&amp;quot;go-ape-forest-banner-background&amp;quot; width=&amp;quot;600&amp;quot; height=&amp;quot;108&amp;quot; hspace=&amp;quot;2&amp;quot; vspace=&amp;quot;2&amp;quot; showineditor=&amp;quot;&amp;quot; usethumbnail=&amp;quot;&amp;quot; src=&amp;quot;&amp;quot; mediaid=&amp;quot;{EE47E80F-DE1E-4FDD-B5D8-ACA473B52A9C}&amp;quot; /&amp;gt;&quot; /&gt;&lt;code id=&quot;fld_B9ACE161A86D474390C7DA8308D79278_4C5D9258F7CF44B8A073A078CAEC08B0_en_1_00a4e02d3315484a8da1a756f2ef2d69_6759_edit&quot; sc_parameters=&quot;format&quot; type=&quot;text/sitecore&quot; chromeType=&quot;field&quot; scFieldType=&quot;image&quot; class=&quot;scpm&quot; kind=&quot;open&quot;&gt;{&quot;commands&quot;:[{&quot;click&quot;:&quot;chrome:field:editcontrol({command:\&quot;webedit:chooseimage\&quot;})&quot;,&quot;header&quot;:&quot;Choose Image&quot;,&quot;icon&quot;:&quot;/sitecore/shell/themes/standard/custom/16x16/photo_landscape2.png&quot;,&quot;disabledIcon&quot;:&quot;/temp/photo_landscape2_disabled16x16.png&quot;,&quot;isDivider&quot;:false,&quot;tooltip&quot;:&quot;Choose an image.&quot;,&quot;type&quot;:&quot;&quot;},{&quot;click&quot;:&quot;chrome:field:editcontrol({command:\&quot;webedit:editimage\&quot;})&quot;,&quot;header&quot;:&quot;Properties&quot;,&quot;icon&quot;:&quot;/sitecore/shell/themes/standard/custom/16x16/photo_landscape2_edit.png&quot;,&quot;disabledIcon&quot;:&quot;/temp/photo_landscape2_edit_disabled16x16.png&quot;,&quot;isDivider&quot;:false,&quot;tooltip&quot;:&quot;Modify image appearance.&quot;,&quot;type&quot;:&quot;&quot;},{&quot;click&quot;:&quot;chrome:field:editcontrol({command:\&quot;webedit:clearimage\&quot;})&quot;,&quot;header&quot;:&quot;Clear&quot;,&quot;icon&quot;:&quot;/sitecore/shell/themes/standard/custom/16x16/photo_landscape2_delete.png&quot;,&quot;disabledIcon&quot;:&quot;/temp/photo_landscape2_delete_disabled16x16.png&quot;,&quot;isDivider&quot;:false,&quot;tooltip&quot;:&quot;Remove the image.&quot;,&quot;type&quot;:&quot;&quot;},{&quot;click&quot;:&quot;chrome:common:edititem({command:\&quot;webedit:open\&quot;})&quot;,&quot;header&quot;:&quot;Edit the related item&quot;,&quot;icon&quot;:&quot;/temp/iconcache/office/16x16/cubes.png&quot;,&quot;disabledIcon&quot;:&quot;/temp/cubes_disabled16x16.png&quot;,&quot;isDivider&quot;:false,&quot;tooltip&quot;:&quot;Edit the related item in the Content Editor.&quot;,&quot;type&quot;:&quot;common&quot;},{&quot;click&quot;:&quot;chrome:rendering:personalize({command:\&quot;webedit:personalize\&quot;})&quot;,&quot;header&quot;:&quot;Personalize&quot;,&quot;icon&quot;:&quot;/temp/iconcache/office/16x16/users_family.png&quot;,&quot;disabledIcon&quot;:&quot;/temp/users_family_disabled16x16.png&quot;,&quot;isDivider&quot;:false,&quot;tooltip&quot;:&quot;Create or edit personalization for this component.&quot;,&quot;type&quot;:&quot;sticky&quot;},{&quot;click&quot;:&quot;chrome:rendering:editvariations({command:\&quot;webedit:editvariations\&quot;})&quot;,&quot;header&quot;:&quot;Edit variations&quot;,&quot;icon&quot;:&quot;/temp/iconcache/office/16x16/windows.png&quot;,&quot;disabledIcon&quot;:&quot;/temp/windows_disabled16x16.png&quot;,&quot;isDivider&quot;:false,&quot;tooltip&quot;:&quot;Edit the variations.&quot;,&quot;type&quot;:&quot;sticky&quot;}],&quot;contextItemUri&quot;:&quot;sitecore://master/{B9ACE161-A86D-4743-90C7-DA8308D79278}?lang=en&amp;ver=1&quot;,&quot;custom&quot;:{},&quot;displayName&quot;:&quot;Background&quot;,&quot;expandedDisplayName&quot;:null}&lt;/code&gt;&lt;img src=&quot;/sitecore/shell/-/media/Images/go-ape-forest-banner-background.ashx?h=108&amp;amp;la=en&amp;amp;w=600&amp;amp;hash=B3D30A69E02A5C0AC47D2475FF85DFA166768C40&quot; hspace=&quot;2&quot; vspace=&quot;2&quot; alt=&quot;go-ape-forest-banner-background&quot; width=&quot;600&quot; height=&quot;108&quot; /&gt;&lt;code class=&quot;scpm&quot; type=&quot;text/sitecore&quot; chromeType=&quot;field&quot; kind=&quot;close&quot;&gt;&lt;/code&gt;" alt="go-ape-forest-banner-background" sc-part-of="placeholder rendering" class="scEnabledChrome">

我还问了一个与此问题相关的问题，该问题涉及使用未按预期工作的 XSLHelper.fld 方法。您可以在此处查看问题:

Sitecore XSLHelper.fld Method not working as expected

Answer 1

在我回答之前，我必须说我强烈建议您停止使用 XSLT。如果您转向 MVC，您代码的 future 维护者(包括您自己)将会感谢您。如果想避免需要编译，可以使用View效果图。

以下代码改编自 Sitecore 6 的旧演示组件引用文档。我没有在 8 上测试它，因为我不想再次接触 XSLT，但我认为它应该仍然有效。

<xsl:variable name="mediaid" select="sc:fld('Background',$sc_currentitem,'mediaid')" />
<xsl:if test="$mediaid">
  <xsl:variable name="mediaitem" select="sc:item($mediaid,.)" />
  <xsl:if test="$mediaitem">
    <div style="background:url({sc:GetMediaUrl($mediaitem)}); background-repeat:no-repeat; background-size:100% 100%; height:200px; border-radius: 25px; border: 2px solid black; padding-left: 20px;padding-right: 20px;">
  </xsl:if>
</xsl:if>

更新以响应其他信息

您链接到的文章已过时。图像字段中不再有 src 属性。如果您只选择一个图像，如果您查看该字段的原始值，您将看到类似这样的内容:

<image mediaid="{094AED03-02E7-4868-80CB-19926661FB77}" />

如果您修改图像的属性(例如设置替代文本或尺寸)，您将看到如下内容:

<image mediaid="{094AED03-02E7-4868-80CB-19926661FB77}" alt="alt text" height="" width="150" hspace="" vspace="" />

要获取 URL，您需要使用我上面显示的 mediaid 属性。