Warren Buckley is now an official certified level 1 developer

Hello all,
I thought I would share with you all that I am officially now an “Umbraco certified level 1 developer” and it feels good to have something to show for all the hard work I have invested into Umbraco.

Now I have achieved this goal, I plan to do level 2 as soon as possible so watch this space !

FYI: The level 1 and level 2 are planning to be renamed to something more useful

//Warren

Twitter Umbraco Package version 1.2

Hello all,
After talking to Nisse Bryngfors, he requested that the URLs in tweets would automatically be made as urls and marked up with anchor tags. In addition to this he requested that @username replies were also automatically generated into anachor tags.

For example:

would now become

This has been made possible with a new function in the XSLT Extension CWS.Twitter called FormatURLS.
So to format your tweet use this syntax in your XSLT.

I have reposted the instructions below for people who didnt use my previous version.

This package installs the following files:

• bin/CWSHelperTwitter.dll
• xslt/CWS_twitterStatus.xslt
• /usercontrols/Installer/CWSTwitter/cwsTwitterInstaller.ascx

The installer usercontrol cwsTwitterInstaller.ascx is used to modify the /config/xsltExtensions.config
to setup my custom XSLT extension to allow us to modify the strange format of the twitter date format.

The actual package installs the following into umbraco:

• Macro: [XSLT] CWS:Display Twitter Status
• XSLT: CWS_twitterStatus.xslt

To use this package just install this package, to do this take the following steps.

1. Login to umbraco
2. Goto the Developer section
3. Right click the Macros node
4. Select Import Package
5. Press Browse and find the zip package file you have downloaded
6. Follow the steps in the wizard
7. Once installed insert the macro into your XHTML template
8. Insert your twitter id (not username), the number of items you want to display (upto 20) and check the box if you wish to include your friends tweets.

How do I find my Twitter user id?

You can find your twitter id by browsing to your twitter page, for example http://twitter.com/warrenbuckley and clicking on the RSS link at the bottom of the page. Which loads your RSS feed like this, http://twitter.com/statuses/user_timeline/9751992.rss
So in my case my Twitter user id is 9751992

Customisation

To customise the XHTML for the tweets display take a look at the XSLT file installed. This should be easy to read and edit, it is possible to modify your XSLT to include more things from the XML that twitter returns to us. How about the users real name, the users site it's really upto you?

Check out the example XML files
http://twitter.com/statuses/user_timeline/9751992.xml
http://twitter.com/statuses/friends_timeline/9751992.xml

Download

So without further-a-do here is the package for you to download.
Download Creative Website Specialist - Twitter Package v1.2.0

Twitter Umbraco Package version 1.1

Hello all,
This will be a very brief blog post this evening as I have made an update to my Twitter Umbraco Package from a request from a tweet I received from Nisse Bryngfors.

His request was as follows

@warrenbuckley just tried the twitter package for umbraco.Great!Is there any way to display people you follow,instead of just your own feed?

I decided this was so easy to implement, I would make this quick update to my package and release it as soon as possible.

I have reposted the instructions below for people who didnt use my previous version.

This package installs the following files:

• bin/CWSHelperTwitter.dll
• xslt/CWS_twitterStatus.xslt
• /usercontrols/Installer/CWSTwitter/cwsTwitterInstaller.ascx

The installer usercontrol cwsTwitterInstaller.ascx is used to modify the /config/xsltExtensions.config
to setup my custom XSLT extension to allow us to modify the strange format of the twitter date format.

The actual package installs the following into umbraco:

• Macro: [XSLT] CWS:Display Twitter Status
• XSLT: CWS_twitterStatus.xslt

To use this package just install this package, to do this take the following steps.

1. Login to umbraco
2. Goto the Developer section
3. Right click the Macros node
4. Select Import Package
5. Press Browse and find the zip package file you have downloaded
6. Follow the steps in the wizard
7. Once installed insert the macro into your XHTML template
8. Insert your twitter id (not username), the number of items you want to display (upto 20) and check the box if you wish to include your friends tweets.

How do I find my Twitter user id?

You can find your twitter id by browsing to your twitter page, for example http://twitter.com/warrenbuckley and clicking on the RSS link at the bottom of the page. Which loads your RSS feed like this, http://twitter.com/statuses/user_timeline/9751992.rss
So in my case my Twitter user id is 9751992

Customisation

To customise the XHTML for the tweets display take a look at the XSLT file installed. This should be easy to read and edit, it is possible to modify your XSLT to include more things from the XML that twitter returns to us. How about the users real name, the users site it's really upto you?

Check out the example XML files
http://twitter.com/statuses/user_timeline/9751992.xml
http://twitter.com/statuses/friends_timeline/9751992.xml

Download

