As the question states I'm trying to set a background image in XSL file for a Sitecore Email component.
If I hard code a variable with the image source and then set the Div's background using Style then I can see my div with the background set.
<?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>
As you can see from the screen shot above, this works so far as the image is displayed as the div's background image, but is not what I'm after, the background image should be set according to the Sitecore Item, In this case the Items background image field and not a hard coded variable.
I have access to various items from the components template. In this case we have the following fields:
- Logo (Image)
- Icon (Image)
- Background (Image)
- Headline (Single-Line Text)
- Icon Text (Single-Line Text)
I can access these items on the page using the following sitecore controls:
<sc:image field="logo"/><sc:image field="icon" /><sc:image field="background" /><sc:text field="headline"/><sc:text field="icon text"/>
If I add the above onto my xsl page they render correctly as can bee seen from screen shot below:
I want to take the background image field and get the src value from it and then set my div's background to this value.
Any idea's how this could/should be done?
Regards,
Comic Coder
EDIT:
I noticed something funny that you may be able to help me understand what is happening.
When I use the following in my XSLT file:
<img src="{sc:fld('background',.,'src')}" alt="{sc:fld('background',.,'alt')}" />
And inspect the source code output i get the following rendered on the page.
<img src="" alt="go-ape-forest-banner-background" sc-part-of="placeholder rendering" class="scEnabledChrome">
I can see the src field is empty and this is a problem. This is the method that is provided by sitecore at the following link on the sitecore SDN
Assessing Field Values in Sitecore
When I use:
<img src="{sc:field('background',.,'src')}" alt="{sc:fld('background',.,'alt')}" />
Notice the fld on the src field has changed to field now and i get the following when i inspect the source.
<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">
I have also asked a question that is relevant to this problem regarding the use of the XSLHelper.fld method which is not working as expected. You can see the question here: