The getting started with umbraco post is the most visited one on this blog. I thought I would make an update since getting started with umbraco got a lot easier recently because there are 9 free videos on umbraco.tv outlining the basics for both site builders and developers. Learn about the basis building blocks like document types, templates and macros and also see how easy it is to use .net user controls.

You can find the free umbraco foundation videos on umbraco.tv

For site builders:

• Document types
• Templates
• Stylesheets
• What are macros
• Creating your first xslt macro

For developers

• Using .Net User Controls
• Macro Parameters
• Macro Caching
• Debugging

These should be your first stop when diving into Umbraco!

You can relate stylesheets to the richttext editor datatype in umbraco, sometimes this will cause an unwanted effect. Like a background color that you don’t want, …

But this can easily be changed.

You can target the richttext editor with the class

.mceContentBody

So by appending this to the related stylesheet, you have more control over the styling in the richttext editor datatype.

(make sure to clear your browser cache, to view the result)

The last couple of weeks I’ve gotten lots of request for the poll package sourcecode.

So I’ve added the sourcecode to the poll project page on our.umbraco.org (attached files).

Enjoy!

Simon Justesen, has a great post describing how to add new sections and trees inside umbraco (part 1, part 2).

To make it easier to get started, I thought I would provide some starter sourcecode for a demo custom section.

Steps to get this running on your umbraco installation:

- Copy the assembly (CustomUmbracoSection.dll) to the \bin directory

- Copy the file custom.gif to \umbraco\images\tray\ directory

- Make a ‘custom’ directory in \umbraco and copy the editCustom.aspx page to \umbraco\custom directory

- Insert a new row in the umbracoApp table

INSERT INTO [umbracoApp]

           ([sortOrder]

           ,[appAlias]

           ,[appIcon]

           ,[appName])

     VALUES

           (9

           ,‘custom’

           ,‘custom.gif’

           ,‘custom’)

- Insert a new row in to umbracoAppTree table

INSERT INTO [umbracoAppTree]

           ([treeSilent]

           ,[treeInitialize]

           ,[treeSortOrder]

           ,[appAlias]

           ,[treeAlias]

           ,[treeTitle]

           ,[treeIconClosed]

           ,[treeIconOpen]

           ,[treeHandlerAssembly]

           ,[treeHandlerType])

     VALUES

           (0

           ,1

           ,0

           ,‘custom’

           ,‘custom’

           ,‘custom’

           ,‘.sprTreeFolder’

           ,‘.sprTreeFolder_o’

           ,‘CustomUmbracoSection’

           ,‘Trees.LoadCustomTree’)

- Update the \umbraco\config\create\UI.xml file, add:

  <nodeType alias=”initcustom”>

      <header>Custom</header>

      <usercontrol>/create/simple.ascx</usercontrol>

      <tasks>

        <create assembly=”CustomUmbracoSection” type=”Tasks.CustomTasks” />

        <delete assembly=”CustomUmbracoSection” type=”Tasks.CustomTasks” />

      </tasks>

  </nodeType>

After these steps are completed you will have to enable the new section for your user.

Then it should show up as the last icon in the sections (called custom, with a HAL’s camera eye icon).

In the custom section you’ll find this:

So just a sample node that will open a demo edit page.

I’ve created my share of umbraco packages and thought I’d try to share some tips/insights.

Creating packages is easy, the built-in package creator makes it super simple and with package actions you can perform additional common tasks (like updating the xsltextensions) without having to write a single line of code.

It really takes a minimal effort to package something up that you made, even if it’s very project specific it should be possible to isolate the functionality and package it up.

Dare to share

Even a simple package can be a great help, so don’t hesitate and share

Naming

To avoid conflicts and overwriting other existing items when installing a package, make sure you have unique and meaningful names

• Assemblies

Starting these with your name or company name followed by a project name should be enough to make them unique
FE: Nibble.Umb.Poll

• Stylesheets, Scripts, Document types, Templates, XSLT files, Macros

A unique and meaningful name that links them back to the package, so it easy to see that they are part of a package
FE: not style.css but starrating.css
not list.xslt but bloglistposts.xslt       

• Usercontrols

