Monday, January 28, 2008

Adding CSS or JavaScript to your mastertemplate based on documenttype

The way I normally work when making websites is to use several CSS-files and JavaScript-files. So most of the time I have a main.css and general.js file that is included in every page. But when I have pages that needed separate styling or clientside functionality I add for example a news.css and news.js. So I the visitor only has to download these file when needed.

In Umbraco there is no build-in function to append to the <head>-section of your mastertemplate from your childtemplate. To solve this I see several solutions :

  1. Build multiple mastertemplate
  2. Use a macro

Because solution 1 needs a lot of maintenance I decided to build a macro.

How does it work :

You insert this macro in to your mastertemplate. In the macro you decide based on the nodeTypeAlias attribute of the currentPage which CSS-file or JavaScript-file to add.

Here is the XSLT you need

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE xsl:stylesheet [
  &amp;lt;!ENTITY nbsp "&#x00A0;">
    exclude-result-prefixes="msxml umbraco.library">

  <xsl:output method="xml" omit-xml-declaration="yes"/>

  <xsl:param name="currentPage"/>

  <xsl:template match="/">

      <xsl:when test="$currentPage/@nodeTypeAlias = 'News'">
        <xsl:call-template name="css">
          <xsl:with-param name="file">/css/news.css</xsl:with-param>
      <xsl:when test="$currentPage/@nodeTypeAlias = 'TextPage'">
        <xsl:call-template name="script">
          <xsl:with-param name="file">/scripts/textpage.js</xsl:with-param>


  <xsl:template name="css">
    <xsl:param name="file" />
    <xsl:element name="link">
      <xsl:attribute name="rel">stylesheet</xsl:attribute>
      <xsl:attribute name="type">text/css</xsl:attribute>
      <xsl:attribute name="href">
        <xsl:value-of select="$file"/>

  <xsl:template name="script">
    <xsl:param name="file" />
    <!-- to prevent that a self closing script tag is generated we use the xsl:text-->
    <xsl:text disable-output-escaping="yes"><![CDATA[<script language="javascript" type="text/javascript" src="]]></xsl:text>
    <xsl:value-of select="$file"/>
    <xsl:text disable-output-escaping="yes"><![CDATA["></script>]]></xsl:text>

If you think there is a way to improve this let me know !

Wednesday, January 23, 2008

Testing MySql support for Umbraco

Most recently, new core team member and fellow Belgian Ruben Verborgh, created a data-layer for Umbraco with support for MySql. You can read about it here. I decided to try it out because my current hosting supports MySql and not MS SQL. Everything runs as expected, except for a known bug in the media section. If you try to upload a file you will get a error, but the file gets uploaded, only some properties are not being saved. The MySql support will be officialy released with Umbraco 3.1.

Converting a DotNetNuke site to Umbraco

I recently discovered Umbraco when I was looking for an alternative to DotNetNuke. After playing around with it for a couple of evenings, I decided to convert a site running on DotNetNuke 2.1.2 on a Access database to Umbraco. The first steps I took to get to know Umbraco were :

  1. Install Umbraco as described here
  2. Install the Creative Web Specialist Website package and see how it works
  3. Googled for some XSLT tutorials to brush up my knowledge on it, because Umbraco is extensible through XSLT macro's
  4. Installed a clean Umbraco instance and tried out the screencasts found here.
The following things will have to be done to convert the site :
  1. Create a template for the site
  2. Create a guestbook package using a .NET usercontrol to post messages
  3. Import the guestbook messages from the old site.
  4. Create a news package with archive using a ActionHandler save the news items in a correct subfolder similar to the blog package
  5. Create a picture gallery package using SWFUpload for uploading pictures
  6. Create events package
  7. Create a members section using the MemberControls
  8. Maybe more that I can't think of now
Some extra things I want to do is :
  1. Test the MySQL support recently created by Ruben Verborgh
  2. Create a Data Layer for MS Access or another DB. This is mostly a learning project for the Umbraco source.
I'll keep updating this blog with my progress. Cheers ! Dave