• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 317
  • Last Modified:

Spliting album after every 4th item to the next line

Spliting album after every 4th item to the next line

Hi Experts,

I have a gallery xml, which is used to display 4 albums in one row in the html file in order of seriol no (sno) as shown in attached picture.

I only node need to pick from the albums where attribute isCurrent="True"

and order in which album needs to be shown is in sno="1", sno="2"


Below is my album node where attribute isCurrent="True" and from my complete xml is attached

The small image (or thumb image) that needs to be displayed for the album will be the  

first <thumbnail> or <thumbMedia> under <Media> node
<thumbnail>/Preview/staging/sevens/Images/Burj_Khalifa.jpg</thumbnail>

or
<thumbMedia>/Preview/staging/sevens/Images/Burj_Khalifa.jpg</thumbMedia>

under node <Media> album first node can be image or video

in case of Image, node will be <Image>
in case of Video, node will be <thumbMedia>

therefor result for below xml should be as follows:

<table>
<tr>
      <td colspan="8"> 2011 Media Gallery</td>
</tr>

<tr>
      <td> <img src="/Preview/staging/sevens/Images/img1.jpg"></img> </td>
      <td> <img src="/Preview/staging/sevens/Images/img2.jpg"></img> </td>
      <td> <img src="/Preview/staging/sevens/VideoImage/img3.jpg"></img> </td>       <!-- Here first node in Media node is Video and other has Image node, so it node can be anything Video or Image-->
      
      <td> <img src="/Preview/staging/sevens/Images/img4.jpg"></img> </td>
</tr>

<tr>
      <td> Album 1 </td>
      <td> Album 2 </td>
      <td> Album 3 </td>
      <td> Album 4 </td>
</tr>

<tr>
      <td><img src="/Preview/staging/sevens/Images/img5.jpg"></img> </td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
</tr>

<tr>
      <td> Album 5 </td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
</tr>


</table>

<Albums name="2011 Media Gallery" isCurrent="True">
   
    <Album name="Album 1" sno="1" id="tcm:501-638216">
      <Media>
        <Image sno="1">
          <description>The Burj Image-Asit</description>
          <thumbnail>/Preview/staging/sevens/Images/img1.jpg</thumbnail>
          <bigImage>/Preview/staging/sevens/Images/Burj_Khalifa.jpg</bigImage>
          <link></link>
        </Image>
       
        <Image sno="2">
        <description>The Burj Image-Asit</description>
        <thumbnail>/Preview/staging/sevens/Images/Burj_Khalifa.jpg</thumbnail>
        <bigImage>/Preview/staging/sevens/Images/Burj_Khalifa.jpg</bigImage>
        <link></link>
        </Image>
     </Media>    
     
    </Album>
   
    <Album name="Album 3" sno="3" id="tcm:501-638216">
              <Media>
                <Video sno="1">
                  <description>The Burj Image-Asit</description>
                  <thumbMedia>/Preview/staging/sevens/VideoImage/img3.jpg</thumbMedia>
                  <bigMedia>/Preview/staging/sevens/Images/Burj_Khalifa.jpg</bigMedia>
                  <link></link>
                </Video>
               
        <Image sno="2">
        <description>The Burj Image-Asit</description>
        <thumbnail>/Preview/staging/sevens/Images/Burj_Khalifa.jpg</thumbnail>
        <bigImage>/Preview/staging/sevens/Images/Burj_Khalifa.jpg</bigImage>
        <link></link>
        </Image>

               
             </Media>    
    </Album>
   
    <Album name="Album 2" sno="2" id="tcm:501-638216">
          <Media>
            <Image sno="1">
              <description>The Burj Image-Asit</description>
              <thumbnail>/Preview/staging/sevens/Images/img2.jpg</thumbnail>
              <bigImage>/Preview/staging/sevens/Images/Burj_Khalifa.jpg</bigImage>
              <link></link>
            </Image>
         </Media>    
    </Album>
   
  <Album name="Album 4" sno="4" id="tcm:501-638216">
          <Media>
            <Image sno="1">
              <description>The Burj Image-Asit</description>
              <thumbnail>/Preview/staging/sevens/Images/img4.jpg</thumbnail>
              <bigImage>/Preview/staging/sevens/Images/Burj_Khalifa.jpg</bigImage>
              <link></link>
            </Image>
         </Media>    
    </Album>
   

  <Album name="Album 5" sno="5" id="tcm:501-638216">
          <Media>
            <Image sno="1">
              <description>The Burj Image-Asit</description>
              <thumbnail>/Preview/staging/sevens/Images/img5.jpg</thumbnail>
              <bigImage>/Preview/staging/sevens/Images/Burj_Khalifa.jpg</bigImage>
              <link></link>
            </Image>
         </Media>    
    </Album>


  </Albums>
 
 
  Please help me in creating this complex xslt
 
  Many Thanks
