Установите фоновое изображение div в файл xslt из файла sitecore image

Question

Как говорится в вопросе, я пытаюсь установить фоновое изображение в XSL-файле для компонента электронной почты Sitecore.

Если я жестко закодирую переменную с источником изображения, а затем установил фон 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, в этом случае полем фонового изображения элементов, а не жестко закодированной переменной.

У меня есть доступ к различным элементам из шаблона компонентов. В этом случае мы имеем следующие поля:

• Логотип (изображение)
• Икона (изображение)
• фона (изображение)
• Заголовок (Single-Line Text)
• Icon Text (Single -Line Текст)

я могу получить доступ к этим элементам на странице, используя следующий 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 для этого значения.

Любая идея, как это сделать/должно быть сделано?

С уважением,

Comic Coder

EDIT:

Я заметил, что-то смешное, что вы можете быть в состоянии помочь мне понять, что происходит.

Когда я использую следующие в моем файле 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 по следующей ссылке на Sitecore SDN

Assessing Field Values in Sitecore

Когда я использую:

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

Обратите внимание ДПД на поле Src изменилось на поле сейчас и Я получаю следующее, когда проверяю источник.

<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. Если вы хотите избежать необходимости компиляции, вы можете использовать View renderings.

Следующий код был адаптирован из старого документа ссылки компонента презентации для 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, как показано выше.