So without further-a-do here is the package for you to download.
Download Creative Website Specialist - Twitter Package v1.1.0

Creating Sam Marks portfolio site Quilo

Hiya,
Well this blog post is tell you all about my good friend Sam Marks website Quilo that I have been working on.

Me and Sam used to work together for a few years at a company called Momo Web Communications and after both leaving there and progressing our careers we recently got back in touch to do a great skill swap. What we decided to do was that I would build the XHTML, CSS and put into onto a CMS platform (obvioulsy Umbraco) for him to easily update and edit his site, in return he agreed that he would redesign my blog for me. So watch this space very soon for my site update - all I can see its going to be very different from what it is now!

So heres a very quick rundown of what I done in this project

• Handcode the XHTML templates and the appropiate CSS required from the Photoshop design Sam gave me
• Use jQuery to create a semi-transparent image caption that slides up when you rollover the image
• Use jQuery to create a feature slider, which slides panels horizontally to view new content
• Use the Umbraco opensource .NET CMS solution to allow Sam to update his site easily with new content
• Create an XSLT script to use in Umbraco, to show Sams latest tweet from Twitter

In regards to the jQuery functionality that you can find on Sam's site I plan to create a blog post detailing each of these features and how they are achieved in the near future.

The twitter intergration I done using my own umbraco package, which help speed up my development process.

This looks like this is going to be a GREAT collobration, keep your eyes peeled to our sites as we may have one or two things up our sleeves.
(However this requires many chats down the pub first)

Finally heres what Sam had to say about it all

I've recently published my own portfolio site using both Warren Buckley and Umbraco's CMS tools. I worked closely with Warren with regards to what I wanted from the site as we've worked together in the past he was able to deal with my typical designer mentality i.e. changes to the design at the 12th hour!!

As a web designer myself, the layout was taken care of and Warren plugged my designs onto his code and then subsequently onto the Umbraco CMS tools.

When using the CMS to update my site I found it incredibly easy to not only update existing content but to also add and if required remove content. It was a great experience being able to literally mould the CMS around my requirements rather than the reverse which is so often the case with alternative CMS tools on todays market.

The functionality requirements for my site were easily met by both Warren and the CMS which meant that not only was the site delivered back to me ready to edit but within a very short time scale.

I would definitely recommend both Warren and Umbraco to anyone who should need them.

Good work Wazza!

Gravatar Umbraco Package

Hello all,
This evening I have decided to create a nice quick package to help use Gravatar easily on your umbraco blog/site. There have been snippets on other blogs to help you achieve this, I have just created two XSLT Extensions to use in your XSLT and an example XSLT file to show how you can use the helpers.

If you haven't heard of Gravatar before, it is a service that allows you to upload an image so you can have a globally recgonised avatar on the web that is associated to your email address. The most useful scenario is on your Umbraco blog to display Gravatar images of visitors who have left comments, but you may think of some other creative scenarios you may want to use it in.

This is my Gravatar

The two methods available are
getGravatarImageURL and FormatStringToMD5

The first method getGravatarImageURL expects two parameters, which are below.

stringForGravatar: the email address that you want the Gravatar image for.
defaultImage: this is an absolute URL to a default image if the Gravatar image does not exist.

This Returns: a full absolute URL to an the Gravatar image.

The second method FormatStringToMD5 expects one parameter, which is below.

stringToFormat: this is the string you wish to format as a MD5 hash.

This Returns: an MD5 hashed string, which you can use manually to build up the Gravatar URL if you prefer, of for MD5 hashing other strings.

This package installs the following files:

• bin/CWSHelperGravatar.dll
• xslt/CWS_Example_DisplayYourGravatar.xslt
• /usercontrols/Installer/CWSGravatar/cwsGravatarInstaller.ascx

The installer usercontrol cwsGravatarInstaller.ascx is used to modify the /config/xsltExtensions.config
to setup my custom XSLT extension to allow us to do the MD5 hashe & create the full Gravatar URL.

The actual package installs the following into umbraco:

• Macro: [XSLT] CWS:Display Your Gravatar Example
• XSLT: CWS_Example_DisplayYourGravatar.xslt

To use this package just install this package, to do this take the following steps.

1. Login to umbraco
2. Goto the Developer section
3. Right click the Macros node
4. Select Import Package
5. Press Browse and find the zip package file you have downloaded
6. Follow the steps in the wizard
7. Once installed insert the macro into your XHTML template
8. Insert your email address and the Absolute URL to an image you want to use for a default image.

So enough with the ranting, here is the link to the file your after......
Download Creative Website Specialist - Gravatar Package v1.0.0

I look forward to any feedback or comments and credit goes to Per Ploug Hansen as his original code has been used for the FormatStringToMD5 method.

How I use MSN to update my Facebook Status

