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
tia_kamakshiAsked:
Who is Participating?
 
Geert BormansConnect With a Mentor Information ArchitectCommented:
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
 
Geert BormansInformation ArchitectCommented:
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
Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

 
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
 
tia_kamakshiAuthor Commented:
Really Great.

Many Thanks once again for helping me.

Best Regards
0
 
Geert BormansInformation ArchitectCommented:
welcome
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.