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

Tuesday, September 30, 2008

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. 

whatsnew.png

 

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

Tags:

Read More Blogs here...


blog comments powered by Disqus

Tags

What's New

Newsletter

Nuestros Amigos

Living Life in Costa Rica Blog ~ REAL info about living in Costa Rica by our friend Vicki
Travelocafe ~ Eyewitness travel guides, travel news and tips for traveling on a shoestring
Car Rental Liberia ~ Are you planning to visit Costa Rica? Then get cheap car rental deals form Costa Rica Car Rental.

Latest from our Blog

Thursday, August 08, 2013 by Rayna LevinSunday, January 13, 2013 by Rayna LevinSaturday, December 29, 2012 by Rayna LevinWednesday, December 05, 2012 by Rayna LevinSunday, August 26, 2012 by Jessica Tyner

Featured Destinations

Recent Comments