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>
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:
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.
- Change default text color in Docusaurus v2
- How to debug CSS?
- Link underline won't to go away
- How to darken a background using CSS?
- Smarter word break in CSS?
- Button style in top bar in Foundation?
- Make a letter as big as the div
- Overlaying a div with an svg using CSS grid layout when div size is unknown ahead of time
- CSS Equivalent of the "if" statement
- input text fill up remaining space
- Using external fonts in CSS
- How can I play an animation after the previous one is finished?
- Bootstrap 5 circular background for bootstrap icon
- Convert TailwindCSS to native CSS?
- Best way to include CSS? Why use @import?
- Access CSS variable from javascript
- React-dropzone style drop area
- How to simulate button click using rvest
- How to change in javascript background color from css
- div Width is being ignored
- Delay between percentages in keyframes css
- When clicking on hamburger menu nothing happens
- Remove text caret/pointer from focused readonly input
- Bootstrap <select> width, content too wide when resizing window
- Select arrow style change
- Override User Agent Styling for Auto fill input fields
- How do I get Tailwind's active breakpoint in JavaScript?
- Replace default mouse cursor in Gmail and Chromium
- Can you figure out how to align the top of the <p> tag with the top of the <textarea> tag?
- How should I reference different files for different devices using Angular?