Simon Miller Team : Web Development

Five Essential Umbraco Plugins

Simon Miller Team : Web Development

Wiliam builds the majority of its websites on the excellent open source CMS platform Umbraco. We’ve talked at length about the virtues of Umbraco in our blogs before. One of the main benefits to Umbraco is that the development community has made hundreds of plugins available to enhance the core system, providing a better customer experience and ticking off the list some essential requirements that quicken development time.

Here’s five plugins that Wiliam developers tend to include on all their Umbraco websites:

1. FamFamFam Icons

The built-in icon set that ships with stock Umbraco is not bad, but it’s not brilliant either. One of the quickest wins you can have on improving the UI of Umbraco’s back-office is to install this large collection of icons to utilise with your node structure. No longer limited to white pages and yellow folders for documents, with FamFamFam a developer has a vast selection of context-applicable imagery available to use.

Umbraco - FamFamFam

2. DigiBiz Advanced Media Picker (DAMP)

The stock media picker does the job, but it could do so much more. If you are stuck using the stock Media Picker, at least ensure that you enabled advanced mode, but if you are able to install DAMP – don’t hesitate! The interface is much improved over the standard picker, and you are able to create imagery directly from the property without having to go to the Media section. The largest benefit is that you can select multiple images (for example, for us in a gallery) and you can also re-order them. Limiting the picker to using certain file extensions is also a plus, as is providing a start node in the Media section. From a developer point of view, the data type can save a CSV of media node IDs or it can output complete XML which can be easier to work with in Razor.

Lastly it has built in support for the Pixlr web-based image manipulation tool – basically Photoshop in a browser! Your users can resize, rotate and crop an image and then resave it over the top of the original upload.

Umbraco - DigiBiz

3. URL Tracker

This package truly is essential. If the website you are building is a replacement for the customer’s previous site, then for best SEO you should 301 the old websites URLs. There are numerous ways of achieving this in .NET, but none easier than this Umbraco package. It creates a flat database table (so that you could, for example, import a spreadsheet of redirects populated by an SEO company) but it is most powerful when using the interface in Umbraco itself.

The package creates a new tab off the root Content node that allows you to create individual 301 (or 302) redirections from previous URLs to new URLs or Node IDs. You can use regular expressions to parse wildcard URLs. The most helpful part of the package, I find, is that it keeps track of all site 404’s and allows you to turn them into 301s. Google has some leeway (a couple of weeks I believe) before it will declare a 404 a “bad thing” and remove the indexed URL from its search results. Post-deploy of your new site, simply check the 404 list after a couple of days and you will have a good starter list of the most popular links clicked through from Google that you can divert to the new nodes.

Umbraco -URL Tracker

4. DateFolders

One of the simplest packages to install, and one of the most useful, particularly for blog or news heavy websites. Once you have installed DateFolders, you simply choose the data type that you need to automatically create folders under for better hierarchy. SEO guys LOVE news items being presented in URLs that contain the year, month and if required the day. With no effort on the part of the developer, blog and news URLs will reformat to something similar to /news/2013/05/01/name-of-article.

Umbraco - DateFolders

5. Google Maps DataType

This is a perfect example of a data type that should have shipped by default with Umbraco: An interactive Google Maps location picker. Search the location, drop the pin, and you are done. Use code such as this on the website front-end to display the map to the user.

Umbraco - Google Maps DataType