To solve these deficiencies we need to use a combination of techniques. We will start by creating a new list item style and apply it to our web part. We will also add the additional fields required to display our post content.
- Open the blog host site in SharePoint Designer and navigate to the Style Library. Open the folder XSL Style Sheets. Check Out and Open the file ItemStyle.xsl.
- In code view locate the ending </xsl:stylesheet> tag. Immediately above the end tag insert the following code.
<xsl:template name="CQFields" match="Row[@Style='CQFields']" mode="itemstyle">
<xsl:for-each select="@*">
P:<xsl:value-of select="name()" />
</xsl:for-each>
</xsl:template>
<xsl:template name="BlogRecentPosts" match="Row[@Style='BlogRecentPosts']" 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="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>
<xsl:variable name="LinkTarget">
<xsl:if test="@OpenInNewWindow = 'True'" >_blank</xsl:if>
</xsl:variable>
<div id="post">
<div class="postTitle">
<h2><a href="{$SafeLinkUrl}" target="{$LinkTarget}" title="{@LinkToolTip}">
<xsl:value-of select="$DisplayTitle"/>
</a></h2>
</div>
<div class="byLine"> posted @ <xsl:value-of select="msxsl:format-date(substring-before(@PublishedDate, ' '), 'MM/dd/yyy ')" />
<xsl:value-of select="msxsl:format-time(substring-after(@PublishedDate, ' '), 'hh:mm tt')" /> by <xsl:value-of select="@Author" />
</div>
<div class="postBody">
<xsl:value-of select="@Body" disable-output-escaping="yes" />
</div>
</div>
</xsl:template>
The first template, CQFields, renders the fields from the query so you can check your work. The second template is our post roll up template. This template requires our web part to deliver the fields Published Date, Body, and Author. We need to change our web part to make this template work.
- Return to the home page and choose Site Settings | Edit Page. From the web part Edit menu choose Export… Save the web part to your desktop.
- Open the web part file in Notepad and locate the line:
<property name="CommonViewFields" type="string"/>
Change it to:
<property name="CommonViewFields" type="string">Body, RichHTML;PublishedDate, DateTime</property>
-
We also need to add the PublishedDate field to our sort order.
Locate the line:
<property name="AdditionalGroupAndSortFields" type="string" null="true" />
And replace it with:
<property name="AdditionalGroupAndSortFields" type="string" >PublishedDate,Published Date</property>
- Return to your home page and delete the Recent Posts web part. Click Add a web part and choose Advanced Web Part gallery and options from the bottom of the dialog.
- Click the Browse header and choose Import from the menu.
-
Browse for your edited web part file and choose Open. Click Upload to upload your web part. Drag your recent posts web part into the top zone. The web part should look the same as before. Choose Edit | Modify shared web part. In the Presentation section click the drop down for Sort items by: and choose Published Date. Click Apply to save your changes.
-
In step 4 we added additional fields to our web part. "CQFields" helps you see what fields are returned. In the web part Presentation section change the Item style to CQFields and apply your changes. Your web part should look like this:
Notice our new fields Body and PublishedDate.
-
Changing the Item style to BlogRecentPosts should yield the following look:
-
Click OK to save your changes and your page should look like this:
Are we done? Maybe, maybe not…In our next post we'll customize the RSS output.