Using Tags In Umbraco

On one of my current projects we needed to create a custom article feature which revolved around using the TAGS DataType which ships with Umbraco, in this little blog post I’ll show you how to use the TAGS DataType to create your own mini article system and give you some useful XSLT snippets to save you the time I had to take to get it working. [more]

TAGS are a way to to categorise your pages/content so you can pull through certain content based on a TAG, you can also have TAG groups so within one installation you could have the same TAG names but associated to different groups.  For example you could have a TAG group called ‘FAQ’ and ‘News’ but both groups have a tag called ‘general’ – Using TAG groups mean you could pull through all content tagged with General but differentiate between FAQ and News items.

For this blog post we just want to create little article system, so lets create a new TAG group and call it ‘Articles’ go to Developer > Data Types In your Umbraco UI and create a new DataType called ‘Article Tags’ like below

Notice the render control is ‘Tags’, and the Tag Group is ‘Articles’ – We will use this group name in the XSLT so we know we are pulling through the correct group in case we decide to add another group at a later date.  Once created you should see your ‘Article Tags’ DataType in the list of DataTypes

Now we have this DataType created we can now add this to any document type so the users can add TAGS to the created page – For this example I’ll create a DocType called ‘Article’ and added some of the usual properties I add as well as the ‘ArticleTags’ DataType we created above.

Now I have this DocType the users can add tags to their Documents in the Umbraco UI (This is how it looks in the UI)

Great, now we have a TAGGING system in place we need to look at how we pull out the data using XSLT in the front end – Well firstly Umbraco comes with a TAGS Library already built in, its what the original Blog4Umbraco uses to categorise the blogs (And I suspect the new Blog will also use it)

So we just need to implement the XSLT tagsLib: Extension that Blog4Umbraco uses – This is SO simple, all you need to do is open up the XSLT Extension config file found in the ‘config’ folder in the root of your Umbraco install

And just add the following line in the file and save it