Customizing the blog posts in a SharePoint blog template

I am just going to say straight out I am not a developer, I am sure there are much better ways at tackling this type of change. I hope it works as well for you as it did for me.

Recently on the MSDN Forums, I came across a question asking how to just show a certain number of characters on a blog post, vs. the entire post. I knew we had done the exact same thing many times for our clients in the past. So I decided to see if I could do this and possibly help this SharePoint User out.

(Normal Blog Post)

Normal Blog Post

First thing I did was open the site where we had a similar customer request. Most of these changes were made in xsl so I knew all I had to do was to go to the xsl file and find the code I was looking for. (I know I should probably keep a note pad of all the code snippets that get reused.)

Once I saw what had to be changed, I opened one of my demo test sites and started to play.

  1. Open your blog site in SPD (SharePoint Designer)
  2. Check out and edit in advanced mode the default.aspx page.
  3. Make sure you are working in Split Mode for these next steps.
  4. In design view, click on the blog post text.
  5. Your List View Tools should show in the Ribbon. You want to click on the design tab, then in the Actions section select Customize XSLT and Customize Entire View.
  6. Once that is done you can start working in Code view.
  7. The code we are going to be working with is around line 405 in the code.
  8. I have the code that I copied from my other XSL and this has some HTML stripping to go along with it.
  9. I want to add this within the XSL style sheet and want this first part of code to be the first XSL Template listed. Approximately at line line 233 I want to add in a couple of spaces so I have room for my code.
  10. Add the following code.
    <!– used to strip out HTML from passed-in field –>
    <xsl:template name=”removeHtmlTagsFromField”>
    <xsl:param name=”html”/>
    <xsl:choose>
    <xsl:when test=”contains($html, ‘&lt;’)”>
    <xsl:value-of select=”substring-before($html, ‘&lt;’)”/>
    <!– Recurse through HTML removing all markup –>
    <xsl:call -template name=”removeHtmlTagsFromField”>
    <xsl:with-param name=”html” select=”substring-after($html, ‘&gt;’)”/>
    </xsl:call-template>
    </xsl:when>
    <xsl:otherwise>
    <xsl:value-of select=”$html”/>
    </xsl:otherwise>
    </xsl:choose>
    </xsl:template>
  11. Next we want to add more code to the XSL template that renders the body content (this is your post). Scroll down (approx line 425) until you find the XSL template that is called FieldRef_Note_body.Body. (<xsl:template name=”FieldRef_Note_body.Body” …).
  12. I want to add some spacing around this template so that I can add in more code. Place your cursor at the start of the XSL Template and hit Enter a few times to add this spacing. I do the same after the
    <xsl:param name=”thisNode” select=”.”/>
  13. Add the following code directly below <xsl:param name=”thisNode” select=”.”/>
    <!– call “removeHtmlTagsFromField” template to strip out html markup from the field –>
    <xsl:variable name=”BlogContent”>
    <xsl:call-template name=”removeHtmlTagsFromField”>
    <xsl:with-param name=”html” select=”@body]” />
    </xsl:call-template>
    </xsl:variable>
  14. Next we find the XSL value that is pulling the blog post content in the XSL template.
    However if you look at the XSL value that is actually pulling the content, you will notice its not the @body you would expect to see. So the select that we have in the Code to strip out the HTML markup will need to be updated (step 13).
  15. Change the SELECT statement to reflect what you found in your XSL Body template SELECT statement. ($thisNode/@*[name()=current()/@Name])
  16. I first take my existing line of code and just comment it out. Next we will add the code that will set the number of characters that you want to show on your blog post.
    <xsl:value-of select=”substring($BlogContent, 0, 320)” disable-output-escaping=”yes”/>
    <xsl:if test=”string-length($BlogContent)>320″>…</xsl:if>
  17. We added a conditional statement that if the post was greater than 320 characters then you have an ellipsis.
  18. You are done – Save, you will get a warning message, just hit yes and preview in your browser.

Here is the screen shot from the blog.

Please let me know if this helps. I would like to thank my co-worker Michael Mendelson on clarifying some of the XSL issues.

Thanks for reading!

,

  • Christian Haas

    Thanks a lot for the detailed explanation; I found your contribution on the MSDN forums, but without the screenshots I was lost and wrecked the page once.

    It works for me now; Previously I tried the approach by adding a new column to blog posts: Abstract, which was meant to be displayed instead of the Body. But I failed to add the condition check to display the body in case of a missing abstract…
    The benefit of the abstract column would be to be able to include formatting (even preview pictures), which this modification here removes.

  • Pratik

    How can i fetch the blog data from Visual Studio?

  • dany

    where to add google analytic code to a blog please

    • I add it to the master page.