Creating an Xslt macro in Umbraco
In this blog post I will explain how to create a custom macro in Umbraco. I will do this by making a XSLT macro that shows a list of all blog items but only the first paragraph of each item.
Umbraco works with XML files that are transformed with XSLT files. To do this it uses macros. These macros can have an XSLT file that selects and processes the content that is shown on the page the macro is on.
I'm starting this tutorial from where I ended the last one about installing and altering the blog. Read it here.
For more information about the basics of XML and XSLT go to w3schools.com/xsl.
To show a list of blog entries there is a macro called "blog lists posts". This macro is provided by the Umbraco blog and I will copy this and edit it so it shows only the first paragraph and not the complete entry.
First log in as administrator and go to the developers area by clicking the developer icon on the lower left of the screen.
Next open the Macros folder, search for "Blog List Posts" and open it.
As you can see now, the macro uses "umbBlogListPosts.xslt" to process the content. This is the file we want to copy and change.
Open the "XSLT files" folder on the right, search for "umbBlogListPosts.xslt" and open it.
Select all the code in it and copy it by pressing ctrl+c. Now right-click the "XSLT files" folder en select "create".
In the pop-up enter a name that makes sense (I used "myBlogListPosts"). Make sure the "create macro" option is ticked. This will automatically create a macro for the xslt file. Click create.
Next the new xslt file will be opened in edit mode. Delete all generated content and paste the copied content from the "umbBlogListPosts.xslt".
The xslt code is mainly already doing what we need. Since we only want to change the way the content of the entry is shown we will only change this part. On line 165 you will find:
<xsl:value-of select="$post/bodyText" disable-output-escaping="yes"/>
Replace this with:
<!-- show firs paragraph only -->
<xsl:variable name="replacedParagraphs" select="umbraco.library:Replace(umbraco.library:Replace(bodyText, '</p>', '|'), '<p>', '')"/>
<xsl:variable name="listParagraphs" select="umbraco.library:Split($replacedParagraphs, '|')"/>
<xsl:variable name="firstParagraph" select="$listParagraphs/value "/>
<xsl:value-of select="$firstParagraph" disable-output-escaping="yes"/>
This piece of XSLT replaces all occurrences of <p> in bodyText with an empty string and all occurences of </p> with "|". Then it splits the body text into an array with items delimited with "|". Next it assigns a variable to the first value of this array and displays that. So unless the character "|" is used in the first paragraph, the first paragraph of bodytext will be shown now.
Now Save the file and op the folder "Macros" on the right. Find the macro named "My Blog Lists Posts" and open it. Check the option "use in editor" and save the settings.
Go to the "Content" section and create new content of the "Blog post" type and create in the new blog post 2 or more paragraphs (in the editor a new paragraph is created by pressing enter). Publish the blog post so it will be shown in the website.
Now open the Blog page. Remove all content in the page, even the already inserted macro. Click on the "Insert macro" button on the right of the editor's control bar.
Select "My Blog List Posts" and click "OK".
You will see the preview of the macro now, and that only the first paragraph is shown. After publishing the page the front-end of your website also shows the newly created macro.