Read About What We Love: Web Development & Technologies

Umbraco: Content Editing and Publishing Made Easy

Umbraco - open source CMS

Umbraco CMS allows users to add, edit and publish content easily just with a click of a button. With a growing number of portals using Umbraco as their platform, it is proving to be a powerful and flexible open source content management system across a range of businesses.

Let’s look at some of the intuitive features Umbraco offers making content editing and publishing a seamless experience for editors and users.

Adding Images to content page

To make your web page interesting and lively, you can add relevant images by first loading them to the Umbraco Media Library. To access the media library, select the ‘Media’ section on the left-hand side of the Main menu. Now open the media library and you can add images, documents, videos etc. depending on what type of file is supported by your website. You can either use the ‘Drag & Drop’ feature to add the images to the media library or select the ‘Media Picker’ by clicking on the link labelled as ‘or click here to choose files’. Once you click on this link, the image/media picker window opens and allows you to insert an image, as shown in the screen shot below.

After you have added several images to your media library, don’t forget to organize it in folders so that when you are ready to use the images on your content pages, you will be able to easily select the images that you need. Creating folders in the media library is very easy, and like any other CMS, it is very convenient to copy, move and clone media as required. You just need to right-click on an image, and choose the action you want to do on the icon dialog.

Once you have your media library set-up with the images you need for your content, go to your content page and select the ‘Image’ tab on top of rich text editor as shown in the screen shot below. Click the ‘+’ icon to open-up the image picker. You may want to simply drag and drop the image to your page or browse through your media library to select the image you want. Once you have added the image, don’t forget to give it a description and title, which helps improve your page ranking on Google and other search engines.


Adding Embedded Videos

Umbraco has the TinyMCE editor V3, which allows you to add embedded videos in your website. In the Umbraco editor on the toolbar, you will find a tool that’s in the shape of a filmstrip. Once you click on this tool, an interactive window will open which has a File/ URL box. Enter the URL of the page that contains the video that you want to embed into Umbraco. Click ‘Insert’, and ‘Save and publish’. The embedded video will now appear in your content page, as shown in the screen shot below.


Content Formatting Options

The TinyMICE editor in Umbraco 7, which is also known as Rich Text Editor is very interactive, quick and responsive. It works the same way as an MS Word file does, with different styles and alignment options. One can edit the content on the different pages.

Umbraco allows to create commonly used custom formatting styles like Page Title, sub Title, Headings, links etc. which are not available by default in the rich text editor. These styles are available in formatting dropdown of rich text editor as shown in the screen shot below.

As you can see the rich text editor has various options like Heading, Title, Add Media, Formats, Alignment, Font Styles, Hyperlinking etc. just like you find in an MS Word editor.

If you want to link some content to another web page or page with in a website, simply click on Insert/edit link option on the format menu. This opens a sidebar that will have the option to link the URL of the webpage you want to be displayed as shown screen shot below. While linking to an external URL, remember to prefix the https:// or http:// else it misreads to link it to a Level 2 webpage of the root page.


Work-flow of publishing content

Umbraco offers various options to manage your content once you have created the basic pages of a website. You can save the content of the page as a draft and this works great when you are still in the process of editing, and not yet ready to publish. The ‘Save’ button is available at the bottom of the editing panel on the main page; it also has options of ‘Save and publish’ and ‘Unpublish’.

Editors can also schedule the publishing of a page on a specific date or time by using the ‘Scheduled Publishing’ feature, and set the ‘Publish at’ date on the ‘Properties tab as shown in screen shot below. Let’s say you want a company press release to be published at 9 am on a Monday morning. Umbraco automatically publishes the article at the time you choose to do so. Just keep the article ready on all aspects, set the ‘Publish at’ date and time in the ‘Properties’ tab, and sit back and relax; Umbraco ensures that the article goes live at your set date and time.


Maintaining history of content changes

Umbraco keeps history of all changes and we can view change log and revert to the previous version any time. To see the history and revert to previous versions, right click on the content node in the content tree and click on “Rollback” option. From the Rollback dropdown select the version to which you want to rollback at the bottom of the dropdown, and it will show the change as shown in the screen shot below.


Umbraco Grid

In Umbraco, editors can use grid layouts to create and change content, instead of using the Rich Text Editor. Grid layouts consist of two main areas that need to be configured – grid layout area and grid rows. The layout area is divided into sections such as sidebar section and content section, and each layout section contains one or more rows. The grid rows are where one puts the content, and each row is divided into cells that contain the property editors.

The grid editor allows the data to be added into the grid, and this data could be simple text field or a media picker. Grid editors consist of 3 parts:

  1. .html view file
  2. .js controller
  3. .cshtml serverside renderer

The view is what the editor sees, the controller handles how it acts and the cshtml determines how the entered data is rendered in the template. You can easily customize the built-in editors to tailor the grid to suit your requirements. The built-in views that exist are:

  • textstring
  • rte
  • embed
  • macro
  • media

Umbraco grids are easy to use, and can be customised to build your own editor and help you render the content into the grid without using the Rich Text Editor. You can insert different types of content in a predefined layout. You can also use Umbraco Grid to create advanced page layouts in Umbraco, using any number of rows and columns. You can enable all content types for every row, and add text editor option to format the text easily.

Umbraco designers continue to add many more features to the platform to enhance its flexibility and ease of use by people with no coding experience. With a growing community support and the fact that this CMS performs better when it comes to high volume of traffic, Umbraco is the buzzword in the CMS market right now!

Shwetha Bhat | Blogger

Manjunath Govindappa | ASP.NET Technical Lead


Leave A Comment

Transform your business

We'll get in touch with you ASAP!

Contact us