Comic Coder Comic Coder - 1 month ago 9
CSS Question

Set background image of div in xslt file from sitecore image item

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>


div with background image

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:

Added Sitecore Fields

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="&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">


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:

Sitecore XSLHelper.fld Method not working as expected

Answer

Before I answer, I have to say that I would highly recommend that you stop using XSLT. Future maintainers of your code (including yourself) will thank you if you move to MVC. If you want to avoid the need to compile, you can use View renderings.

The following code was adapted from the old presentation component reference doc for Sitecore 6. I haven't tested it on 8 as I have no desire to touch XSLT again, but I think it should still work.

<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>

Update in response to additional info

The article you linked to is out-of-date. There is no longer a src attribute in image fields. If you just select an image you will see something like this if you view the raw value of the field:

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

If you modify the properties of the image (e.g. set the alt text or dimensions) you will see something like this:

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

To get the URL, you need to use the mediaid property like I showed above.