rss Umbraco Blog

Implementing a Tags system

Umbraco  CSS  XSLT 
04 December 2008

There are different ways of doing it, and it's actually built into Umbraco, but I wanted to implement it from scratch as a training exercise to learn Umbraco. It involves several steps, so it's nice to summarize the process to get an overview.

Creating screenshots is rather time consuming, so I'll skip it this time.

My approach (thanks to Kenny / Xeed for pointing me in the right direction) :

  • Create a new datatype called Tags with the Checkbox list renderControl, and adding prevalues for each of the tags. 
  • In my Blog Post document type, add a Tags datatype instance 
  • Then check the tags that applies to each Blog Post instance in the content tree
  • The xml output will for each blog post instance be on the form

    <node attributes>

      <!-- blog post instance -->

      <data alias="bodyText" attributes>xhtml blob</data>

      <data alias="tags" attributes>comma seperated list of the checked tags</data>

    </node>

  • For the list of blog posts, implement a filter which only displays the the blog posts which has the requested tag checked. This involves getting a querystring argument into XSLT, which I will store as a variable called filterBy, and using it when iterating through the list of blog posts.

    <xsl:param name="currentPage"/>

    <xsl:template match="/">

      <xsl:variable name="filterBy" select="umbraco.library:RequestQueryString('tag')" />

      <xsl:for-each select="$currentPage/node [contains(./data[@alias='tags'], $filterBy)]">

        displaying the blog post here

      </xsl:for-each>

    </xsl:template>

  • Then output the comma seperated list of tags as a list of links using the tag name as a filter:

    <xsl:variable name="tags" select="umbraco.library:Split(./data [@alias = 'tags'], ',')" />

    <xsl:for-each select="$tags/value">

      <a href="/blog.aspx?tag={.}">

        <xsl:value-of select="." />

      </a>&nbsp;

    </xsl:for-each>

Now that the tags are displayed for the blog, and filtering is implemented, it's time to make a listing of all the defined tags to ease navigation on the site.

First I did a simple listing of all the defined tags:

<xsl:for-each select="umbraco.library:GetPreValues(1099)//preValue">

  <a style="white-space: nowrap;" href="/blog.aspx?tag={.}">

    <xsl:value-of select="." />

  </a> &nbsp;

</xsl:for-each>

 

It works, but doesn't give the same impression as using a Tag cloud. Luckily, Christoph Ertl has already made an Umbraco package for this, so after downloading his ZIP file, it can be installed into Umbraco by going into the Developer section -> Packages -> Install local package. The dll is copied and registered and a XSLT and a Macro is automatically created and integrated into Umbraco. His package then needs to be pointed to my tags. This involves changing his method calls in his TagCloud.xslt to :

<xsl:value-of select="TagCloud.Helper:RenderTags($currentPage/ancestor-or-self::node/descendant-or-self::node[@nodeTypeAlias = 'BlogPost' and string(data [@alias='umbracoNaviHide']) != '1'], 'tags', '&lt;a class=tc{1} href=&quot;/blog.aspx?tag={0}&quot;&gt;{0}&lt;/a&gt; ', 6)" disable-output-escaping="yes"/>


Then it's just a matter of calling his Macro from my master template:

<umbraco:Macro Alias="TagCloud" runat="server"/>


and adding css styles for the generated links:

/* Tag cloud */

a.tc1 { font-size: 100%; font-weight: 200;  }

a.tc2 { font-size: 110%; font-weight: 300;  }

a.tc3 { font-size: 120%; font-weight: 500;  }

a.tc4 { font-size: 130%; font-weight: 600;  }

a.tc5 { font-size: 145%; font-weight: 800;  }

a.tc6 { font-size: 160%; font-weight: 900;  }

/* KEEPING default hover behaviour

a.tc1:hover, a.tc2:hover, a.tc3:hover, a.tc4:hover, a.tc5:hover, a.tc5:hover, a.tc6:hover { text-decoration:underline; }

*/


 5 comment(s)



Setting up hosting of umbraco v4 site on discountasp.net

Umbraco 
24 April 2010

Having developed the site on Umbraco v4 locally (started on beta 2, upgraded to RC1), I decided to use the DiscountASP.NET European datacenter (UK) for hosting.

Locally I was using the free SQLExpress (SQL Server 2005 based) and the IIS built into Vista Ultimate. When signing up I decided to use Microsoft 2008 Server, and Microsoft SQL Server 2008. Here's a summary of the steps involved :

  • Set Application Pool Pipeline Mode to "Classic" under IIS Tools in the discountasp.net web admin
  • Copy the whole wwwroot local directory and database backup onto the hosting (through FTP)
  • Restore the database backup through the discoutasp.net web interface
  • Start Visual Studio 2008 and Open website.. Choose FTP and supply credentials for the new domain. It works best for me if unchecking "Passive connection.."
  • Open web.config in VS and update the connectionstring under /configuration/appSettings umbracoDbDSN key and /configuration/connectionStrings
  • Delete the index.htm placed on the root by discountasp.net

That's it. It just works! :-)

It seems as DiscountASP.net has the right prerequisites to run Umbraco v4 (Full trust level etc). It's also popular amongst the other Umbraco developers.

 6 comment(s)