Today a client needed a quick fix to truncate the blog posts on the home page of their SharePoint 2010 blog site.

Transforming the posts like so…

[Click for larger version]

Here is the quick and dirty on how I did just that.*
* note: this can also be done within XSLT without JavaScript, which I can blog about too, but like I said, this is quick with less chance for error.

1.   Copy the blog.xsl from the 14 hive.  Grab a copy of the original here

Located at : C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\LAYOUTS\XSL

2.   Edit this file and add the following lines of code.

Around line 15 is where the template for the blog home page is applied. We are going to add the jQuery library here.

Go to the jQuery home page and click the link to download the lastest source. Copy this source code. We are going to paste it right inside the XML between CDATA tags.

  1: <xsl:template match="View[@BaseViewID='0' and List/@TemplateType='301']" mode="full">

  2:     <script type="text/javascript"><![CDATA[ !!!!JQUERY SOURCE GOES HERE!!!! ]]></script>

  3:     <xsl:apply-templates select="." mode="RenderView" />

  4:     <xsl:apply-templates mode="footer" select="." />

  5: </xsl:template>

3.   Lower down, around line 396 we are going to add more JavaScript.

  1: <xsl:if test="$ShowBody=1">

  2:           <div class="ms-PostBody">

  3:             <div>

  4:               <xsl:apply-templates select="$Fields[@Name='Body']" mode="PrintField">

  5:                 <xsl:with-param name="thisNode" select="$thisNode"/>

  6:                 <xsl:with-param name="Position" select="$Position"/>

  7:               </xsl:apply-templates>

  8:

  9:               <script type="text/javascript"><![CDATA[

 10:                   $(".ms-PostBody[rendered!='done'] > div > div").each(function(){

 11:

 12:                      if($(this).text().length > 400) {

 13:                              text = $(this).text().substring(0, 400);

 14:                              $(this).html(text + "... " + "<a href='" + $(this).parent().parent().parent().find(".ms-PostTitle a").attr("href")  + "'>Read More</a>");

 15:                      }

 16:

 17:                   }).attr("rendered","done");

 18:               ]]></script>

 19:             </div>

 20:           </div>

 21:         </xsl:if>

 22: 

Here is a quick breakdown of the code.

  1: // For each post in the list that hasn't already been truncated..

  2: // (We use an attribute called 'rendered' as the flag to check for already truncated posts)

  3: $(".ms-PostBody[rendered!='done'] > div > div").each(function(){

  4:

  5:    //If the text of the post has more than 400 characters.

  6:    // (the jquery .text() method is awesome because it strips all html)            

  7:    if($(this).text().length > 400) {

  8:

  9:       //Let's truncate the text.

 10:       text = $(this).text().substring(0, 400);

 11:

 12:       //And finally change the post content, adding a "..." and a more link, which we get the url from the current posts title

 13:       $(this).html(text + "... " + "<a href='" + $(this).parent().parent().parent().find(".ms-PostTitle a").attr("href")  + "'>Read More</a>");

 14:    }

 15:

 16: //This last piece add the renedered flag. Deeming this post truncated.                           

 17: }).attr("rendered","done");

4.   Now take this new blog.xml (You can rename it if you want) and upload it to your root site collection site library.

For example :

http://styledpoint.com/Style Library/XSL Style Sheets/Blog_new.xsl

5.   After you upload the file, navigate to the SharePoint 2010 blog site and put the home page into edit mode, edit the blog post lists web part.

Got to the “Miscellaneous” section and put in the relative url of the xsl file in the [XSL Link] input.

6.   Hit apply and it should work and you will something that looks like this.

Leave any questions in the comments below.

You can download my modified xslt file here > [blog_new.xsl]

This entry was posted on Tuesday, February 14th, 2012 at 3:08 pm and is filed under jQuery, SharePoint 2010. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.