Menu
the REFERENCE

Umbraco for Content Editors

The first thing a content editor will see when he logs in to the Umbraco back end for the first time, is a friendly pop-up from the Content Management System (CMS). To get a great head start the 12 step tour throughout the back-end introduces you into the menu and the sections it contains, the tree that is used for content, but also in the media library and other sections. Further it highlights the search functionality and leads you to the help button, which is the end of the welcome tour but the start of two other tours named "Create Content" and "Data Structure". These are good to get an idea on how the system works, but of course The Reference will provide you with a training specific to the custom implementation done on your request.

Welcome to Umbraco

Content

Umbraco content menuThe content tree is the heart of the Umbraco back-end. It is a basic feature that we find in most Content Management Systems. In Umbraco this is a clean, simple but powerful tool. It gives access to a huge range of features and we have the option to change the layout by showing the children of a node in a list view. On top of keeping the content tree uncluttered, this allows to chose columns, show in a custom layout, sort the items in an alternative way and pick which bulk actions are allowed on these child items.

Preview

Probably any CMS has a preview function which allows you to see the page before publishing it for all visitors. Umbraco has gone a step further and made the preview feature responsive so the content can be tested on desktop, tablet & mobile phones without ever leaving the back-end

Versioning

Umbraco keeps all values of every property. This means you can simply roll back to a previous version, which you can compare to the current version first, if something went wrong. In the audit trail you can see per item who has created it, modified it last and when. Even comments can be added when saving to describe the changes you have been doing.
Roll back

Multilingual

Getting a multilingual site work good & simple for content editors is always a challenge for developers. Currently there are two possible solutions we use:

Language Content Tree

Umbraco content menuThe first option is to set up a content tree per culture. Like any way of working this has some advantages and disadvantages and also creates a few challenges.

A major advantage is that you can create a page only in the specific language where it is needed. For example, country or language specific information is not available in all countries or languages. With that advantage comes the extra work of having to create content pages that should be available in every language multiple times. Luckily, Umbraco has the ability to copy pages to a different location, and if needed even including descendants. For sites which don't get to many new content pages, the idea is to configure the entire tree in one language and then copy it to another language.

Multilingual sites of course must include a language switcher and to get to the correct page in a different language, there is a package, called Novaware Multilingual Tools, available that allows you to link pages to each other easily. It can even use Microsoft Azure Cognitive Services to find the correct page in another language tree and you just need to approve or reject the suggestion. Furthermore the relation between the same pages in different languages can also be used for SEO purposes. For example, HREFLANG links to assist search engines to find content in the correct language.

Multilingual Property

If the content tree per language doesn't seem a good fit for the project, there is a package available named Vorto which wraps the Umbraco property editors to be able to add a language switch drop-down per property.

Multilangual propertie

Possible Customizations

Umbraco also exposes some events that makes it possible to allow use to make it even more user friendly. We can, for example, disable the preview button on items where this does not make sense: settings, data items, products in a repository, ... .

To make sure you don't loose any content when editing during a deploy, a content freeze could be enforced or a maintenance page could be shown in the front-end. Further we can hide tabs or properties or make them read only based on the users' role.

Forms

Umbraco Forms is an easy form creator package build by the guys & girls at Umbraco HQ themselves. With a license for Umbraco forms, content editors can build basic forms themselves at a much faster pace and for a smaller cost compared to implementing custom forms everywhere in the site. With the intuitive user interface, it's a walk in the park to add fields, select an input type and add validation rules or even conditions. Once the form has been added to the site and users start filling it out, the entries can be viewed in a report dashboard which also allows exporting of the data to Microsoft Excel or Google Spreadsheets. If there is a need for even more advanced forms, Umbraco Forms can be extended to be used with 3rd party services or a complete custom form can be made, depending the complexity and uses case.

Media

The Umbraco media section of course allows you to upload and structure images and videos. A very handy feature for images is pre-defining crop sizes. This is a list of sizes for the same image that will be cropped on the server side to limit the file size to be downloaded and avoid having to re-upload the image in multiple sizes. For example, "Header" which is 1920x350 pixels and "Square" can be defined and allow the same image to be used in an image block and as a page header without the need of an image editor to crop or resize the image. The image can simple be dragged around so the focus stays on the most important part of the picture and the correct things are cut off.

Media

As already mentioned videos can also be added to the media library so they can be embedded on the site. Here's the catch, for your video to work correctly on all browsers you need it in 3 different formats: MP4, OGV and WEBM. But since Umbraco allows to create or modify your own media types with custom properties this can be solved by just creating a new type with a property for each video format and then render all formats for a perfect cross browser experience.

Whats Coming: Umbraco 8

For the next major version, Umbraco HQ is again focusing on improving the content editor experience. Let's have a closer look at the 2 major changes that are coming in Umbraco v8.

Multilingual: Variants

While in Umbraco 7 we had to be creative and use packages to make the experience good for the content editors, Umbraco 8 comes with big changes. The new feature called variants allows to choose if a field, tab or entire document type should be language specific just by checking a checkbox.



First you need to define your languages, just as before, when they were only used for dictionary items. Now there are additional settings to indicate the default language and mandatory languages, for which a version must be present to be able to publish the node. The last option is to set a fall back language just in case the field is not translated in a certain language. It can take the value of a different language instead of just not showing anything.

Once that is in place and your languages have been defined, the language switch can be used above the content tree or on the right of the item name. Once switched to the desired language, simply fill in your language specific content and save & publish.

Fields that are not allowed to vary by culture can be edited in every language and are also updated in the other languages when switching.

Umbraco blog

Infinite Editing

Infinite editing is made to keep you in single flow from creating a page, adding blocks, adding images to the blocks and everything else that is needed to completely prepare the page for publishing. Every new thing you need just adds another layer over the current editing experience and when done uploading an image for example, you simply return to the properties of the block you are adding to the page grid.

Umbraco example

A small example

  1. Create Content Page
  2. Grid
    • Choose a layout
    • Add a row
    • Select a block
  3. Click to insert an image
  4. Pick to choose a file
  5. Select an image to upload to the Media section

Conclusion

Umbraco is already a very content editor friendly CMS and from the few things we have seen from version 8, it will just keep improving.

Let's talk Umbraco

Don't miss out

top
It's more than digital, it's your business
The Reference is nothing without its customers. Carglass is the car window repair and replacement specialist for whom we've built a fully responsive Sitecore website. Read more about this client.