RECENT BLOG ENTRIES

Saturday, June 25, 2011

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. 

Post a comment