placing these in a new unique folder inside the /usercontrols folder makes it easy to see that they are part of a package
FE: /usercontrols/Nibble.Umb.Poll/poll.ascx

• Config files

place these in the /config folder (again, with a unique and meaningful name)

Installation

Package are really easy to install but in some cases the package installation might fail. So it’s always great to provide some manual installation instructions, just in case.

Think ahead

You might have created a package with a simple site in mind, but don’t forget they can/will also be used on multilingual sites, site running a different database engine. Or in case it’s a datatype, will be used with Canvas, autoform, doc2form. It’s a great plus if this is taken into account.

What doesn’t work

If the package only works with a certain umbraco version and up or if it only works on sql server, don’t forget to mention this to avoid that people install it on non supported installations.

I’ve also added this post to the wiki on our.umbraco.org, if you have anything to add/change (or correct my bad spelling) please do so .

I finally got round to polish and package the umbraco poll I made some time ago. So here it is …

The package installs the following:

The document types (Polls, Poll, Poll Answer) will be used to setup the polls.

So you’ll have a Polls document that will contain several Poll documents and these will have several Poll Answer documents beneath it.

After you have setup a poll with some answers in your content area you can get the poll on your page.

First add a reference to the installed stylesheet (/css/Nibble.Umb.Poll.css) and then place the Poll macro on your template.

Please note that:

• The macro will have to be placed inside a form with runat=”server” attribute
• There has to be a scriptmanager on the page

The poll macro has several parameters:

• Poll Node Id: This is the id of the Poll content node that you want to display
• Display Only: Check this if you only want to display the results of a poll
• Submit On Select: Check this if you want to submit the vote when a user selects a answer
• Hide Submit: Check this if you want to hide the submit button
• Sort Results: Check this if you want that the results are sorted by number of votes
• Width Total Votes: Instead of the highest number of votes being equal to 100% width, the total number of votes is 100%
• Hide Question: Check this if you want to hide the question
• Random Poll: Check this if you want to display a random Poll, you’ll also have to update the Poll Node Id to the Polls document (containing the different polls)

So depending on the parameters (Submit On Select and  Hide Submit) your poll can look like:

or (with submit button)

The Results can look like this:

Sorted:

Width Total Votes:

You can download the package here: http://our.umbraco.org/projects/poll

First some info on the setup:

After installing runway to get a basic site up and running I created a folder in the media section and added several images

On my homepage document type I added a ‘media picker’ property called ‘Pictures’. There I’ll select the media picture folder.

All that’s left now is to write some xslt that will select a random image from the media folder.

<?xml version=”1.0″ encoding=”UTF-8″?>