otherAlbum.jpg
ImageGallery.xml
0
tia_kamakshi
Asked:
tia_kamakshi
  • 3
  • 3
1 Solution
 
Geert BormansCommented:
Well, this is not SO complex, if you can rely on the fact that the @sno of the Album are numbered with a predictable increment
so 1, 2, 3, 4, 5
and not
1, 3, 4, 5
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
    version="1.0">
    <xsl:strip-space elements="*"/>
    <xsl:output indent="yes"/>
    

    <xsl:template match="Albums[@isCurrent = 'True']">
        <table>
            <tr>
                <td colspan="8"> 2011 Media Gallery</td>
            </tr>
            <xsl:apply-templates select="Album[@sno mod 4 = 1]">
                <xsl:sort select="@sno" data-type="number" order="ascending"/>
            </xsl:apply-templates>
        </table>
    </xsl:template>
    
    <xsl:template match="Album">
        <tr>
            <xsl:call-template name="output-album">
                <xsl:with-param name="sno" select="@sno"/>
            </xsl:call-template>
            <xsl:call-template name="output-album">
                <xsl:with-param name="sno" select="@sno + 1"/>
            </xsl:call-template>
            <xsl:call-template name="output-album">
                <xsl:with-param name="sno" select="@sno + 2"/>
            </xsl:call-template>
            <xsl:call-template name="output-album">
                <xsl:with-param name="sno" select="@sno + 3"/>
            </xsl:call-template>
        </tr>        
        <tr>
            <xsl:call-template name="output-album-name">
                <xsl:with-param name="sno" select="@sno"/>
            </xsl:call-template>
            <xsl:call-template name="output-album-name">
                <xsl:with-param name="sno" select="@sno + 1"/>
            </xsl:call-template>
            <xsl:call-template name="output-album-name">
                <xsl:with-param name="sno" select="@sno + 2"/>
            </xsl:call-template>
            <xsl:call-template name="output-album-name">
                <xsl:with-param name="sno" select="@sno + 3"/>
            </xsl:call-template>
        </tr>        
    </xsl:template>
    
    <xsl:template name="output-album">
        <xsl:param name="sno"/>
        <td>
            <xsl:choose>
                <xsl:when test="../Album[@sno = $sno]">
                    <xsl:for-each select="(../Album[@sno = $sno]/Media/*[@sno = 1]/thumbnail | ../Album[@sno = $sno]/Media/*[@sno = 1]/thumbMedia)[1]">
                            <img src="{.}"/>
                        </xsl:for-each>
                </xsl:when>
                <xsl:otherwise>
                    <xsl:text>&#160;</xsl:text>
                </xsl:otherwise>
            </xsl:choose>
        </td>
    </xsl:template>
    
    <xsl:template name="output-album-name">
        <xsl:param name="sno"/>
        <td>
            <xsl:choose>
                <xsl:when test="../Album[@sno = $sno]">
                    <xsl:value-of select="../Album[@sno = $sno]/@name"/>
                </xsl:when>
                <xsl:otherwise>
                    <xsl:text>&#160;</xsl:text>
                </xsl:otherwise>
            </xsl:choose>
        </td>
    </xsl:template>
    
</xsl:stylesheet>

Open in new window

0
 
tia_kamakshiAuthor Commented:
Really Great. I really appreciate your mastery on xslt

Can you please help me in understanding what code "mod 4 = 1" is doing below
<xsl:apply-templates select="Album[@sno mod 4 = 1]">


Also, I have applied your xslt on attached "ImageGallery.xml"

I am attaching the output.

It is listing all the albums where isCurrent="False", but it should only pick all the albums
where <Albums> node has attribute isCurrent="True"

<Albums name="2011 Media Gallery" isCurrent="True">

It should not pick the resutls where <Albums> node has attribute isCurrent="False"


<Albums name="2010 Media Gallery" isCurrent="False">

Output result has below extra code after html table is closed

<tr>
  <td>
    <img src="/Preview/staging/sevens/Images/Burj_Khalifa.jpg" />
  </td>
  <td> </td>
  <td> </td>
  <td> </td>
</tr>
<tr>
  <td>Jaipur Gallery</td>
  <td> </td>
  <td> </td>
  <td> </td>