Hello all,
I thought I would tell you all how I use MSN Messenger to update my Facebook Status, which allows me to tell people what I am doing quickly and easily without logging into Facebook and being distracted too much.

OK first of all create a twitter account , if you dont know what twitter is, well its a service that is used to tell people what you are upto, just like the status section in Facebook.

Once you have created your Twitter account the next thing to do is to add an appliaction to your Facebook profile that allows you to update your Facebook status whenever you post an update to Twitter.

This application is called TwitterSync, simply follow the instuctions for TwitterSync and you will have this working in no time.

Now you have your Facebook Status syncronished to your Twitter status, you can post from your mobile phone to twitter using m.twitter.com or desktop widgets or whatever you prefer.

The final step to get Twitter to update your Facebook status is to use a service called Imified which is a MSN Bot that allows you to post to a various number of services including Twitter.
To get this to work and add "imified@imified.com" to your buddy list and send it a message to create a free account.

The bot should tell you all you need to know, but once logged in search for the twitter widget and configure it to your prefrences.

For me personally I have a shortcut setup so all I need to type to the Imified bot is
/twitter is very happy today.

Ok thats it in a nutshell, I hope some of you have found this quick run-through helpful, but I have one last thing to say if you start using Twitter you can obviously use my Twitter Umbraco package to allow you to display your latest Twitter/Facebook status on your own website.

Twitter Umbraco Package

Hello all this is my first package for 2008. I have created a quick XSLT package to allow you to display your latest twitter status's on your website/blog.

For example here is my twitter page where you can see what upto or thinking.

This package installs the following files:

• bin/CWSHelperTwitter.dll
• xslt/CWS_twitterStatus.xslt
• /usercontrols/Installer/CWSTwitter/cwsTwitterInstaller.ascx

The installer usercontrol cwsTwitterInstaller.ascx is used to modify the /config/xsltExtensions.config
to setup my custom XSLT extension to allow us to modify the strange format of the twitter date format.

The actual package installs the following into umbraco:

• Macro: [XSLT] CWS:Display Twitter Status
• XSLT: CWS_twitterStatus.xslt

To use this package just install this package, to do this take the following steps.

1. Login to umbraco
2. Goto the Developer section
3. Right click the Macros node
4. Select Import Package
5. Press Browse and find the zip package file you have downloaded
6. Follow the steps in the wizard
7. Once installed insert the macro into your XHTML template
8. Insert your twitter id (not username) and the number of items you want to display (upto 20)

How do I find my Twitter user id?

You can find your twitter id by browsing to your twitter page, for example http://twitter.com/warrenbuckley and clicking on the RSS link at the bottom of the page. Which loads your RSS feed like this, http://twitter.com/statuses/user_timeline/9751992.rss
So in my case my Twitter user id is 9751992

The XSLT I have supplied is easy to read and edit to format and fit into your site design and structure, if you have any questions please leave a comment and ask me.

If you have enjoyed using this package, please tell your friends and tell them to use it

Without further-a-do here is the package for you to download.
Download Creative Website Specialist - Twitter Package v1.0.0

Thanks goes to Thomas Höhler for helping me to reformat the date.

New Year, New Job

Hello!
First of all a very late "Happy New Year" from me, for me this brings an exciting year.

With the last 6months or so I have not been an active member of the Umbraco CMS community and I wasn't using it at all, as my job did not require us to use CMS solutions. But as of now this will begin to change as I have been employed by the fabulous guys and girls over at Xeed in Norway.

The Xeed'ers are using Umbraco as their main production CMS and include some really clever people such as Daniel Bjørnbakk and Kenneth Solberg who have done great work with Umbraco. As I work with the Xeed'ers more, expect some inspiring ideas from me and Xeed that we can contribute to the community.

So keep your eyes peeled on my blog and over at the Umbraco forum as I begin to contribute to Umbraco again.

Warren

Display Last.FM recent tracks with album art using Umbraco and jQuery

Hello with a few days to go until Christmas, I thought I would share with you a mashup tip using Umbraco to list my recently listened to tracks using the Last.FM service and then using jQuery I am able to do an AJAX call to get the album art image remotely.

Before I start I will show you the method that can achieve this result entirely using XSLT in Umbraco however this is a slow process and is alot quicker to use the jQuery method which I will show you afterwards.

Read the rest of this entry »

Image switcher using jQuery

Hello all,

I have neglected my code-snippet blog, so this evening I share with you another easy but effective jQuery demo.

This demo shows how to click smaller thumbnails to swap a larger fullsize image, this is ideal for product gallery on an e-commerce site, but there are many other uses as well.

Click here to view the jQuery image switcher demo
(View the source of the demo page to see how it works, with lots of comments to help you understand what is going on)