Tuesday, June 8th, 2010

Umbraco Content Section

In previous tutorial we completed Umbraco installation with Runway, an example site. As I said in the previous tutorial we will use this example site to get familiar with Umbraco CMS. We will see the “Content” section of the CMS in this tutorial.

Runway Homepage

Runway homepage can be controlled from the content section. The Content section will have a root folder for the site (Runway). The root folder which represents the site’s home page has an additional tab called site when compared to subpages of the site. User can edit site’s name and description here.

Content Tab:

The content tab allows user to enter the site content for the respective page selected on the left panel. The WYSIWYG editor is the standard editor you see in other CMS, except with an option of macro insertion. We will see about macros when we discuss about developer section of Umbraco.

The changes you make in the content tab will not be taking effect on the site unless you save and publish. To rollback the changes you made, right click on any nodes that you want to rollback, and click rollback.

Properties Tab:

You set all your site’s properties here. The “Document Type” tells you what document type the site’s page belongs to and same as with templates. One can create their own templates and document types for the site’s page to use with content section. We will see how we can customize and create document types and templates when we discuss about the developer section.

The user has the ability to schedule a publish or unpublish action for the site’s pages. You can also find other information like url for the page, author, last edited time and date.

Install Module:

We see three subpages in the content section for which we don’t have any navigation access from the home page. So let us install a navigation module that comes with Runway site.

Now let us switch to developer section for module installation. Click on the developer section, you will see packages. Click on the packages to expand the menu. Packages is the place where the developer can have access to modules submitted by Umbraco community members.

Click on the “Runway modules” and check the “Standard Top Navigation” to install it. Click install selected modules. Feel free to select any modules you like there. You can always add the modules as your site development progresses.

XSLT Usage:

You want to know the code behind the navigation module and how it functions? Yeah, I heard you. Look for a xslt file created under XSLT tree as soon as you installed the module. One of the features I like most about Umbraco is they make use of the power of XML and XSLT. If you are already a ninja in XML and XML parsing, this would be a cake walk for you. But for those who are not familiar, I would suggest you to take advantage of this Runway example and the xslt it created for the top navigation.

The xslt contains standard xml and xslt tags, in addition to some Umbraco libraries. You can create your own modules with help of this sample xslt created.

When I started the Umbraco tutorial, I mentioned Umbraco is designed such that keeping both developers and end users in mind. As you can see, the developer has an option of using python, xml, and lot of .Net Controls for building a site using Umbraco. We will discuss more about other techniques when we see developer section.

Morevover, it is neatly organized, grouping all technical stuff under developer section. The administrator can assign roles and access based on the user, which makes easy for the administrator to manage the CMS and not displaying technical details to the end users.

Okay, let us take a look at our Runway website’s home page now. We should be seeing the navigation to inner pages.

This completes the tutorial for content section of Umbraco CMS.

Category: CMS
You can follow any responses to this entry through the RSS 2.0 feed. You can skip to the end and leave a response. Pinging is currently not allowed.