CODEWITHSUNDEEP
xmlxslt
user1926165
user1926165

Reputation: 11

XSL - Image with a Link

I have an XML document as follows.

<?xml version="1.0"?>
<document document="wpc_slider_qp"> 
<properties> 
    <property prop_name="displayname" prop_ns="http://sapportals.com/xmlns/cm" type="filename"/>
    <property type="createdBy">USER.PRIVATE_DATASOURCE.un:LU23921</property> 
</properties>
<elements>
    <element type="sliderimage" alt="Slider 1 Tooltip" width="700" height="306">="/irj/go/km/docs/wpccontent/Sites/Administration/Site Content/image-slider-1.jpg</element>
    <element title="" type="sliderlink" linkid="2ece8f2a15920a838038554563a046b2" targetnew="false" rid="http://www.google.com"/>
    <element type="sliderimage" alt="Slider 2 Tooltip" width="700" height="306">="/irj/go/km/docs/wpccontent/Sites/Administration/Site Content/image-slider-2.jpg</element>
    <element title="" type="sliderlink" linkid="75af9a52cab35aa864d80f4563a0db8f" targetnew="false" rid="http://www.yahoo.com"/>
</elements>
<relatedlinks/>
<relatedfiles/>
</document>

I want to transform this using XSL to something link this..

<div id="sliderFrame">
    <div id="slider">
        <a href="http://www.google.com"><img border="0" src="/irj/go/km/docs/wpccontent/Sites/Administration/Site Content/image-slider-1.jpg" height="306" width="700"/></a>
        <a href="http://www.yahoo.com"><img border="0" src="/irj/go/km/docs/wpccontent/Sites/Administration/Site Content/image-slider-2.jpg" height="306" width="700"/></a>
    </div>
</div>

Here is my XSL so far...

<?xml version="1.0"?>

<!DOCTYPE stylesheet [
<!ENTITY apos  "&#39;" ><!-- replace &apos; with html escape character for ' -->
]>

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
                  xmlns:wpc="com.sap.nw.wpc.km.service.editor.xslt.XsltHelperCore">
    <xsl:template match="/">

    <xsl:output method="html"/>


<html>
<head>

    <link href="js-image-slider.css" rel="stylesheet" type="text/css" />
    <script src="js-image-slider.js" type="text/javascript">function empty() return;</script>
</head>



<div id='sliderFrame'>
    <div id='slider'>
        <xsl:for-each select="document/elements/element">
            <xsl:if test="@type='sliderimage'">
                        <img border="0">
                                <xsl:attribute name="src"><xsl:value-of disable-output-escaping="yes" select="wpc:getWebDavAccess(string(current()))"/></xsl:attribute>
                                    <xsl:if test="string-length(@height)!=0">
                                        <xsl:attribute name="height"><xsl:value-of disable-output-escaping="yes" select="@height"/></xsl:attribute>
                            </xsl:if>
                                    <xsl:if test="string-length(@width)!=0">
                                <xsl:attribute name="width"><xsl:value-of disable-output-escaping="yes" select="@width"/></xsl:attribute>
                            </xsl:if>
                            <xsl:if test="string-length(document/elements/element[@type='sliderimage']/@alt)!=0">
                                <xsl:attribute name="alt"><xsl:value-of disable-output-escaping="yes" select="document/elements/element[@type='sliderimage']/@alt"/></xsl:attribute>
                            </xsl:if>
                            </img>  
            </xsl:if> 
        </xsl:for-each>
    </div>
</div>


<br />
<br />



        <xsl:for-each select="document/elements/element">
            <xsl:if test="@type='sliderlink'">
                    <a>
                        <xsl:attribute name="href">
                            <xsl:value-of disable-output-escaping="yes" select="wpc:getHrefValue(string(current()/@rid), string(/document/@locale))"/>
                        </xsl:attribute>
                        <xsl:attribute name="onclick">
                            <xsl:value-of disable-output-escaping="yes" select="wpc:getOnClickValue(string(current()/@rid), string(/document/@locale),string(document/elements/element[@type='sliderlink']/@targetnew))"/>
                        </xsl:attribute>
                        <xsl:attribute name="target">
                            <xsl:value-of disable-output-escaping="yes" select="wpc:getTarget(string(current()/@targetnew))"/>
                        </xsl:attribute>
test
                    </a>
            </xsl:if> 
        </xsl:for-each>


</html>

</xsl:template>

</xsl:stylesheet>

I am able to get the images one below the other but I am not able to figure out how to add the A tag around the images. Any help would be highly appreciated.

Upvotes: 0

Views: 1988

Answers (1)

Tobias Klevenz
Tobias Klevenz

Reputation: 1645

You shouldn't try to put everything in XSLT in 1 template match, this gets unnecessary complicated and hard to read rather quickly.

This will give your desired output:

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">

<xsl:output method="html" indent="yes"/>

<xsl:template match="document">
    <html>
        <head>
            <link href="js-image-slider.css" rel="stylesheet" type="text/css"/>
            <script src="js-image-slider.js" type="text/javascript">function empty() return;</script>
        </head>
        <body>
            <xsl:apply-templates select="elements"/>
        </body>
    </html>
</xsl:template>

<xsl:template match="elements">
    <div id="sliderFrame">
        <div id="slider">
            <xsl:apply-templates select="element[@type='sliderlink']"/>
        </div>
    </div>
</xsl:template>

<xsl:template match="element[@type='sliderlink']">
    <a href="{@rid}">
        <xsl:apply-templates select="preceding-sibling::element[@type='sliderimage'][1]"/>
    </a>
</xsl:template>

<xsl:template match="element[@type='sliderimage']">
    <img border="0" src="{substring(.,3)}" height="{@height}" width="{@width}"/>
</xsl:template>

</xsl:stylesheet>

So rather than putting it all in one big template, what you do is build a chain of templates to stitch together your desired output, this is also much more flexible.

Edit:

In response to the comment, to access the content within element you use . so if wpc:getWebDavAccessis used to process the src you would do:

<xsl:template match="element[@type='sliderimage']">
    <img border="0" src="{wpc:getWebDavAccess(.)}" height="{@height}" width="{@width}"/>
</xsl:template>

I had substituted that with using substring.

The curly brackets in XSLT are the same as a value-of select, you can write the same code like this:

<xsl:template match="element[@type='sliderimage']">
    <img border="0">
    <xsl:attribute name="src">
        <xsl:value-of select="wpc:getWebDavAccess(.)"/>
    </xsl:attribute>
    <xsl:attribute name="height">
        <xsl:value-of select="@height"/>
    </xsl:attribute>
    <xsl:attribute name="width">
        <xsl:value-of select="@width"/>
    </xsl:attribute>
    </img>
</xsl:template>

Upvotes: 1

Related Questions