Create different amount of columns with HTML using XML data and XSLT

Question

I have XML data that I need to layout like a table. I will be using this on multiple pages with different columns needed for different pages.

<Videos>
  <Video ID="1">
    <Title>Video #1</Title>
    <Img>http//www.test.com/Images/Img1.jpg</Img>
    <URL>http://www.youtube.com/watch?v=ABCDE12345</URL>
  </Video>
  <Video ID="2">
    <Title>Video #2</Title>
    <Img>http//www.test.com/Images/Img2.jpg</Img>
    <URL>http://www.youtube.com/watch?v=12345ABCDE</URL>
  </Video>
  <Video ID="3">
    <Title>Video #3</Title>
    <Img>http//www.test.com/Images/Img3.jpg</Img>
    <URL>http://www.youtube.com/watch?v=A1B2C3D4E5</URL>
  </Video>
  <Video ID="4">
    <Title>Video #4</Title>
    <Img>http//www.test.com/Images/Img4.jpg</Img>
    <URL>http://www.youtube.com/watch?v=1A2B3C4D5E</URL>
  </Video>
</Videos>

This will have about 20 Videos, but more can be added so I need it to be dynamic in the way it creates the rows and columns. It will be the image as a link to the YouTube page with the title to the right of the image.

For one page I need there to be 3 videos per row:

Video#1 Video#2 Video#3
Video#4

For a different page I need there to be 2 videos per row:

Video#1 Video#2 
Video#3 Video#4

For a different page I need there to be 1 video per row:

Video#1 
Video#2 
Video#3 
Video#4

Thank you for any help you can give me

XSLT doesn't "layout" items, it might happen in XSL-FO or in HTML with CSS but then you need to first look at how such a target format does this, only then you can generate the format dynamically with XSLT. — Martin Honnen
– Martin Honnen, Commented Oct 9, 2020 at 14:56

Sebastien · Accepted Answer · 2020-10-09 17:12:18Z

Here's a way you could do this. You can simply modify the last template to include the data you actually need in your table cell.

<?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"/>
  
  <!-- Parameter to indicate the number of video elements per row -->
  <xsl:param name="vidCol" select="3"/>

  <xsl:template match="/">
    <html>
      <head>
        <title>Videos</title>
      </head>
      <body>
        <table>
            <xsl:choose>
              <xsl:when test="$vidCol = 1">
                <xsl:apply-templates select="Videos/Video" mode="grouping"/>  
              </xsl:when>
              <xsl:otherwise>
                <xsl:apply-templates select="Videos/Video[position() mod $vidCol = 1]" mode="grouping"/>
              </xsl:otherwise>
            </xsl:choose>
        </table>
      </body>
    </html>
  </xsl:template>
  
  <xsl:template match="Video" mode="grouping">
    <tr>
        <xsl:apply-templates select=". | following-sibling::Video[position() &lt; $vidCol]"/>
    </tr>
  </xsl:template>
  
  <xsl:template match="Video">
    <td>
      <xsl:value-of select="Title"/>
    </td>
  </xsl:template>
  
</xsl:stylesheet>

See it working here: https://xsltfiddle.liberty-development.net/pNvt6XS

Collectives™ on Stack Overflow

Create different amount of columns with HTML using XML data and XSLT

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related