Archive for the 'Package' Category

EAsy Custom 404 Pages for Umbraco 0

Introducing a small new package that allows you to set your Umbraco site 404 page(s) from within the UI. The page not found manager will extend the content context menu for admins with a new option “404 page”.

Screen Shot 2015-09-22 at 10.44.23

The new option will open a dialog where you are able to select a 404 page for the current page and it’s children (either by searching or selecting a page from the content tree).

Screen Shot 2015-09-22 at 10.48.34

So you can also setup multiple 404 pages (in case you have a multilingual site or an umbraco instance running multiple sites). Since it works this way it’s more versatile then the standard umbraco 404 page setup.

You can download the package on

Or install it through nuget

If you are insterested in the sourcecode that can be found on GitHub

And if you wanna learn more you can view a live demo and a run through of the code on this weeks uHangout

Seek and destroy 1.0 Release 4

SeekAndDestroyLogoThe ajax locator package I’ve been working on the last couple of freedom fridays is available as a package on today Smile

If you haven’t seen it in action make sure to check out this quick preview video.

Here is a quick overview of it’s features

Dashboard control

It features a dashboard control (in the developer section) that can install the google maps datatype, add a new property of that type to your doc type(s) and then geocode existing content based on the address you have stored. So you should be up and running in a couple of minutes (even if you don’t have any coordinates on your content documents yet).


Fully Customizable AJAX Locator control

By inserting the macro you have a working locator in a couple of clicks but of course it’s output is fully customizable just by updating the Partial View Macro File associated with the Macro. So you can tailor it to your needs! If you want custom google map markers check out ( and



The locator control includes some nice features, it loads a default location based on the users IP address, you can set it in street view mode and there is also a directions mode.


So the package is available for download on

If you are interested in the sourcecode that’s available on github

Please not that since this pacakge uses an UmbracoAPIController you’ll need at least Umbraco v6.1 to run this package

Introducing Optimus Lite, instantly make any Umbraco website faster! 0

OptimusLiteLogoIf you’ve been following the latest blog posts you know I’ve been working on Optimus (bundling and minification for Umbraco built on top of the web optimization framework). In the comments Dima Stefantsov pointed out that there is another nice framework out there called  Request reduce.

Request reduce

Compared to the web optimization framework request reduce creates bundles automaticity, this means it’s just a matter of installing and your site performance is immediately improved.

For full overview please check out 

Of course all credits for this package goes to the Request reduce creator Matt Wrock

The only change I made was to make sure it ignores the umbraco backoffice since that had some side effects.


To see it in action check out this screenr



Package is available on

Optimus 1.0 release 0

We are done with the finishing touches to the Optimus package for Umbraco and are glad to announce that the 1.0 release is available today!

If you haven’t seen it in action yet, be sure to check out this quick overview


What’s new?

web optimization framework 1.1.0

The web optimization framework has been updated to the latest version (1.1.0), so you can make use of the Element template strings if you want full control over the link/script tag that will be inserted (this one’s for you James South)

@Scripts.RenderFormat(“<script src=’{0}’ async></script>”,”~/bundles/jquery”)

No empty trees

You’ll only get the dynamic scripts/stylesheet tree if you have at least 1 of the providers installed


Possible to disable minification on a bundle with the bundle editor UI


Bundle dynamic stylesheets/scripts directly

As requested by Jeavon Leopold it’s now possible to include less/sass/typescript/coffeescript files directly in a bundle (needs to be enabled in the \App_Plugins\Optimus\config\bundles.config file)


Some code refactor has been done to speed up several parts of the core


And finally the installer now handles the necessary files updates (thanks to the package action contrib team for the helpful snippets)


The package is available at

If you are interested in the sourcecode that can be found at

Introducing Optimus: Resource bundling, minification and transformation for Umbraco 7

In collab with Mr Warren Buckley we are glad to announce the beta release of a new Umbraco package.

Meet Optimus

In essence Optimus is a UI layer on top of  the Web Optimization framework for Umbraco, making it possible to create script and style bundles from within the backoffice.

Why should you bundles those resources? Well in short: bundling and minification improves request load time by reducing the number of requests to the server and reducing the size of requested assets (such as CSS and JavaScript), for a good intro check

After installing Optimus you’ll end up with some new bits in the Settings section that allow you to create both script and style bundles by simply selecting the available files in the /css or /scripts folder


In addition to manually creating these bundles you’ll also find a new option in the edit template toolbar (for both views and masterpages) that allows you to simply select script/link tags and auto create a bundle from those (can’t get any easier).


more than meets the eye

Besides being able to bundle your resources Optimus also features a provider model for dynamic stylesheet and script languages.

The providers available today are:

As a final step of the installation you’ll be able to choose the providers you want to include (thanks to Matt Brailsford for letting us lend some code from the Universal Media Picker project).


Depending on the ones you installed you’ll be able create files of that type

In the new dynamic scripts tree


And dynamic stylesheets tree


Once created you can start writing code in the editor, the editor will check for errors and highlight the linenumber in case of an error.


If the transformation is successful you’ll end up with a plain js/css file that you can then use (also in bundles)


For a quick demo check out this screencast

It’s a beta

So today the beta is available on

In addition to installing the package you’ll need to do some manual web.config updates outlined here: course this will be done automatically by the final release)

It’s only been tested on Umbraco v6 but for the final release we’ll try to include the latest v4 (eta next friday).

Look who’s editing now 3

As a result of freedom fridays at the umbraco HQ I’ve made a new little umbraco package.

Make sure your content editors don’t end up editing the same document and overwriting each others changes with this addon for umbraco.

In environments with multiple editors the editors will see in the umbraco content tree which documents are currently being edited.


Also on the content page there will be a notification when another editors are viewing/editing the same document.


For a quick demo check out this video


You can download the package on the project page at’s-editing-now

Thoughts,tips for creating umbraco packages 4

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


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)


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, if you have anything to add/change (or correct my bad spelling) please do so .

New Package - Poll package for umbraco 4 18

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:




Width Total Votes:


You can download the package here:

Installing Umbraco Packages 0

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.

New Package - Related Media 10

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 [
  &lt;!ENTITY nbsp “&#x00A0;”>
    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 –>
      <xsl:for-each select=”$currentPage/data [@alias = $propertyAlias]/media/item”>
          <xsl:element name=”a”>
                <xsl:attribute name=”href”>
                  <xsl:value-of select=”umbraco.library:GetMedia(./@id,’false’)/data [@alias = ‘umbracoFile’]”/>
            <xsl:value-of select=”./@title”/>


Related Media Package: download

Next Page »