Search code examples
htmlxsltxslt-1.0xslt-2.0visual-web-developer

How to use xsl:sort to sort images NOT based on position()


EDITED: ADDITIONAL INFO BELOW

I am trying to sort images in ascending order using <xsl:sort> without having to use the "position() function.

I am experiencing an issue using the <xsl:sort> function to sort images in ascending order.

This is my XML input code that links to the product ASAMSCM195265783.jpg:

             <objectImage code="ASAMSCM195265783" name="NX1000 Compact System Camera in White with 20-50mm Lens Product Image (Primary)" imageTypeName="Product Image" imageTypeCode="PRODUCT" objectTypeImageCode="PRIMARY_PRODUCT" objectTypeImageName="Primary Product Image" displayOrder="7">
                 <imageVersions>
                    <imageVersion versionTypeCode="PRODUCT_THUMB_SM" width="15" height="15" path="PRODUCT/PRODUCT_THUMB_SM/ASAMSCM195265783.jpg" link=""/>
                    <imageVersion versionTypeCode="PRODUCT_THUMB_M" width="32" height="32" path="PRODUCT/PRODUCT_THUMB_M/ASAMSCM195265783.jpg" link=""/>
                    <imageVersion versionTypeCode="PRODUCT_REGULAR" width="170" height="170" path="PRODUCT/PRODUCT_REGULAR/ASAMSCM195265783.jpg" link=""/>
                    <imageVersion versionTypeCode="PRODUCT_ENLARGED" width="500" height="500" path="PRODUCT/PRODUCT_ENLARGED/ASAMSCM195265783.jpg" link=""/>
                    <imageVersion versionTypeCode="PRODUCT_THUMB_L" width="36" height="36" path="PRODUCT/PRODUCT_THUMB_L/ASAMSCM195265783.jpg" link=""/>
                    <imageVersion versionTypeCode="PRODUCT_THUMB_XL" width="150" height="150" path="PRODUCT/PRODUCT_THUMB_XL/ASAMSCM195265783.jpg" link=""/>
                    <imageVersion versionTypeCode="PRODUCT_THUMB_110" width="110" height="110" path="PRODUCT/PRODUCT_THUMB_110/ASAMSCM195265783.jpg" link=""/>
                    <imageVersion versionTypeCode="PRODUCT_LARGE" width="300" height="300" path="PRODUCT/PRODUCT_LARGE/ASAMSCM195265783.jpg" link=""/>
                    <imageVersion versionTypeCode="PRODUCT_THUMB_50x50" width="50" height="50" path="PRODUCT/PRODUCT_THUMB_50x50/ASAMSCM195265783.jpg" link=""/>
                    <imageVersion versionTypeCode="PRODUCT_THUMB_75x75" width="75" height="75" path="PRODUCT/PRODUCT_THUMB_75x75/ASAMSCM195265783.jpg" link=""/>
                  </imageVersions>
             </objectImage>

My other XML examples for the other ASAMSCM195265783.jpg products are exactly the same as above but only differences are that objectTypeImageCode="OTHER_PRODUCT" instead of PRIMARY_PRODUCT and the displayOrder="8" and "9".

This is my current XSLT code:

<xsl:sort select="displayOrder" data-type="number" order="descending"/>
            <li class="prodthumbimg">
              <a>
                <xsl:attribute name="id">
                  <xsl:text>thumb</xsl:text>
                  <xsl:value-of select="position()" />

Here is the result in HTML:

<li class="prodthumbimg"><a id="thumb10" href="javascript:void(swap(9));" target=""><img src="http://www.jessops.com/ce-images/PRODUCT/PRODUCT_THUMB_50x50/ASAMSCM195265783_009.jpg" alt="Samsung NX1000 Compact System Camera in White with 20-50mm Lens" title="Samsung NX1000 Compact System Camera in White with 20-50mm Lens"></a></li>

<li class="prodthumbimg"><a id="thumb9" href="javascript:void(swap(8));" target=""><img src="http://www.jessops.com/ce-images/PRODUCT/PRODUCT_THUMB_50x50/ASAMSCM195265783.jpg" alt="Samsung NX1000 Compact System Camera in White with 20-50mm Lens" title="Samsung NX1000 Compact System Camera in White with 20-50mm Lens"></a></li>

<li class="prodthumbimg"><a id="thumb8" href="javascript:void(swap(7));" target=""><img src="http://www.jessops.com/ce-images/PRODUCT/PRODUCT_THUMB_50x50/ASAMSCM195265783_008.jpg" alt="Samsung NX1000 Compact System Camera in White with 20-50mm Lens" title="Samsung NX1000 Compact System Camera in White with 20-50mm Lens"></a></li>

Notice in the second line of my HTML result the product image ASAMSCM195265783.jpg is in the wrong place? I am trying to display that image in the third line of my HTML result. So basically the 2nd and 3rd html line needs to be swapped around so that the name of the product images can be sorted out properly in descending order.

Whenenver I use:

<xsl:sort select="position()" data-type="number" order="descending"/>
        <li class="prodthumbimg">
          <a>
            <xsl:attribute name="id">
              <xsl:text>thumb</xsl:text>
              <xsl:value-of select="position()" />

It does the job but only based on position() (the number of the product), I am trying do this based on the product name not the number within the product name (if that makes sense). Any help would be appreciated, thanks in advance (if you need further clarification or any further questions please let me

This is my desired result in HTML:

<li class="prodthumbimg"><a id="thumb10" href="javascript:void(swap(9));" target=""><img src="http://www.jessops.com/ce-images/PRODUCT/PRODUCT_THUMB_50x50/ASAMSCM195265783_009.jpg" alt="Samsung NX1000 Compact System Camera in White with 20-50mm Lens" title="Samsung NX1000 Compact System Camera in White with 20-50mm Lens"></a></li>

<li class="prodthumbimg"><a id="thumb9" href="javascript:void(swap(8));" target=""><img src="http://www.jessops.com/ce-images/PRODUCT/PRODUCT_THUMB_50x50/ASAMSCM195265783_008.jpg" alt="Samsung NX1000 Compact System Camera in White with 20-50mm Lens" title="Samsung NX1000 Compact System Camera in White with 20-50mm Lens"></a></li>

<li class="prodthumbimg"><a id="thumb8" href="javascript:void(swap(7));" target=""><img src="http://www.jessops.com/ce-images/PRODUCT/PRODUCT_THUMB_50x50/ASAMSCM195265783.jpg" alt="Samsung NX1000 Compact System Camera in White with 20-50mm Lens" title="Samsung NX1000 Compact System Camera in White with 20-50mm Lens"></a></li>

If there are anymore additional info that you would think is more relevant to post here to clarify further this issue please let me know, thanks.


Solution

  • I think the problem is that displayOrder is an attribute on the objectImage element, but your current sort is treating it as an element. You probably need to change it to the following

    <xsl:sort select="@displayOrder" data-type="number" order="descending"/>
    

    Also note, and this may just be a typo in your question, you state you want to "sort images in ascending order". If this is the case, you will obviously have to change "descending" to "ascending" in the above xsl:sort