<!DOCTYPE xsl:Stylesheet [ &lt;!ENTITY nbsp “&#x00A0;”> ]>

<xsl:stylesheet 

    version=”1.0″

    xmlns:msxsl=”urn:schemas-microsoft-com:xslt”  

    xmlns:xsl=”http://www.w3.org/1999/XSL/Transform” 

    xmlns:msxml=”urn:schemas-microsoft-com:xslt”

    xmlns:umbraco.library=”urn:umbraco.library”

    xmlns:myFuncs=”urn:my-scripts” 

    exclude-result-prefixes=”msxml myFuncs umbraco.library”>

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

<xsl:param name=”currentPage”/>

<xsl:variable name=”imageRoot” 

    select=”$currentPage/ancestor-or-self:: node[@level = 1]/data [@alias = ‘Pictures’]”/>

<msxsl:script implements-prefix=”myFuncs” language=”JavaScript”> 

<![CDATA[

var myArray = new Array();

function random(){     

    var index = Math.floor(Math.random() * myArray.length);    

    return myArray [index];

}

function addtoArray(item){

    myArray.push(item);

}

]]>

</msxsl:script> 

<xsl:template match=”/”>

<!– start writing XSLT –>

<xsl:call-template name=”buildArray”>

<xsl:with-param name=”arrayNodes” 

    select=”umbraco.library:GetMedia($imageRoot, ‘true’)/node/data[@alias=’umbracoFile’]”/>

</xsl:call-template>

<xsl:value-of select=”myFuncs:random()”/>

</xsl:template>

<xsl:template name=”buildArray”>

<xsl:param name=”arrayNodes”/>

    <xsl:for-each select=”$arrayNodes”>

        <xsl:value-of select=”myFuncs:addtoArray(string(./text()))”/>

    </xsl:for-each>

</xsl:template>

</xsl:stylesheet>

This snippet will output the relative url of a random picture from inside the selected media folder ( like /media/44/dsc00033.jpg ).

A common thing when dealing with members on your site is that they need to be approved after registration before they can access the protected area on your site.

This post describes a simple way of doing that.

On the umbraco member type I have a True/false property with the alias active. If this is set to true on the member he is an ‘active’ member and is allowed to log in.

The only thing that is needed is to override the ValidateUser method of the UmbracoMembershipProvider. So make a custom class, inherit from umbraco.providers.members.UmbracoMembershipProvider and override the method (make sure to reference umbraco.providers).

Instead of just checking if there is a member with the supplied loginname and password we’ll add some extra code that will check if the member has his active property set to true. If that is the case we return true, in all other cases we return false.

namespace Nibble

{

    public class CustomMemberShipProvider : umbraco.providers.members.UmbracoMembershipProvider

    {

        public override bool ValidateUser(string username, string password)

        {

            umbraco.cms.businesslogic.member.Member m =

                umbraco.cms.businesslogic.member.Member.GetMemberFromLoginNameAndPassword(

                username, EncodePassword(password));

            if (m == null)

            {

                return false;

            }

            else

            {

                try

                {

                    if (m.getProperty(“active”).Value.ToString() == “1″)

                    {

                        return true;

                    }

                    else

                    {

                        return false;

                    }

                }

                catch

                {

                    return false;

                }

            }

            return (m != null);

        }

    }

}

Final step is to modify the web.config so that our custom membership provider is used instead of the default umbraco one. So Just change the type attribute on the umbraco membership provider to the type of the custom membership provider.

<add name=”UmbracoMembershipProvider” type=”Nibble.CustomMemberShipProvider”

 enablePasswordRetrieval=”false” enablePasswordReset=”false” requiresQuestionAndAnswer=”false”

 defaultMemberTypeAlias=”CobraMember” passwordFormat=”Hashed” />

That’s it, now the asp:login control will only login the member if he has his active property set to true.

I recently got a comment from a person that downloaded a package but didn’t know what steps to take to installing it.
So here is a small how to.

After you have successfully logged into umbraco go to the developer section (section menu is on the bottom left, if you don’t see the developer icon you don’t have permission to view that section).

Then expand the Packages tree

Since we’ll install a local (downloaded) package select ‘Install local package’, the install local package page will load.

Then just choose the package from your machine and hit the load package button (it won’t be installed yet) .

Now (if it’s a valid package) you’ll see the next step. Here you’ll need to accept the license and hit the install package button

If the package contains a custom usercontrol with some custom installation steps that will be loaded next (like in this case with the datefolder package).

Once these custom steps have been completed (if there are any) the package should be installed.

You should now be able to view the installed package in the ‘installed packages part’ of the packages tree.

There you’ll also be able to uninstall the package.

Based on the related links datatype that’s been added to umbraco v4.

This is a similar datatype but for selecting media, so a multiple media picker.

You can add media by setting a caption and selecting a media item. Very similar to the related links.

The package will also install a xslt and marco that shows how to use xslt to display the stored media.

<?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”/>

  <!– Input the related links property alias here –>

  <xsl:variable name=”propertyAlias” select=”string(’relatedmedia’)”/>

  <xsl:template match=”/”>

    <!– The fun starts here –>

    <ul>

      <xsl:for-each select=”$currentPage/data [@alias = $propertyAlias]/media/item”>

        <li>

          <xsl:element name=”a”>

                <xsl:attribute name=”href”>

                  <xsl:value-of select=”umbraco.library:GetMedia(./@id,’false’)/data [@alias = ‘umbracoFile’]”/>

                </xsl:attribute>

            <xsl:value-of select=”./@title”/>

          </xsl:element>

        </li>

      </xsl:for-each>

    </ul>

  </xsl:template>

</xsl:stylesheet>