Adjusting Images Rows and Columns using XSLT

Ramachandra Rao K · July 24th, 2010, 11:27 AM

hi,

i have an xml with the following structure
<?xml version="1.0"?>
<WorkItems>
<WorkItem WorkItemType="Bug">
<Graphs>
<Graph Width="400">Graph1</Graph>
</Graphs>
<Graphs>
<Graph Width="600">Graph2</Graph>
</Graphs>
<Graphs>
<Graph Width="400">Graph3</Graph>
</Graphs>
<Graphs>
<Graph Width="800">Graph4</Graph>
</Graphs>
<Graphs>
<Graph Width="400">Graph4</Graph>
</Graphs>
</WorkItem>
</WorkItems>

The problem is
I want to construct a table with max two columns and the width of the table should not be beyond 1000px. from the above xml if the sum of the widths of two adjust Graphs <=1000px then they should be displayed in the same row. or else they should be displayed in different rows . can anyone help me in constructing the required xslt template.

For Example1
if i have the following images with width as a follows
400,600,400,900,400,500.

then the table should be like

400,600 -1st row with 2 columns
400 - 2nd row with 1 column
900 - 3nd row with 1 column
400,500 - 2nd row with 2 column

Example2 (500,400,400,400)
output :
500,400
400,400.

Martin Honnen · July 25th, 2010, 07:41 AM

With only two columns it should be easy, process the first, third, fifth and so on element and then add the width of this element and the next sibling element and based on that number output one or two columns:

Code:

<xsl:stylesheet
  xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
  version="1.0">
  
  <xsl:output method="html" indent="yes"/>
  
  <xsl:template match="WorkItem">
    <table>
      <tbody>
        <xsl:for-each select="Graphs[position() mod 2 = 1]">
          <xsl:variable name="next" select="following-sibling::Graphs[1]"/>
          <xsl:choose>
            <xsl:when test="not($next)">
              <tr>
                <td colspan="2">
                  <xsl:value-of select="Graph"/>
                </td>
              </tr>
            </xsl:when>
            <xsl:when test="Graph/@Width + $next/Graph/@Width > 1000">
              <tr>
                <td colspan="2">
                  <xsl:value-of select="Graph"/>
                </td>
              </tr>
              <tr>
                <td colspan="2">
                  <xsl:value-of select="$next/Graph"/>
                </td>
              </tr>
            </xsl:when>
            <xsl:otherwise>
              <tr>
                <td>
                  <xsl:value-of select="Graph"/>
                </td>
                <td>
                  <xsl:value-of select="$next/Graph"/>
                </td>
              </tr>
            </xsl:otherwise>
          </xsl:choose>
        </xsl:for-each>
      </tbody>
    </table>
  </xsl:template>

</xsl:stylesheet>

When applied to

Code:

<WorkItems>
  <WorkItem WorkItemType="Bug">
    <Graphs>
      <Graph Width="400">Graph1</Graph>
    </Graphs>
    <Graphs>
      <Graph Width="600">Graph2</Graph>
    </Graphs>
    <Graphs>
      <Graph Width="400">Graph3</Graph>
    </Graphs>
    <Graphs>
      <Graph Width="800">Graph4</Graph>
    </Graphs>
    <Graphs>
      <Graph Width="400">Graph5</Graph>
    </Graphs>
  </WorkItem>
</WorkItems>

the output is

Code:

<table>
   <tbody>
      <tr>
         <td>Graph1</td>
         <td>Graph2</td>
      </tr>
      <tr>
         <td colspan="2">Graph3</td>
      </tr>
      <tr>
         <td colspan="2">Graph4</td>
      </tr>
      <tr>
         <td colspan="2">Graph5</td>
      </tr>
   </tbody>
</table>