Web application developer

Creating an Xslt macro in Umbraco

umbraco xml

Written by: willem | Mar 22 2013 11:19 PM

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.

001

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.

002

Select all the code in it and copy it by pressing ctrl+c. Now right-click the "XSLT files" folder en select "create".

003

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.

004

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:

      <div class="entry-content">
        <xsl:value-of select="$post/bodyText" disable-output-escaping="yes"/>
      </div>

Replace this with:

<!-- show firs paragraph only -->
      <xsl:variable name="replacedParagraphs" select="umbraco.library:Replace(umbraco.library:Replace(bodyText, '&lt;/p&gt;', '|'), '&lt;p&gt;', '')"/>
      <xsl:variable name="listParagraphs" select="umbraco.library:Split($replacedParagraphs, '|')"/>
      <xsl:variable name="firstParagraph" select="$listParagraphs/value [1]"/>
      <p>
        <xsl:value-of select="$firstParagraph" disable-output-escaping="yes"/>
      </p>

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.

005

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.

006

007

008

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.

009

Select "My Blog List Posts" and click "OK".

010

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.

011

No Comments

Add a Comment

About Me

I'm a web application developer specializing in asp.net. I have skills in asp.net, C#, html5, javascript, asp.net mvc, design patterns and more.

more about me

Random background module

This module for Orchard CMS lets you upload a list of images. For every page it chooses one randomly and sets it a the background image.

Go to project page on CodePlex
Download module

The Monack Framework

This open source framework makes it easy to build and develiver custom web applications. Unfortunately I can't spent much time on it so it is still work in progress. 

More about MonackFr
Project page at CodePlex

Orchard

Since I decided to create this website in Orchard and didn't know anything about
it when I started, I also post my experiences with this CMS.