</tr>


Please help me in fixing this issue

Many Thanks for your great help

 albumoutput.xml
0
 
tia_kamakshiAuthor Commented:
Also, on the output I donot wanted to write

<?xml version="1.0" encoding="utf-8"?>

on the start of the result

Please help me in fixing this as well

Many Thanks again
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
Geert BormansCommented:
you can get rid of the xml declaration by omitting it in the xsl:output

    <xsl:output indent="yes" omit-xml-declaration="yes"/>

you can get rid of the false Albums by adding a template for it (empty) such as

<xsl:template match="Albums[not(@isCurrent = 'True')]"/>

or by being selective on a higher level

    <xsl:template match="Gallery">
        <html>
            <body>
                <xsl:apply-templates select="Albums[@isCurrent = 'True']"></xsl:apply-templates>
            </body>
        </html>
    </xsl:template>

I have attached a new iteration

"mod" gives the remainder after integer division
Album[@sno mod 4 = 1] means the Album of which the @sno divided by four has a remainder of one
it helps me to generate a <tr> for the 1st, the 5th, the 9th, the 13th, .....

This is how you deal with seperating rows in a table in XSLT
make the row for the first cell, and pull in the other cells at that level



<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
    version="1.0">
    <xsl:strip-space elements="*"/>
    <xsl:output indent="yes" omit-xml-declaration="yes" method="html"/>
    
    <xsl:template match="Gallery">
        <html>
            <body>
                <xsl:apply-templates select="Albums[@isCurrent = 'True']"></xsl:apply-templates>
            </body>
        </html>
    </xsl:template>

    <xsl:template match="Albums">
        <table>
            <tr>
                <td colspan="8"> 2011 Media Gallery</td>
            </tr>
            <xsl:apply-templates select="Album[@sno mod 4 = 1]">
                <xsl:sort select="@sno" data-type="number" order="ascending"/>
            </xsl:apply-templates>
        </table>
    </xsl:template>
    
    <xsl:template match="Album">
        <tr>
            <xsl:call-template name="output-album">
                <xsl:with-param name="sno" select="@sno"/>
            </xsl:call-template>
            <xsl:call-template name="output-album">
                <xsl:with-param name="sno" select="@sno + 1"/>
            </xsl:call-template>
            <xsl:call-template name="output-album">
                <xsl:with-param name="sno" select="@sno + 2"/>
            </xsl:call-template>
            <xsl:call-template name="output-album">
                <xsl:with-param name="sno" select="@sno + 3"/>
            </xsl:call-template>
        </tr>        
        <tr>
            <xsl:call-template name="output-album-name">
                <xsl:with-param name="sno" select="@sno"/>
            </xsl:call-template>
            <xsl:call-template name="output-album-name">
                <xsl:with-param name="sno" select="@sno + 1"/>
            </xsl:call-template>
            <xsl:call-template name="output-album-name">
                <xsl:with-param name="sno" select="@sno + 2"/>
            </xsl:call-template>
            <xsl:call-template name="output-album-name">
                <xsl:with-param name="sno" select="@sno + 3"/>
            </xsl:call-template>
        </tr>        
    </xsl:template>
    
    <xsl:template name="output-album">
        <xsl:param name="sno"/>
        <td>
            <xsl:choose>
                <xsl:when test="../Album[@sno = $sno]">
                    <xsl:for-each select="(../Album[@sno = $sno]/Media/*[@sno = 1]/thumbnail | ../Album[@sno = $sno]/Media/*[@sno = 1]/thumbMedia)[1]">
                            <img src="{.}"/>
                        </xsl:for-each>
                </xsl:when>
                <xsl:otherwise>
                    <xsl:text>&#160;</xsl:text>
                </xsl:otherwise>
            </xsl:choose>
        </td>
    </xsl:template>
    
    <xsl:template name="output-album-name">
        <xsl:param name="sno"/>
        <td>
            <xsl:choose>
                <xsl:when test="../Album[@sno = $sno]">
                    <xsl:value-of select="../Album[@sno = $sno]/@name"/>
                </xsl:when>
                <xsl:otherwise>
                    <xsl:text>&#160;</xsl:text>
                </xsl:otherwise>
            </xsl:choose>
        </td>
    </xsl:template>
    
</xsl:stylesheet>

Open in new window

0
 
tia_kamakshiAuthor Commented:
Really Great.

Many Thanks once again for helping me.

Best Regards
0
 
Geert BormansCommented:
welcome
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

  • 3
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now