Extended Content Query Web Part - 2 Column Box Layout

Before extending Content Query Web Parts (CQWP) in SharePoint refer to the following related blogs:

• MSDN,  Configuring and Customizing the Content Query Web Part
• Heather Solomon, Customizing the Content Query Web Part and Custom Item Styles
• Glyn Clough, Viewing raw data in a Content Query Web Part
• My previous blog, Content Query Web Part - Custom Item Style

The following example creates a 'Highlight Box' two column layout output from a SharePoint list by applying custom XSLT styles using the Content Query Web Part.  The result looks like this:

1. Make a copy of the SharePoint XSL stylesheets 'ItemStyle.xsl' and 'ContentQueryMain.xsl' located in the portal root Style Library (http://hostheader/Style%20Library/) and place the copies in a folder called 'Custom' within the Style Library (http://hostheader/Style%20Library/XSL%20Style%20Sheets/Custom/). Rename as 'ItemStyleExtended.xsl' and 'ContentQueryMainExtended.xsl'.
   
   
2. Open ContentQueryMainExtended.xsl in notepad:
   
1. Add the following new variables:
   
   
   <xsl:variable name="BeginListItemHighlightBoxLeft" select="string('<li class="dfwp-item highlightbox-item left">')" />
   
   
   <xsl:variable name="BeginListItemHighlightBoxRight" select="string('<li class="dfwp-item highlightbox-item right">')" />
   
   
2. Inside the OuterTemplate.CallItemTemplate insert a new xsl choose:
   
   <xsl:choose>
     <xsl:when test="@Style='HighlightBoxTable'">
       <xsl:choose>
         <xsl:when test="$CurPosition mod 2 = 1">
           <xsl:value-of disable-output-escaping="yes" select="$BeginListItemHighlightBoxLeft" />
         </xsl:when>
            <xsl:otherwise>
         <xsl:value-of disable-output-escaping="yes" select="$BeginListItemHighlightBoxRight" />
       </xsl:otherwise>
       </xsl:choose>
     </xsl:when>
     <xsl:otherwise>
       <xsl:value-of disable-output-escaping="yes" select="$BeginListItem" />
     </xsl:otherwise>
   </xsl:choose>
   
   
3. Open the ItemStyleExtended.xsl in notepad and create a new template at the end of the existing xsl:
   
   <xsl:template name="HighlightBoxTable" match="Row[@Style='HighlightBoxTable']" mode="itemstyle">
    
     <xsl:variable name="SafeLinkUrl">
       <xsl:call-template name="OuterTemplate.GetSafeLink">
         <xsl:with-param name="UrlColumnName" select="'LinkUrl'"/>
       </xsl:call-template>
     </xsl:variable>
   
     <xsl:variable name="SafeImageUrl">
       <xsl:call-template name="OuterTemplate.GetSafeStaticUrl">
         <xsl:with-param name="UrlColumnName" select="'ImageUrl'"/>
       </xsl:call-template>
     </xsl:variable>
   
     <xsl:variable name="DisplayTitle">
       <xsl:call-template name="OuterTemplate.GetTitle">
         <xsl:with-param name="Title" select="@Title"/>
         <xsl:with-param name="UrlColumnName" select="'LinkUrl'"/>
       </xsl:call-template>
     </xsl:variable>
   
     <xsl:variable name="LinkTarget">
       <xsl:if test="@OpenInNewWindow = 'True'" >_blank</xsl:if>
     </xsl:variable>
    
     <xsl:variable name="ImageClass" select="@Class" />
   
     <div class="highlight">
       <div class="highlightHead">
         <h3><a href="{$SafeLinkUrl}"><xsl:value-of select="@Title"/></a></h3>
       </div>
       <div class="highlightContentCtr">
         <a href="{$SafeLinkUrl}" target="{$LinkTarget}"><img align="left" class="{@Class}" src="{$SafeImageUrl}" alt="{@ImageUrlAltText}" /></a>
         <div class="highlightContent">
           <xsl:value-of select="substring(@Description,1,300)" disable-output-escaping="yes"/></div>
       </div>
     </div>
   
   </xsl:template>
   
   
4. Update Custom.css with the following styles:
   
   <style type="text/css">
   li.highlightbox-item {
      width:49%;
   }
   li.highlightbox-item.left {
      float:left;
      margin-right:10px;
   }
   li.highlightbox-item.right {
      float:right;
      margin-right:0;
   }
   div.highlight {
      background-color: #f7f7f7;
      padding: 0;
      border: 0;
      margin-bottom:10px;
      border-radius-top-left:5px;
      border-radius-top-right:5px;
      -moz-border-radius-topleft:5px;
      -moz-border-radius-topright:5px;
      -webkit-border-top-left-radius:5px;
      -webkit-border-top-right-radius:5px;
   }
   div.highlight div.highlightHead {
      padding: 0.5em;
      font-weight:bold;
      background-color: #e4e4e4;
      border-radius-top-left:5px;
      border-radius-top-right:5px;
      -moz-border-radius-topleft:5px;
      -moz-border-radius-topright:5px;
      -webkit-border-top-left-radius:5px;
      -webkit-border-top-right-radius:5px;
   }
   div.highlight div.highlightHead h3 {
      margin:0;
   }
   div.highlight div.highlightContentCtr {
      min-height:50px;
      border: 1px solid #e4e4e4;
      border-top:0;
   }
   div.highlight div.highlightContentCtr img {
      margin: 0 10px 0 0;
      border: 0;
      padding: 0;
   }
   div.highlight div.highlightContentCtr img.icon {
      width:50px;
      height:50px;
   }
   div.highlight div.highlightContentCtr img.image {
      width:75px;
      height:50px;
   }
   div.highlight div.highlightContent {
      padding: 10px 10px 4px 10px;
   }
   </style>
   
   
5. Add a Content Query Web Part (CQWP) to a page. Do not configure it in any way.
   
   
6. Export the Content Query Web Part to your desktop.
   
   
   
   
7. Open the exported CQWP in notepad and edit the following properties:
   
   <property name="Title" type="string">Extended Content Query</property>
   
   <property name="ItemXslLink" type="string">/Style%20Library/XSL%20Style%20Sheets/Custom/ItemStyleExtended.xsl</property>
   
   <property name="MainXslLink" type="string">/Style%20Library/XSL%20Style%20Sheets/Custom/ContentQueryMainExtended.xsl</property>
   
   
8. On the web part page where you would like the CQWP displayed, select Edit, Add a Web Part, Upload a Web Part:
   
   
   
9. On the web part page where you would like the CQWP displayed, select Edit, Add a Web Part, Imported Web Parts, Extended Content Query
   
   
   
10. Edit the Extended CQWP properties:
    
1. In the properties panel expand the Query node. Select the radio button Show items from the following list and enter the path to the associated SharePoint list, (which requires six columns including: Title, Image, Description, URL, Class and Order). Apply these changes by selecting the Apply button at the bottom of the properties panel.
   
   
2. Expand the Presentation node and in the Grouping and Sorting section set the Sort items by to ‘Order’.
   
   
   
   
3. In the Styles section set the Item style to HighlightBoxTable.
   
4. In the Fields to display section set as in the screenshot.
   
   
   
   
5. Expand the Appearance node and set the Chrome to none.
   
6. Select Ok.