Getting child pages in Umbraco and showing them in a table (matrix-like) structure

Table structure for child pages preview in Umbraco

One of the common tasks in web development is creating the preview of multiple objects. These objects might be a real-world objects or just a containers of a certain information. Obvious example is the upper-level preview page and a number of child pages. In Umbraco child pages as a separate page type may hold all sorts of information.

In my recent case I had an Umbraco document type that holds information about YouTube clip, like URL, description, performer, publication date and so forth. I needed to show a preview of all those clips stored as a child pages on the parent page in a table structure show on the picture. 

This can be done with a .NET code, but with XSLT it's much more interesting. Due to the language limitations it is not possible to use conventional loops, like in C#, but a recursion does the trick. Here's how to do it:

<xsl:variable  name="counter"  select="0"/>
<xsl:variable  name="NumberOfPages"  select="count($currentPage/* [@isDoc and string(umbracoNaviHide) != '1'])"/>


<xsl:template  match="/">
    
<!-- start writing XSLT -->
   <div>
<table  border="0"  cellpadding="2"  cellspacing="2">
<xsl:call-template  name="loop">
   <xsl:with-param  name="i">
      <xsl:value-of  select="0"/>
   </xsl:with-param> 
</xsl:call-template>
</table>
     </div>
</xsl:template>
    
   <xsl:template  name="loop">
     <xsl:param  name="i"  />    
     <xsl:if  test="$i &lt;= $NumberOfPages">
       <xsl:if  test="(($i -1) mod 3) = 0">
         <xsl:call-template  name="row">
           <xsl:with-param  name="i">
             <xsl:value-of  select="$i"/>
           </xsl:with-param>
         </xsl:call-template>
       </xsl:if>
       <xsl:call-template  name="loop">
         <xsl:with-param  name="i">
           <xsl:value-of  select="$i + 1"/>
         </xsl:with-param>
       </xsl:call-template>
     </xsl:if>
   </xsl:template>
  
   <xsl:template  name="row">
     <xsl:param  name="i"  />
     <tr  height="100">
     <xsl:for-each  select="$currentPage/* [@isDoc and string(umbracoNaviHide) != '1']">
       <xsl:sort  select="rV_NewsItemPubDate"  order="descending"/> 
       <xsl:if  test="position() &gt;= $i and position() &lt; ($i + 3)">
         <xsl:variable  name="PreviewImg"  select="./* [name() = 'rV_videoItemPreview']"/>       
         <xsl:if  test="$PreviewImg != ''">
           <td  valign="top">          
     ....

           </td>      
         </xsl:if>
       </xsl:if>      
     </xsl:for-each>  
     </tr>    
   </xsl:template>

 

Recursively working loop (template name="loop") calls the template 'row' passing the values with increment of 3 (1,4,7,10 and so forth). The for-each statement takes a sorted set of child pages and takes only three in relevant row. Then it renders whatever is needed in a table structure (<td>...</td). 

If we need the number of columns other than 3, then we need just to change this: 

<xsl:if   test="(($i -1) mod 3) = 0">

to find every forth or every second or third item in a sequence.