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

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>

This is a first version of a new mailer for umbraco v4. It’s similar to the ultrasimplemailer but one main difference is that it isn’t a datatype but it’s a new item in the context menu. Since it needs rendertemplate support it’s only possible to use it with v4.0.1 and upper versions.

Intro

After Installation you’ll have a new item in the context menu: send as mail.

Hitting this option will open a new modal. Where you’ll be able to send a published document as a mail.

The document needs to be published because the mail contents will be fetched from the rendered document output. Trying this on an un-published document will result in an error message.

In the first step you’ll need to supply:

• From emailaddress
• From display name
• Subject (this will be the document name but can be chanched)

And choose to send it to a single email address or to multiple (mass option).

When sending a single mail you’ll just need to supply an email address. If a member is found with that email address his data will be merged (more about the merging below).

Choosing the mass option will allow to select a membergroup and to supply a filter.

For example if you have a property on your membertype with the alias unsubscribe of the type true/false and you only want to send to members that don’t have this set to true.

You can supply the filter

unsubscribe@,0

Once everything is set it’s just a matter of hitting the send button and you’ll see the progress in the status part.

Merging member data

It’s possible to merge member data. If one of these are found then they will be replaced

• [memberId]
• [memberName]
• [memberLoginName]
• [memberPassword]
• [memberEmail]

Custom properties are also possible

• [custompropertyalias]

So something like

Hi [memberName],

Your password is: [memberPassword]

Will be recieved by the member as

Hi John,

Your password is: 1234

Images

Another detail is that if there are images they will be added as a linked resource.

Extra

The package will also add an xslt extension, making it possible to send a rendered page directly to an email address or a member from xslt (with merging of data).

And it’s also possible to use the methods from .net.

A quick example:

I have setup a forgot password page that looks like this when previewed:

And I would like to use the asp.net PasswordRecovery control to send this mail instead of the regular passwordrecovery mail.

So all I need to do is override the PasswordRecovery mail using the SendingMail event.

 protected void PasswordRecovery1_SendingMail(object sender, MailMessageEventArgs e)

        {

            Library.SendMailFromPageToMember(“test@nibble.be”,

                Member.GetMemberFromLoginName(PasswordRecovery1.UserName),

                “Password recovery Mail”,

                1056);

            e.Cancel = true;

        }

And call the SendMailFromPageToMember method, supply a from email address, the member (using umbraco.cms.businesslogic.member)  , the subject and the id of the page.

The result:

In the developer section of umbraco v4 you can find the packages tree. There you’ll be able to install, remove and create packages.

You can install them from the Umbraco package repository

Or you can choose a local package file from you machine

There are some top umbraco packages out there, this is a small list of 5 umbraco package you must know.

Creative Website Starter (CWS) 

CWS is an entire site implementation in umbraco aimed at helping new users learn umbraco.

The code is heavily commented to help understand what’s going on.

So if you are new to umbraco and you want to examine an example site, install cws.

Package homepage (by Warren Buckley)

ImageGen

ImageGen provides a fast and simple way to dynamically resize images and generate text graphics on your web site.

This is great to make sure content editors don’t mess up the site by uploading images that are to big.

Package homepage (by Douglas Robar)

MultipleFileUpload

Ever wanted to upload multiple files to the media section of umbraco. With this package (that won the cg08 package coding contest) you can.

Package homepage (by NöRD)

UmbImport

UmbImport helps you import content or members from any datasource into Umbraco.

Package homepage (by Richard Soeteman)

XSLTsearch

Xsltsearch is a plug and play search engine for your umbraco site.

You can have a search up and running in a couple of minutes, it’s easy to install and very flexible.

Package homepage (by Douglas Robar)

Just a follow up on the previous post. I updated the xslt to have a very generic approach to the iphone alternative page and wrapped it up in a package.

With the package you can have an iphone alternative page up in a couple of second. Just install the package and insert the javascript snippet into your master template. This works on every umbraco site so it doesn’t mather if you are using runway or just have a completely custom implementation.

Here’s a small demo:

What the package installs:

After installation you’ll need to specify wich fields will be used to display on the iphone pages (default this is set to bodytext and content). You can do this on the IPhone template, just look for the IPhoneContent macro and setup the displayFields parameter.

 <umbraco:Macro displayFields=”bodyText,content” Alias=”IPhoneContent” runat=”server”></umbraco:Macro>

While working on the upcoming site for umlaut (umbraco solution provider run by fellow umbraco addict / MVP Dirk De Grave and me), I needed to add a blog section to the site.

And since umbraco makes it super easy to package up your work. I thought I would spend some time into resurrection the umbraco blog package.

So here you go, a blog package for umbraco 4.

Current Features:

• Posts with paging and filter on category
• Comments (custom usercontrol)
• Datefolder (using the eventmodel)
• Categories (using tag datatype)
• Archive (collapsable, only showing lastest months)
• Latest comments
• Blogroll (using related links)
• Rss Feed
• Gravatar

A small demo screencast:

Download package and sourcode on codeplex (also submitted this to the umbraco repo, so expect to see it there soon).

Umbdashboard which can be found on codeplex is a collection of handy umbraco dashboard controls (some info on dashboard). But it’s an old project developed for a previous version of umbraco. So I’ve started porting these to umbraco v4. First up is zip upload.

Basicly zip upload is a small dashboard control that allows you to upload a zip file to the media section of umbraco. All files in the zip get created as media items and it also respects folder structure.

Once it’s installed you can find it on the dashboard of the media section.

So you can pick a media folder (if no folder is selected it creates a new folder based on the zip filename).

And you just need to choose the zip file and hit ‘upload zip file’.

Afterwards you’ll get a summary of the files that have been uploaded.

If you refresh the media tree, files and folders should be in place

Zip upload has a small configuration file (/config/zipupload.config) that looks like this:

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

<zipUpload>

    <fileNodeTypeId>1033</fileNodeTypeId>

    <imageNodeTypeId>1032</imageNodeTypeId>

    <folderNodeTypeId>1031</folderNodeTypeId>

    <imageFileExtensions>jpeg,jpg,gif,bmp,png,tiff,tif</imageFileExtensions>

</zipUpload>

It contains the id’s of the media types that will be used and the file extensions that will be considered as image.

In case it doesn’t show up on the dashboard this is the snipped that needs to be inserted in the /config/dashboard.config file:

<section>

        <areas>

          <area>media</area>

        </areas>

        <tab caption=”Zip Upload”>

          <control>/usercontrols/zipupload.ascx</control>

        </tab>

</section>

Credits to the original developer of umbdashboard (think it was Niels), I only did some small modifications.

I’m planning on writing some blog posts wich will show how to add custom sections and custom trees to the umbraco v4 backend. I was looking for a simple example and thought about adding a custom tree wich allows to edit the umbraco config files. So that post will folow but in the meanwhile I made a package of that example (only took 2 minutes to package it up, umbraco v4 package creator and package actions rule!).

The package will add a new tree to the developer section. Wich lists all *.config files. The config files can be edited. That’s pretty much it.

Full view: