blog_truncate

Quickly truncate (limit size) on blog post lists in a SharePoint 2010 blog.

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…

exaple2
[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.

blog_truncate_post

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

Capture

Leave any questions in the comments below.

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

12 comments

  1. Matt

    Thanks Tom, great post – have been searching for hours and your post got was exactly what I was after.

    How would you modify the page to only show posts made in the last 30 days?

  2. Farikhah

    i’ve already download your .xsl file and upload it to my root site collection site library..
    After I put in the relative url of the xsl file in the [XSL Link] input (“Miscellaneous” section). I got an error, “Unable to display this Web Part. To troubleshoot the problem, open this Web page in a Microsoft SharePoint Foundation-compatible HTML editor such as Microsoft SharePoint Designer. If the problem persists, contact your Web server administrator.”
    please give me advice, Thank you.

  3. Mware John

    Nice post.
    Continue with the good work.
    Thank you.

    I will truly appreciate if you can post one to do the same with a content query description.

    Thank you again.

  4. Jelmer

    Downloaded your xsl, applied to my blog, saved heaps of time. Quick ‘n dirty did the job :)

    Thanks!

  5. Thomas

    Hi Tom,

    this was a very nice post.

    You wrote that this can also be done with XSLT and without Javascript.
    It is possible to truncate blog posts without lossing the rich text format?

    Thank You and with kind regards,

    Thomas

  6. Tom, this is fantastic.

    You have saved me a few days work when the deadline for our internal Engineering blog is 3pm today!!

    Now I have a challenge – is it possible to now insert a thumbnail into the summary view of a post?

  7. nadeem

    First – thanks for this solution.

    I am getting an error – on line 15 when I follow the instructions from step 2. when I add

    Also do I copy the entire code from Jquery library between the Scripts tags ? or does it go in place of !!!!JQUERY SOURCE GOES HERE!!!! ? Also – do I copy the compressed code or uncompressed from Jquery site.

    Please advise. Thanks.,

Leave a Reply