Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Mar 2012
    Posts
    20
    Thanks
    3
    Thanked 1 Time in 1 Post

    XSL Stylesheet Help

    Hey guys,

    I have a web page using Umbraco with 3 images. All 3 images are linkable to pages within the website.

    I've added a field in Umbraco so you can type in a title and it will overlay the image which works perfectly.

    I've also added a field in Umbraco so you can type in text and it generates a CSS button. I want the button to use the same link that the image uses ($imageLink).

    Here's my code (Sorry if it's a bit large):

    Code:
    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE xsl:stylesheet [ <!ENTITY nbsp "&#x00A0;"> ]>
    <xsl:stylesheet
      version="1.0"
      xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
      xmlns:msxml="urn:schemas-microsoft-com:xslt"
      xmlns:umbraco.library="urn:umbraco.library" xmlns:Exslt.ExsltCommon="urn:Exslt.ExsltCommon" xmlns:Exslt.ExsltDatesAndTimes="urn:Exslt.ExsltDatesAndTimes" xmlns:Exslt.ExsltMath="urn:Exslt.ExsltMath" xmlns:Exslt.ExsltRegularExpressions="urn:Exslt.ExsltRegularExpressions" xmlns:Exslt.ExsltStrings="urn:Exslt.ExsltStrings" xmlns:Exslt.ExsltSets="urn:Exslt.ExsltSets" xmlns:tagsLib="urn:tagsLib" xmlns:BlogLibrary="urn:BlogLibrary"
      exclude-result-prefixes="msxml umbraco.library Exslt.ExsltCommon Exslt.ExsltDatesAndTimes Exslt.ExsltMath Exslt.ExsltRegularExpressions Exslt.ExsltStrings Exslt.ExsltSets tagsLib BlogLibrary ">
    
    
    <xsl:output method="xml" omit-xml-declaration="yes"/>
    
    <xsl:param name="currentPage"/>
    <xsl:variable name="configData" select="$currentPage/ancestor-or-self::*[@isDoc]/*[@isDoc][@nodeName='SiteConfig']" />
    
    
    <xsl:template match="/">
      <xsl:call-template name="getBottomImagesAndText" />
    </xsl:template>
    
    
    <xsl:template name="getBottomImagesAndText" >
      <xsl:variable name = "bottomImageLeft" select = "$configData/bottomImageLeft" />
      <xsl:variable name = "bottomImageCenter" select = "$configData/bottomImageCenter" />
      <xsl:variable name = "bottomImageRight" select = "$configData/bottomImageRight" />
    
      <xsl:variable name = "bottomImageLeft_Link" select = "$configData/bottomImageLeft_Link" />
      <xsl:variable name = "bottomImageCenter_Link" select = "$configData/bottomImageCenter_Link" />
      <xsl:variable name = "bottomImageRight_Link" select = "$configData/bottomImageRight_Link" />
    
      <xsl:variable name = "bottomTextLeft" select = "$configData/bottomTextLeft" />
      <xsl:variable name = "bottomTextCenter" select = "$configData/bottomTextCenter" />
      <xsl:variable name = "bottomTextRight" select = "$configData/bottomTextRight" />
      
      <xsl:variable name = "bottomImageLeftText" select ="$configData/bottomImageLeftText" />
      <xsl:variable name = "bottomImageCenterText" select ="$configData/bottomImageCenterText" />
      <xsl:variable name = "bottomImageRightText" select ="$configData/bottomImageRightText" />
      
      <xsl:variable name = "bottomImageLeftButton" select ="$configData/bottomImageLeftButton" />
      <xsl:variable name = "bottomImageCenterButton" select ="$configData/bottomImageCenterButton" />
      <xsl:variable name = "bottomImageRightButton" select ="$configData/bottomImageRightButton" />
      
      <xsl:if test = "$bottomImageLeft and $bottomImageCenter and $bottomImageRight != ''">
      
        <table width="926" border="0" cellpadding="0" cellspacing="0" class="homeTable">
                <tr>
                  <td height="10" colspan="5"><img src="/images/RESGroup/spacer.gif" alt="space" width="1" height="1" /></td>
                </tr>
     
                <tr>
                    <td width="300" height="114" valign="top">
            
            <xsl:if test="$bottomImageLeftText != ''">
            <div class="imageTextOverlay_1">
            <xsl:call-template name="getText">
              <xsl:with-param name="imageText" select="$bottomImageLeftText" />
            </xsl:call-template>   
            </div>
            </xsl:if>
            
                <div class="imageButtonOverlay">
                <xsl:call-template name="getText">
                  <xsl:with-param name="imageText" select="$bottomImageLeftButton" />
                </xsl:call-template>
                </div>
                                                         
            <xsl:call-template name="getImage">
              <xsl:with-param name="imageTag" select="$bottomImageLeft" />
              <xsl:with-param name="imageLink" select="$bottomImageLeft_Link" />
            </xsl:call-template>
                      
            <xsl:call-template name="getText">
              <xsl:with-param name="imageText" select="$bottomTextLeft" />
            </xsl:call-template>     
                                      
            </td>
    
                    <td height="114"><img src="/images/RESGroup/spacer.gif" alt="space" width="1" height="1" /></td>
    
                    <td width="300" height="114" valign="top" >
                      
            <xsl:if test="$bottomImageCenterText != ''">
            <div class="imageTextOverlay_2">
            <xsl:call-template name="getText">
              <xsl:with-param name="imageText" select="$bottomImageCenterText" />
            </xsl:call-template>   
            </div>
            </xsl:if>         
                      
            <div class="imageButtonOverlay">
                <xsl:call-template name="getText">
                  <xsl:with-param name="imageText" select="$bottomImageCenterButton" />
                </xsl:call-template>
            </div>
            
            <xsl:call-template name="getImage">
              <xsl:with-param name="imageTag" select="$bottomImageCenter" />
              <xsl:with-param name="imageLink" select="$bottomImageCenter_Link" />
            </xsl:call-template>
                      
            <xsl:call-template name="getText">
              <xsl:with-param name="imageText" select="$bottomTextCenter" />
            </xsl:call-template>                                    
            </td>
    
                    <td height="114"><img src="/images/RESGroup/spacer.gif" alt="space" width="1" height="1" /></td>
     
                    <td width="300" height="114" valign="top">
            
            <xsl:if test="$bottomImageRightText != ''">
            <div class="imageTextOverlay_3">
            <xsl:call-template name="getText">
              <xsl:with-param name="imageText" select="$bottomImageRightText" />
            </xsl:call-template>   
            </div>
            </xsl:if>
                  
            <div class="imageButtonOverlay">
                <xsl:call-template name="getText">             
                  <xsl:with-param name="imageText" select="$bottomImageRightButton" />             
                </xsl:call-template>
            </div>
           
            <xsl:call-template name="getImage">
              <xsl:with-param name="imageTag" select="$bottomImageRight" />
              <xsl:with-param name="imageLink" select="$bottomImageRight_Link" />
            </xsl:call-template>
                      
            <xsl:call-template name="getText">
              <xsl:with-param name="imageText" select="$bottomTextRight" />
            </xsl:call-template>                                    
            </td>
              
               </tr>
            </table>
      </xsl:if>
    </xsl:template>
    
    <xsl:template name="getImage">
      <xsl:param name="imageTag" />
      <xsl:param name="imageLink" />
      <xsl:choose>
        <xsl:when test="$imageLink != ''">
          <a href="{umbraco.library:NiceUrl($imageLink)}"><xsl:value-of disable-output-escaping="yes" select="$imageTag" /></a>
        </xsl:when>
        <xsl:otherwise>
          <xsl:value-of disable-output-escaping="yes" select="$imageTag" />
        </xsl:otherwise>
      </xsl:choose>
    </xsl:template>
        
    <xsl:template name="getText">
      <xsl:param name="imageText" />
      <xsl:if test="$imageText!= ''">
        <xsl:value-of disable-output-escaping="yes" select="$imageText" />
      </xsl:if>
    </xsl:template>    
    
    </xsl:stylesheet>

  • #2
    New to the CF scene
    Join Date
    Mar 2013
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    XSL Stylesheet Help

    You can reference : http://www.w3schools.com/xsl/el_stylesheet.asp.. to know more XSL..!

  • #3
    New Coder
    Join Date
    Mar 2012
    Posts
    20
    Thanks
    3
    Thanked 1 Time in 1 Post
    You can delete this thread. I actually learned how to do it myself.
    Last edited by dnbmadness; 03-13-2013 at 01:23 PM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •