Tagging and Umbraco

I recently had to implement tagging of content in an Umbraco site that I built. It’s not a very publicised feature of Umbraco, but the functionality is all there in the APIs. There are also a couple of very good extensions that can be installed to make your job easier.

I’ve set up a blank Umbraco 4.7.2 site that I’ll be adding tagging, tag management, and then search/display of tags to.

Extensions

The extensions to install are:

  1. Sniper Systems Tags Control – a jquery-based replacement for the built-in ‘tags’ datatype. This one adds autocomplete, and is easier to use
  2. Tag Manager – a custom administration area section for the management of tags. Allows the editor to edit and remove existing tags. Handy for occasions where tags have been typo’d, or when you need to see all content associated with a particular tag.

One thing to watch for after installing Tag Manager is that you’ll need to log out/in, and also provide your users access to that section. The “admin” user has access by default.
2012-08-10_15-09-24

Setting up

Install both extensions into your site, and then do the following:

  1. Create a new DataType that uses the “Sniper Tags” control. I called mine “CWS: Tag” because I’ve installed it on a site that’s built with the Creative Website Starter Kit. Ensure that you put something into the “group” field.
    2012-08-10_14-40-26
  2. Add a new property to your Document Type that uses the DataType we just configured. I’m going to be tagging images in this example, so I added it to the “Image” Document Type:
    2012-08-10_14-54-22

You can now go in and add some tags to your content:
image

Autosuggest for existing tags:
image

Using the tag data on the front-end of the website

Some possible scenarios that you might want to pursue are:

  • Listing the tags on a particular item
  • Searching by tag name
  • Displaying related content based on tags

These are all quite simple to achieve through the use of the built-in functionality in umbraco.cms.businesslogic.Tags. Personally, I find a tool like ILSpy handy when I’m on the go and don’t have access to the Internet. With it, I can view what methods are available to be used.
image

Listing all related tags

Listing all related tags is simple, thanks to DynamicNode and Razor. Something as simple as this inline macro in your page template will display the related tags, if any exist:

<umbraco:Macro runat="server" language="cshtml">
  @if (@Model.HasProperty("tags"))
  {
    <ul>
        @foreach (var tag in @Model.tags)
        {
           <li>@tag</li>
        }
    </ul>
  }
</umbraco:Macro>

Here’s how they appear on my test site:

image

Searching by tag name

Searching by tag name is also quite simple. All that’s needed is a new page template that will hold the search results listing.

We’ll take advantage of Umbraco’s functionality that allows for template switching on the fly. I created a new template with the alias “Tag_Search”. That will allow me to access that particular template from anywhere on the site if I include the alias name in the URL:
http://umbracotest.local/tag_search.aspx?tags=structures

The template itself is quite basic. It’s only there to hold a reference to the Razor macro that we’ll create next:

<%@ Master Language="C#" MasterPageFile="~/masterpages/CWS_Master.master" AutoEventWireup="true" %>

<asp:content ContentPlaceHolderId="headerLinksContent" runat="server">  
</asp:content>

<asp:content ContentPlaceHolderId="SideBarContent" runat="server">  
</asp:content>

<asp:content ContentPlaceHolderId="ChildContent" runat="server">
    

Tag Search Results

</div> </asp:content>

The macro behind this page needs to do several things:

  1. Pick up the value of “tags” out of the querystring
  2. See if there are any content items that match those tags:
    1. If there are none, alert the user that there were no matches
    2. If some were found, display them

A simple example of this macro is shown below. The key to this is either of the following methods:

  1. umbraco.cms.businesslogic.Tags.GetNodesWithTags(string tags)
    or
  2. umbraco.cms.businesslogic.Tags.GetDocumentsWithTags(string tags)
@inherits umbraco.MacroEngines.DynamicNodeContext
@using System.Text
@using umbraco.MacroEngines
@using umbraco.cms.businesslogic.Tags

@{   
    string searchFor = Request["tags"];
  
    if(string.IsNullOrEmpty(searchFor))
    {
        @* No tags were specified *@ 
        <p>Please specify a tag to search for</p>
        return;
    }
  
    var matchingNodes = Tag.GetNodesWithTags(searchFor).ToList();

    string tagsText = searchFor.Split(',').Count() > 1 ? "tags" : "tag";
    
    if (matchingNodes.Count < 1)
    {
       @* No results were found for the specified tags *@ 
       <p>No tagged items were found that matched the @tagsText: @searchFor</p>
       return;        
    }
  
     @* Some results were found for the specified tags *@ 
     <p><strong>@matchingNodes.Count</strong> images were found that matched the @tagsText: "@searchFor"</p>
  
      <ul>
      @foreach (var node in matchingNodes)
      {
        dynamic dn = new DynamicNode(node.Id);
  
        <li><a href="@dn.Url">@dn.Name</a></li>
      }
      </ul>
}

The above macro results in this:image

You can also search for multiple tags, delimited by commas:image

Another version could look something like this:
image

Once this has been implemented, you can go back and revise the tag listing we created earlier to link to the tag search for each tag:
image

<umbraco:Macro runat="server" language="cshtml">
  @if (@Model.HasProperty("tags"))
  {
    

Tags

    @foreach (var tag in @Model.tags) {
  • @tag
  • }
} </umbraco:Macro>

Listing related images

Another use for tags would be to list images that are related to the current one, based on tags. The start of a macro that does this would be:

@inherits umbraco.MacroEngines.DynamicNodeContext
@using umbraco.MacroEngines
@using umbraco.cms.businesslogic.Tags

@{
  var allTags = string.Join(",",Model.tags.ToArray());
  var matchingNodes = Tag.GetNodesWithTags(allTags);
  
  //logic here to display all images, etc
  @matchingNodes.Count
}

This can be used to the following effect:
image

As you can see, using tags in Umbraco is very simple. Even a sysadmin like me can use them.

3 thoughts on “Tagging and Umbraco

  1. Thanks for great tutorial.
    When i try to filter tags with GetDocumentsWithTags method i usually get filtered nodes. However if the tags contains Turkish specific characters “?, ?” no results returned.
    Do you have any idea how to fix this?
    Thank you in advance.

    Like

  2. Hi I am not able to list images for the searched tags. I am able to get links exactly but i did tagged some photos in my website. Not sure whether i am missing some thing .please help me with the code.

    Above code for listing images is not fully written.

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: