Tim

Footprints in the snow of a warped mind

Tag Cloud

AJAX (4) ASP (5) ASP.Net (36) Error Reporting (2) Atlas (2) Business (52) Business Start-up Advice (22) Client (6) Expanding Your Business (11) C# (3) Canoeing (4) Canoe Racing (5) Cheshire Ring Race (5) Racing (2) Training (4) CIMA (1) CSS (3) dasBlog (2) Design (7) Icons (1) General (34) Christmas (6) Fun and Games (10) Internet (15) Random (38) RX-8 (8) Home Cinema (2) Hosting (1) IIS (6) JavaScript (2) Multipack (1) Networking (1) Nintendo (1) OS Commerce (1) PHP (1) Press Release (1) SEO (4) Server Maintenance (2) Server Management (5) Software (7) Office (3) Visual Studio (6) Windows (3) Vista (1) SQL Server (9) The Site Doctor (68) Turnover Challenge (1) Umbraco (5) Web Development (32) WebDD (32) Wii (1)

Atom 1.0 RSS 2.0 CDF 

Search

<May 2008>
SunMonTueWedThuFriSat
27282930123
45678910
11121314151617
18192021222324
25262728293031
1234567

Recent Comments

Blog Archive

Various Links

Blogs I Read

 Craig's Blog
Craig Hawker's Blog
 Google Blog
Official Google Webmaster Central Blog
 Matt Cutts
Gadgets, Google, and SEO
 Ol' Deano's Blog
My mate Dean's blog on my space, equally as random as mine but not off on as much of a tangent!
 Sam's Blog
Sam is one of my younger brothers studying Product Design and Manufacture at Loughborough, this is his blog :) Enjoy!

Recent Tracks

last.fm - The Social Music Revolution

Disclaimer
The opinions expressed herein are my own personal opinions and do not represent my employer's view in any way.

newtelligence dasBlog 2.0.7226.0

Send mail to the author(s) Email Me (Tim Gaunt)

© 2008 Tim Gaunt.

Sign In

Get Windows Live Alerts

 Thursday, May 01, 2008

How to apply Heading Tags in Umbraco

Thursday, May 01, 2008 2:21:56 PM (GMT Standard Time, UTC+00:00)

I've seen a couple of posts recently about how to apply headings to text within Umbraco and the main suggestion is that you apply them by hacking about with the StyleSheets that just doesn't sit right with me.

We use a different method -that is to enable the format drop down list. To me it just seems cleaner but I get the feeling I'm about to start a big debate. The method we use was originally discussed here but in short download this zip file with the updated DLLs in and instructions.

6291-leftinymce.zip (241KB)

How to apply Heading Tags in Umbraco
Useful Links:  #  digg it!  del.icio.us  Technorati  email it!  Post CommentsComments [0]  Trackback Link
CategoriesTags: ASP.Net | Umbraco
 Monday, February 11, 2008

Random images in Umbraco

Monday, February 11, 2008 3:40:52 PM (GMT Standard Time, UTC+00:00)

Following on from a recent post of mine about how to setup changeable headers using the media picker in Umbraco a new site I have been working on required something a little extra -they wanted the headers to simply be chosen at random. from a given media folder.

First, create  a new (blank) XSLT file and add the following:

Random header images XSLT

<?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"
    xmlns:msxsl="urn:schemas-microsoft-com:xslt"
    xmlns:math="urn:schemas-hizi-nl:math"
    xmlns:Exslt.ExsltStrings="urn:Exslt.ExsltStrings"
    xmlns:Exslt.ExsltMath="urn:Exslt.ExsltMath"
    exclude-result-prefixes="msxml Exslt.ExsltMath Exslt.ExsltStrings math umbraco.library">

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

<xsl:param name="currentPage"/>

<msxml:script language="JavaScript" implements-prefix="math">
function random(numDie,numMax,numMin){
if (numMin==null){numMin=1;}
var sum=0;
for (var index=0;index&lt;numDie;index++){ 
sum+=Math.floor(Math.random()*(numMax-numMin) + numMin);
}
return "" + sum;
}
function floorme(numFloor){
return "" + Math.floor(numFloor);
}
</msxml:script>

<xsl:variable name="StartNode" select="/macro/StartNode/node/@id" />
<xsl:variable name="parent" select="umbraco.library:GetMedia($StartNode, 'false')" /> 
<xsl:variable name="random" select="math:random(1, count($parent/node)+1, 1)"/>

<xsl:template match="/">

    <xsl:for-each select="$parent/node">
        <xsl:if test="position()=$random">
            <xsl:if test="./data [@alias = 'umbracoExtension'] = 'gif' or ./data [@alias = 'umbracoExtension'] = 'jpg' or ./data [@alias = 'umbracoExtension'] = 'jpeg' or ./data [@alias = 'umbracoExtension'] = 'png'">
                <style type="text/css">
                #header{
                    background-image: url(<xsl:value-of select="./data [@alias = 'umbracoFile']"/>);
                }
                </style>
            </xsl:if>
        </xsl:if>
    </xsl:for-each>
</xsl:template>

</xsl:stylesheet>

What this does is it uses the StartNode (a media folder) passed in from the macro to loop through any valid files (in this case jpg/gif/png and pull out the image if it's valid. I was thinking about replacing the for-each loop and simply using the index but I'm not sure if there would be any performance improvement except for if there were a lot of header images in the folder.

You'll then need to create a new macro and add a parameter with the name "StartNode" and select "mediaCurrent" as the Type. That's it :)

I'd like to build on this and have a "valid" headers selector which would use a Multiple Media picker and would allow for banner ads to be selected at random but that can wait for a client that needs it ;)
Random images in Umbraco
Useful Links:  #  digg it!  del.icio.us  Technorati  email it!  Post CommentsComments [1]  Trackback Link
CategoriesTags: Umbraco | Web Development
 Tuesday, November 27, 2007

Changeable headers using the media picker

Tuesday, November 27, 2007 6:26:51 PM (GMT Standard Time, UTC+00:00)

A project we’re currently working on needs to have interchangeable header images. The theory is to set the header image on the parent page and then unless a template is specified for the page, it should use one of it’s ancestor’s.

Umbraco as a nice control called a “Media Picker” which I felt was perfect for the job as it meant you could easily share header images across the site and it also made sense from a user perspective to have a “Header Images” folder to choose from. The issue from my point of view was how to traverse up the tree until it found a header image to use. Imagine the following site map:

-Home
     -Products
          -Category
               -Product details (Custom header image)

If you’re on the products/category page it should display the header image from Home but when you’re on the product details page it needs to show the specified header image.

So how do you do it? It turns out it’s (fairly) simple using XSLT. The first issue I ran into was getting the URL of the media file from the media picker control, Umbraco offers a useful function to do this for you (well almost!). Using the function umbraco.library:GetMedia you are able to get the details on the file based on the media item id but it includes everything so you then need to use a little XSLT to select the attribute “umbracoFile”:

umbraco.library:GetMedia([XSLT TO SELECT THE FIELD],'false')/data [@alias = 'umbracoFile']

That should give you something along the lines of “/imgs/somefolder/somefile.jpg”

Now how can you traverse up the tree to get the data? Thanks to Morten Bock/Casey Neehouse for helping me understand this XSLT, but the following code should give you the URL of the nearest media item in the tree:

<?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="/">
    <xsl:choose>
        <xsl:when test="$currentPage/ancestor-or-self::node [string(data[@alias='pageBanner'])!=''][1] /data[@alias='pageBanner'] != ''">
            <xsl:value-of select="umbraco.library:GetMedia($currentPage/ancestor-or-self::node [data[@alias='pageBanner']!=''][1] /data[@alias='pageBanner'],'false')/data [@alias = 'umbracoFile']"/>  
        </xsl:when>
        <xsl:otherwise>
            <!-- The URL of the default banner just incase the user removes the homepage banner (would be better as a parameter) -->
        </xsl:otherwise>
    </xsl:choose>
</xsl:template>

</xsl:stylesheet>

Then add a macro to your project and you’re done :). You can see it in action on the new Lucy Switchgear website if you're interested, it's currently being written so it's bound to be a little rough around the edges but do let me know what you think. Our remit was to improve the CMS they had in place making it easier to manage the site and also sort out a few major issues from a SEO perspective. Although altering the design wasn’t part of the initial brief I think you’ll agree the facelift we’ve given the site is for the better (even if it’s just from a usability point of view).

 Monday, November 26, 2007

Naming conventions for Umbraco

Monday, November 26, 2007 10:30:56 AM (GMT Standard Time, UTC+00:00)

Having only recently started to use Umbraco I've taken a couple of days to familiarise myself with the way it works and try and get a few best practices in place, I expect these will be updated over time but you've got to start somewhere ;)

As with any code, I think it's very important to follow a consistent naming convention -whether it's the same one everyone else follows or not, you need to be able to pickup code you wrote months/years/decades ago and still understand it. Your styles will no doubt change over the years but you get the idea.

I've chosen to follow the following "style":

  • Document Types: Lowercase the first letter of the aliases followed by capitals for the new words (similar to Hungarian Notation). Use descriptive names i.e. Home Page for the document type as it'll be client facing. Suffix with "Page" if it is a page document type (as opposed to i.e. a screen shot)
  • Templates: If the template is specifically for a document type, use the same name for the template, if it relates to multiple document types name it logically i.e. "Master Template" or "Left Menu"
  • Macros: Prefix the macro alias with uppercase TSD to avoid conflicts with other macros. Prefix the name with [Source of the macro] i.e. [XSLT] or [User Control]. This is something I picked up from the sample package created by Warren Buckley that I think makes it easier to understand what's going on
  • XSLT Files: Prefix the name with the site's abbreviation i.e. for www.thesitedoctor.co.uk it would be TSD or for www.wineandhampergifts.co.uk WAHG if it's a site specific XSLT file otherwise name conventionally i.e. CamelCase
Naming conventions for Umbraco
Useful Links:  #  digg it!  del.icio.us  Technorati  email it!  Post CommentsComments [0]  Trackback Link
CategoriesTags: ASP.Net | Umbraco | Web Development | WebDD
 Saturday, November 03, 2007

Umbraco and Ghost/Cached/Deleted pages appearing in menu

Saturday, November 03, 2007 1:31:42 PM (GMT Standard Time, UTC+00:00)

I'm currently investigating a new Open Source ASP.Net CMS system called Umbraco. It looks very promising as it can be fully accessible and has full support for XHTML among many other interesting features. I met with a couple of the guys that are developing the system in Manchester a couple of weeks ago and they've got big plans so keep an eye on it.

Anyway yesterday while setting up the new The Site Doctor site on Umbraco I ran into an issue where by I had "broken" the menu. Basically I had deleted the template from the system which should have deleted all copies of the pages that use that template but instead a cache remained somewhere. I ran through a number of steps to re-create the cache but nothing worked.

If you run into the same issue as I did, follow these steps:

  1. Find out the ID of the page in question (easiest way is just to add the ID to the output of the menu XSLT)
  2. Search the database for the ID using the T-SQL I posted in "How to search every table and field in a SQL Server Database"
  3. Download and install a Unicode and UTF-8 search program such as Text Workbench and search for the ID (I only found it in /data/Umbraco.config)
  4. Reset the applications cache -the easiest way to do this is to simply re-upload the web.config file

That should sort it :)