|
Sample Situation: News articles are created in a list. The list has multiple metadata columns, an image thumbnail column, plus a multi-line column for the main article body of Rich Text. Information from this list is then displayed via a Dataview Web Part (DVWP) on a main portal page.
Desired functionality: The article body should be trimmed/truncated after a certain number of characters with a "more..." link to send to the entire list item.
This solution assumes:
- That you have proper permissions to create and edit pages and lists in the site
- That you are already familiar with basic creation of DVWP for displaying information.
- That the list for entering the news articles is already created. All the columns necessary for this solution are Title, Thumbnail, and Article. Other columns may be present and may be displayed if you choose.
This solution does not cover the creation or styling of the DVWP or any associated pages/content.
- Open SharePoint Designer to the site
- Create a new .aspx page, insert a web part zone and insert a Data View.
- Open the data source for your news list and show data.
- Insert the fields for Title, Thumbnail and Article into the DVWP as multiple item view.
- Rearrange the column order to suit.
- Now the fun begins…….
- Click "Split" to show both the design and the code.
- Click in the DVWP in the column created for "Article". This should highlight the column and also highlight the xsl coding for that column. You should find the following highlighted:
<xsl:value-of select="@Article" disable-output-escaping="yes"/>
- Replace this code with the following snippet:
<xsl:variable name="truncate-length" select="250" />
<xsl:value-of select="substring(@Article,1, $truncate-length)" disable-output-escaping="yes" />
<xsl:if test="string-length(@Article) > $truncate-length" >
<xsl:text>...</xsl:text>
<a href="Lists/News/DispForm.aspx?id={@ID}">more</a>
</xsl:if>
- You can change the truncate length in the select="XXX" to any number of characters.
- The <xsl:if…. Statement checks the length and only inserts the "…more" and hyperlink if the article is longer than the value of truncate-length.
You can create a custom dispform.aspx for the list if you want the article displayed in a particular way. But that is beyond this solution.
|