Out of the box it can do a lot of things and you can easily customize display styles. Unfortunately applying css or using jquery in CQWP becomes quite painful.
For a recent project we had a requirement to pull News Pages from all subsites and display them using CQWP in a content slider.
I modified ContentQueryMain.xsl, Header.xsl and Item.xsl to get the results I need
Link to modified ContentQueryMain-modified.xsl file
Add CQWP to the page point to the site you need to get content from, set your filters add grouping - grouping generates css class for the list items, below is the generated code from a test CQWP
you can hide the group title by using empty Group Header style.
to activate content slider on the above list: (make sure you have .js, .css on your page )
Link to modified ContentQueryMain-modified.xsl file
- ContentQueryMain.xsl - Removed Columns, Removed assignment of <li> to an item and added it to the ItemStyle.xsl file, added styles to Group header depending on a group name.
lines modified in the original ContentQueryMain.xsl file:
Line 32: replaced dfwp-list with header-column for the class
Line 34: removed BeginListItem replaced with StartGroupStyle- prints out <li class="
Line 35: removed EndListItem replaced with EndGroupStyle - prints out </li>
Line 36: added endlistitemclass - prints out "> to close <li class="
Line 83: replaced class dfwp-column dfwp-list with listings clearfix
Line 84: removed %" - this was printing % at the end of the calculated column width (1, 2. 3 columns in the CQWP settings)
Line 85: removed $cbq_columnwidth, this was calucated width of the column, useless
modifications to CallHeaderTemplate - Line 140
<xsl:template name="OuterTemplate.CallHeaderTemplate"> <xsl:value-of select="$StartGroupStyle" disable-output-escaping="yes"/> <xsl:value-of select="translate(@*[name()=$Group],translate(@*[name()=$Group], 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789',''),'')"/> <xsl:value-of select="$endlistitemclass" disable-output-escaping="yes"/> <xsl:apply-templates select="." mode="header"> </xsl:apply-templates> <xsl:value-of disable-output-escaping="yes" select="$BeginList" /> </xsl:template>
after calling the template name I added variable declared on line 34 which will give us start of list item - $StartGroupStyle
next value is the Name of the group spaces removed
finishing up with $enndlistitemclass
so the above will generate header as a list item with nested unordered list
Line 148: removed $BeginListItem since the list item will be assigned to the item template
Line 170: removed $EndListItem
Modifications to CallFooterTemplate - Line 172
<xsl:template name="OuterTemplate.CallFooterTemplate"> <xsl:value-of disable-output-escaping="yes" select="$EndList" /> <xsl:value-of select="$EndGroupStyle" disable-output-escaping="yes"/> </xsl:template>Replaced $EndListItem with $EndGroupStyle
- Header.xsl
Default header style is generating <li> Header</li> this is no longer needed
Updated Default Header Template
<xsl:template name="DefaultHeader" match="*" mode="header"> <xsl:call-template name="OuterTemplate.GetGroupName"> <xsl:with-param name="GroupName" select="@*[name()=$Group]"/> <xsl:with-param name="GroupType" select="$GroupType"/> </xsl:call-template> </xsl:template>
- ItemStyle.xsl
Make sure you go through all Item template and add <li class="YOURCLASS"> after last variable declaration and </li> right before </xsl:call-template>
This is will not take much time but at the end you will be able to assign your own classes to each item style.
Item template for the page display will have the following structure
I will use default fields available in the page content type:
Rollup Image
Title
Page Content
you can use Comments field instead of Page Content, it depends on your presentation
<xsl:template name="News-Articles" match="Row[@Style='News-Articles']" 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="bodyContent"> <xsl:call-template name="removeMarkup"> <xsl:with-param name="string" select="@PublishingPageContent"/> </xsl:call-template> </xsl:variable> <li class="News-Articles"> <xsl:value-of select="@PublishingRollupImage" disable-output-escaping="yes"/> <a href="{$SafeLinkUrl}"> <xsl:value-of select="@Title"/> </a> <xsl:value-of select="substring($bodyContent,1,100)"/> <a href="{$SafeLinkUrl}" mce_href="{$SafeLinkUrl}" title="{@Title}">READ MORE</a> </li> </xsl:template> <xsl:template name="removeMarkup"> <xsl:param name="string"/> <xsl:choose> <xsl:when test="contains($string, '<')"> <xsl:variable name="nextString"> <xsl:call-template name="removeMarkup"> <xsl:with-param name="string" select="substring-after($string, '>')"/> </xsl:call-template> </xsl:variable> <xsl:value-of select="concat(substring-before($string, '<'), $nextString)"/> </xsl:when> <xsl:otherwise> <xsl:value-of select="$string"/> </xsl:otherwise> </xsl:choose> </xsl:template>
Add your own styles and that's pretty much it.
Add CQWP to the page point to the site you need to get content from, set your filters add grouping - grouping generates css class for the list items, below is the generated code from a test CQWP
<ul class="listings">
<li class="ABOUTUS">ABOUT US
<ul class="header-column">
<li class="Vol-Opps"> <a href="#">About Us</a><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sodales urna turpis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam egestas risus sed justo blandit tincidunt. Cras cursus enim a massa commodo commodo.
( <a title="About Us" href="#">...</a> ) </li>
<li class="Vol-Opps"> <a href="#">Publications</a><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sodales urna turpis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam egestas risus sed justo blandit tincidunt. Cras cursus enim a massa commodo commodo.
( <a title="Publications" href="#">...</a> ) </li>
<li class="Vol-Opps"> <a href="#">Newsroom</a><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sodales urna turpis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam egestas risus sed justo blandit tincidunt. Cras cursus enim a massa commodo commodo.
( <a title="Newsroom" href="#">...</a> ) </li>
</ul>
</li>
</ul>
you can hide the group title by using empty Group Header style.
to activate content slider on the above list: (make sure you have .js, .css on your page )
<script type="text/javascript">
$(document).ready(function(){
$('.ABOUTUS>ul').bxSlider();
});
</script>
