質問にあるように、Sitecore Email コンポーネントの XSL ファイルに背景画像を設定しようとしています。
イメージ ソースを使用して変数をハード コードし、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 アイテムに従って設定する必要があります。この場合、アイテムの背景画像フィールドであり、ハードコードされた変数ではありません。
コンポーネント テンプレートからさまざまなアイテムにアクセスできます。この場合、次のフィールドがあります。
- ロゴイメージ）
- アイコン（イメージ）
- 背景（画像）
- 見出し (1 行テキスト)
- アイコン テキスト (1 行テキスト)
次のサイトコア コントロールを使用して、ページ上のこれらのアイテムにアクセスできます。
<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 によって提供される方法です。
私が使用する場合：
<img src="{sc:field('background',.,'src')}" alt="{sc:fld('background',.,'alt')}" />
src フィールドの fld が field に変更されたことに注意してください。ソースを調べると、次のようになります。
<img src="<input id='fld_B9ACE161A86D474390C7DA8308D79278_4C5D9258F7CF44B8A073A078CAEC08B0_en_1_00a4e02d3315484a8da1a756f2ef2d69_6759' class='scFieldValue' name='fld_B9ACE161A86D474390C7DA8308D79278_4C5D9258F7CF44B8A073A078CAEC08B0_en_1_00a4e02d3315484a8da1a756f2ef2d69_6759' type='hidden' value="&lt;image mediapath=&quot;&quot; alt=&quot;go-ape-forest-banner-background&quot; width=&quot;600&quot; height=&quot;108&quot; hspace=&quot;2&quot; vspace=&quot;2&quot; showineditor=&quot;&quot; usethumbnail=&quot;&quot; src=&quot;&quot; mediaid=&quot;{EE47E80F-DE1E-4FDD-B5D8-ACA473B52A9C}&quot; /&gt;" /><code id="fld_B9ACE161A86D474390C7DA8308D79278_4C5D9258F7CF44B8A073A078CAEC08B0_en_1_00a4e02d3315484a8da1a756f2ef2d69_6759_edit" sc_parameters="format" type="text/sitecore" chromeType="field" scFieldType="image" class="scpm" kind="open">{"commands":[{"click":"chrome:field:editcontrol({command:\"webedit:chooseimage\"})","header":"Choose Image","icon":"/sitecore/shell/themes/standard/custom/16x16/photo_landscape2.png","disabledIcon":"/temp/photo_landscape2_disabled16x16.png","isDivider":false,"tooltip":"Choose an image.","type":""},{"click":"chrome:field:editcontrol({command:\"webedit:editimage\"})","header":"Properties","icon":"/sitecore/shell/themes/standard/custom/16x16/photo_landscape2_edit.png","disabledIcon":"/temp/photo_landscape2_edit_disabled16x16.png","isDivider":false,"tooltip":"Modify image appearance.","type":""},{"click":"chrome:field:editcontrol({command:\"webedit:clearimage\"})","header":"Clear","icon":"/sitecore/shell/themes/standard/custom/16x16/photo_landscape2_delete.png","disabledIcon":"/temp/photo_landscape2_delete_disabled16x16.png","isDivider":false,"tooltip":"Remove the image.","type":""},{"click":"chrome:common:edititem({command:\"webedit:open\"})","header":"Edit the related item","icon":"/temp/iconcache/office/16x16/cubes.png","disabledIcon":"/temp/cubes_disabled16x16.png","isDivider":false,"tooltip":"Edit the related item in the Content Editor.","type":"common"},{"click":"chrome:rendering:personalize({command:\"webedit:personalize\"})","header":"Personalize","icon":"/temp/iconcache/office/16x16/users_family.png","disabledIcon":"/temp/users_family_disabled16x16.png","isDivider":false,"tooltip":"Create or edit personalization for this component.","type":"sticky"},{"click":"chrome:rendering:editvariations({command:\"webedit:editvariations\"})","header":"Edit variations","icon":"/temp/iconcache/office/16x16/windows.png","disabledIcon":"/temp/windows_disabled16x16.png","isDivider":false,"tooltip":"Edit the variations.","type":"sticky"}],"contextItemUri":"sitecore://master/{B9ACE161-A86D-4743-90C7-DA8308D79278}?lang=en&ver=1","custom":{},"displayName":"Background","expandedDisplayName":null}</code><img src="/sitecore/shell/-/media/Images/go-ape-forest-banner-background.ashx?h=108&amp;la=en&amp;w=600&amp;hash=B3D30A69E02A5C0AC47D2475FF85DFA166768C40" hspace="2" vspace="2" alt="go-ape-forest-banner-background" width="600" height="108" /><code class="scpm" type="text/sitecore" chromeType="field" kind="close"></code>" alt="go-ape-forest-banner-background" sc-part-of="placeholder rendering" class="scEnabledChrome">
また、期待どおりに動作しない XSLHelper.fld メソッドの使用に関するこの問題に関連する質問もしました。ここで質問を見ることができます：