FLASH PLAYER WARNING
You need to have atleast v10.x.x to view most of my Flash experiments. Please download the latest Flash Player version before continuing.
CSS Blog
Implementing a Tags system
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>
</xsl:for-each>
<xsl:for-each select="umbraco.library:GetPreValues(1099)//preValue">
<a style="white-space: nowrap;" href="/blog.aspx?tag={.}">
<xsl:value-of select="." />
</a>
</xsl:for-each>
<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', '<a class=tc{1} href="/blog.aspx?tag={0}">{0}</a> ', 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"/>
/* 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; }
*/