SharePoint - Custom CQWP using XSL

These are instructions on how to make a custom Content Query Web Part using the Fixed Image Size item style

1. Create a list with these fields:
1. Title - Single line text
2. Body - multiple lines of text
3. Icon - Picture
2. Put a content Query Web Part on the page
1. Link it to your list in Query section
2. Presentation:
1. Styles: Fixed Image Size
3. Fields to display:
1. Image: Icon
2. Title: Title [Custom Columns]
3. Description: Body
3. Open the XSL
1. Go to All site Content > Style Library> XSL Style Sheets
2. Make a backup copy of ItemStyle.xsl
3. Download a copy of ItemStyle.xsl and open it in your favorite text editor
4. Edit the XSL
1. Remove the HTML from the body
1. Search for all instances of <div class="description">
2. Replace it with this block:
3. <div class="description">

   <xsl:value-of disable-output-escaping="yes" select="@Description"/>

   </div>
2. Change the Fixed Image size style
1. Search for FixedItemSize
2. Replace the code with the block of code at the end of the post
5. Upload ItemStyle.xls back to the library, and publish it. 

    <xsl:template name="FixedImageSize" match="Row[@Style='FixedImageSize']" mode="itemstyle">

        <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="SafeLinkUrl">

            <xsl:call-template name="OuterTemplate.GetSafeLink">

                <xsl:with-param name="UrlColumnName" select="'LinkUrl'"/>

            </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>

        <div class="item">

            <xsl:if test="string-length($SafeImageUrl) != 0">

                <div class="image-area-left">

                    <a href="{$SafeLinkUrl}">

                      <xsl:if test="$ItemsHaveStreams = 'True'">

                        <xsl:attribute name="onclick">

                          <xsl:value-of select="@OnClickForWebRendering"/>

                        </xsl:attribute>

                      </xsl:if>

                      <xsl:if test="$ItemsHaveStreams != 'True' and @OpenInNewWindow = 'True'">

                        <xsl:attribute name="onclick">

                          <xsl:value-of disable-output-escaping="yes" select="$OnClickTargetAttribute"/>

                        </xsl:attribute>

                      </xsl:if>

                      <img class="image-fixed-width" src="{$SafeImageUrl}" title="{@ImageUrlAltText}"/>

                    </a>

                </div>

            </xsl:if>

            <div class="link-item" style="border-bottom: 1px solid #EDEDED;">

            <xsl:call-template name="OuterTemplate.CallPresenceStatusIconTemplate"/>

                <a href="{$SafeLinkUrl}" title="{@LinkToolTip}" style="font-size:x-large;">

                  <xsl:if test="$ItemsHaveStreams = 'True'">

                    <xsl:attribute name="onclick">

                      <xsl:value-of select="@OnClickForWebRendering"/>

                    </xsl:attribute>

                  </xsl:if>

                  <xsl:if test="$ItemsHaveStreams != 'True' and @OpenInNewWindow = 'True'">

                    <xsl:attribute name="onclick">

                      <xsl:value-of disable-output-escaping="yes" select="$OnClickTargetAttribute"/>

                    </xsl:attribute>

                  </xsl:if>

                  <xsl:value-of select="$DisplayTitle"/>

                </a>

                <div class="description">

<xsl:value-of select="@Created" />

<xsl:value-of disable-output-escaping="yes" select="concat(substring(@Description, 1, 500),'...')"/>

</div>

            </div>

        </div>

</xsl:template>

Sources: 

• https://blog.tallan.com/2014/10/01/displaying-enhanced-rich-text-in-content-query-web-part/
• https://blog.mastykarz.nl/generating-short-description-content-query-web-part/
• http://www.xsltfunctions.com/xsl/fn_substring.html
• http://www.xsltfunctions.com/xsl/fn_concat.html
• https://sharepointmalarkey.wordpress.com/2010/10/12/sharepoint-internal-field-names-sharepoint-2010/

Share on Google Plus

About Tom DeMeulenaere

Highly accomplished information technology professional with extensive knowledge in System Center Configuration Manager, Windows Server, SharePoint, and Office 365.