Building MuchaCostaRica.Com - Creating a What's New Control

Hola!  I'm Brendan, the web guy here at MuchaCostaRica.Com.  I live in the states, so I'm going to leave the Costa Rica info posts to the experts (Rayna & Marina) , but I thought it might be cool to post some stuff here about the gears behind the scenes at MuchaCostaRica.Com.  Specifically, I'd like to share a bit about the CMS (Content Management System) that we use here, Umbraco.  Umbraco is a Free, Open Source CMS that's super easy to use, and super flexible. If you're new to Umbraco and like building web sites, head over there now and check it out.   What I'm going to post here today is a simple overview of how I made the "What's New" control that you see over there on the sidebar of our site. 

For the nice easing and scrolling carousel, I used the jCarousel plugin:

jCarousel is a jQuery plugin for controlling a list of items in horizontal or vertical order. The items, which can be static HTML content or loaded with (or without) AJAX, can be scrolled back and forth (with or without animation).

That part was easy.. The hard part (well not really that hard) was creating an Umbraco Macro that sets up the jCarousel to display.  Here's the XSLT macro that I created to do the dirty work:

<?xml version="1.0" encoding="UTF-8"?> 
<!DOCTYPE xsl:Stylesheet [ <!ENTITY nbsp " "> ]> 
<xsl:stylesheet version="1.0" 
xmlns:xsl="http://www.w3.org/1999/XSL/Transform" 
xmlns:msxml="urn:schemas-microsoft-com:xslt" 
xmlns:umbraco.library="urn:umbraco.library" exclude-result-prefixes="msxml 
umbraco.library"> 
<xsl:output method="xml" omit-xml-declaration="yes" /> 
<xsl:param name="currentPage"/> 
<xsl:template match="/"> 
<!-- The fun starts here --> 
<ul id="whatsnew" 
class="jcarousel-skin-tango"> 
<xsl:for-each 
select="$currentPage/ancestor-or-self::node[@level=1]/descendant::node 
[string(data [@alias='umbracoNaviHide']) != '1'] [@nodeTypeAlias = 'TextPage'or 
@nodeTypeAlias = 'umbracoBlogPost']">         
<xsl:sort select="@id" order="descending"/>         
<xsl:if test="position() < 6"> 
<li> <img align="left" style="margin-right:3px;"> 
<xsl:attribute name="src">/images/<xsl:value-of select="@nodeTypeAlias" />.gif</xsl:attribute> 
</img> 
<xsl:value-of select="@writerName" /> posted <a  href="{umbraco.library:NiceUrl(@id)}"> 
<xsl:value-of select="data [@alias = 
'PageTitle']"/> </a> </li> 
</xsl:if> 
</xsl:for-each> 
</ul> 
</xsl:template> 
</xsl:stylesheet>

This is just a quick example and reference if you need to do the same thing on your Umbraco site.   Good luck!  Until next time, Pura Vida!  

-Brendan

Email This!