A 15 Minute Surreal CMS Integration

You’ve already built your website, but how are you going to maintain it? In this tutorial, you’ll learn how to integrate your website with Surreal CMS in under 15 minutes. We’ll go over some of the “gotchas” and have you editing virtually any static website in barely no time at all.

Overview

You’re probably wondering how you could possibly integrate your entire website with a CMS in just 15 minutes. The truth is, due to the recent trend of “light” content management systems, it’s becoming easier than ever to get small to mid-sized static websites up and running in them.

What is a light CMS? For the sake of this tutorial, I’m defining it as an easy-to-use, unobtrusive content management system that you don’t have to install. The nice thing about these systems is that you don’t even have to host them yourself, which is why integration takes very little time.

There are actually a handful of these CMS products available, including CushyCMS, Pagelime, and SimpleCMS. Most of these systems work off the same basic principle — you add class=”something” to almost any HTML element, link your website up to their system, and you’re done. Best of all, every one of these systems offer a free version.

Although every light CMS product has its pros and cons, I chose to work with Surreal CMS because of their vast feature set and simple interface. You’ll see exactly what I mean in just a moment, but in the meantime, here is the general process of integrating with any light CMS:

Create your website
Link it up to the CMS
Enable webpages
Add one or more editors
Begin editing

Just to familiarize you with the tool that we’ll be working with, here is a quick glimpse of Surreal CMS’ webpage editing screen:

Design Considerations

Before you begin working with a light CMS, it’s always good to think about things such as character encoding and the way you link to images and other resources. Surreal CMS prefers that you use UTF-8 character encoding, which is as simple as adding the following meta tag to the <head> section of each webpage:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

It’s also important that you link to documents, images, and other resources in a way that the CMS can understand. Surreal CMS works best when you use root-relative linking or absolute linking:

<a href="/images/photo.jpg">...</a>
<a href="http://example.com/images/photo.jpg">...</a>

The last but probably most important thing to consider before linking your website up to Surreal CMS is the placement of your content regions. Here is an excellent example of a very basic webpage that has a navigation menu, a sidebar, and a main content area:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>Example Webpage</title>
		<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
		<meta name="description" content="This is an example webpage" />
		<meta name="keywords" content="example, examples" />
		<link href="/css/screen.css" rel="stylesheet" type="text/css" media="screen" />
	</head>

	<body>

		<div id="header">
			<h1><a href="http://example.com/">Example.com</a></h1>
		</div>

		<div id="nav">
			<?php include("$_SERVER[DOCUMENT_ROOT]/includes/nav.php"); ?>
		</div>

		<div id="middle">

			<div id="sidebar" class="editable">
				<p>Sidebar content here</p>
			</div>

			<div id="main_content" class="editable">
				<p>Your content here</p>
			</div>

		</div>

		<div id="footer">
			<p>&copy;Example.com</p>
		</div>

	</body>

</html>

You may have noticed that I added editable classes to the sidebar and the main content region. This is how the CMS knows what sections of your page it should allow you to edit. You can add the editable class to almost any HTML tag, and you can have as many as you want on each page.

Another thing you may have noticed was that the navigation is being included from a separate file via PHP. Surreal CMS allows you to work with included files like this so you can update your entire site’s navigation without having to edit each page individually.

Once you’ve prepared your pages and setup editable regions, you’ll be ready to integrate your website with Surreal CMS.

Adding Your Website to the CMS

Surreal CMS offers both free and paid accounts. The free account has very few restrictions, and will be more than sufficient for the sake of this tutorial. Simply go to their website and create a free account.

Once your account is created, login to the CMS at http://edit-content.com/. This is the gateway to the Surreal CMS application.

Now that you’re in, select the button that says Add a Website. Here is the form that you will see:

Enter your website’s URL, server (usually ftp.your-domain.com), FTP username, and FTP password. You can verify that you typed everything correctly by clicking Test Connection.

For the Website Root, it’s best to click the Browse button and use the browsing tool. Essentially, your website root will be the folder that contains your homepage. It’s important that this folder be the actual folder that has your homepage so the CMS can properly map URLs to images and other files.

If you want to specify custom paths for documents, images, and media files, select the Advanced option. When you set custom paths, it will tell the CMS where other people who are editing your website are allowed to upload files. For now, you can leave these blank.

Enabling Your Webpages

Now that your website has been added to the CMS, the next step is to enable your webpages. In other light CMS products, this can be a bit taxing on your time, but Surreal CMS has a nice scan feature that auto-enables webpages with just a click.

To begin enabling pages, select your website from the list:

Next, select Enable Webpages. The following dialog will appear:

Select the page or pages that you want to be able to edit in the CMS. As you select them, they will appear one-by-one in the background. As a shortcut, you can navigate to any directory on your website and click Scan for Editable Pages. This will tell the CMS to enable any page in the current directory that has a class=”editable” attribute in it. When you’re finished, select Done.

By default, each page that you enable uses the <title> of the page as a label. You can easily change this to something more CMS-friendly by clicking on Edit Label. For example, you might change the label for index.php to read “Homepage” and the label for nav.php to read “Navigation”.

Updating Your Content

Believe it or not, the hard part is over. Now it’s just a matter of getting in there and editing content. Part of the reason I like Surreal CMS so much is that it streamlines most of the setup. That said, let’s move on to editing content.

After you enable one or more webpages, the next step is to begin editing. Simply select any of the pages that you’ve enabled by clicking on the appropriate page label. This will take you into the webpage editor, where you’ll spend most of your time using this great CMS.

In the webpage editor, you’ll see four tabs:

Content – This is where all your content regions can be found.
Properties – You can edit the page title, keywords, and description here.
History – View every revision of this page that gets published for up to 90 days.
Editors – See a list of all the editors that have access to the page.

Inside of the Content tab, assuming your page has at least one editable region, you’ll see something like this:

This particular example has the two editable regions we talked about earlier: sidebar and main_content. You’ll notice that the CMS converted the lowercase, underscore-separated IDs into Camel Case, space-separated labels for aesthetics. If you have more than one editable region on a page, you can switch between them by clicking on the appropriate button.

At this point, editing works the same way as it does in many other content management systems and word processing applications. You can format text, change alignment, insert images, lists, etc. Surreal CMS even has a built in File Manager that lets you view, upload, rename, and delete files and folders. To top it off, there is also an Image Editor that lets you resize, crop, rotate, and flip images with ease.

Depending on the type of element that you add class=”editable” to, Surreal CMS will provide an appropriate editing tool. As an example, here is what an editable <img> looks like:

The Edit Image button launches the Image Editor that I talked about earlier. It’s really easy to use, so you shouldn’t have any trouble at all manipulating your photos. Here’s what it looks like:

Once you’re finished editing, you can preview your changes by clicking Preview. A new window will open, and you’ll see your page exactly as it will appear when published. Of course, if you’re happy with your changes, clicking Publish will save them to your website.

Allowing Other People to Edit Your Website

Now that you know how to setup your website and edit it yourself, wouldn’t it be nice to allow other people access as well? This is especially useful for designers who want to give clients limited access to edit their own websites, and it’s simple to setup.

First, select the Editors tab from anywhere in the CMS and click on Add an Editor. The following form will appear:

Simply fill in the person’s name and email address to start. Then, select the website(s) that he or she should be assigned to. If you want, you can open up the Advanced section and allow the editor to clone pages, delete pages, and edit page properties. You can also enable or disable every option in the rich-text editor toolbar from here.

Once you’ve entered all the necessary information, select Add Editor and the user will be added to the CMS. By default, an email is sent to them containing their username and password. You can disable this, however, and the CMS will show you their temporary password for you to provide them with manually.

There are a couple things that you need to know about editor accounts. First, they don’t have access to everything that you do as a designer — editors only have access based on the websites and permissions that you assign to them. Second, editors don’t have access to things like full-page source code editing and the Tidy tool, which we’ll talk about shortly. The best way to see what the difference is between a designer and an editor account is to create yourself a test editor with an alternate email address.

Before we move on, there’s one other feature that you should know about editors. You can block them from editing specific pages on a per-user basis. Simply open any page for editing and select the Editors tab. Next to your editor will be an option to Disable editing. Clicking this will prevent that user from editing the current page.

Other Handy Features

So far, we’ve covered everything from integrating Surreal CMS with your website to editing pages. The fun doesn’t stop there, though. Here is a list of features that you can take advantage of once you start to explore deeper into what Surreal CMS offers:

Cloning Webpages

You can create new pages by duplicating existing ones. This is especially useful because you can setup one or more blank template pages and let your users create pages as they need to. You can also turn this on or off for each user, so more experienced editors can have more control over the site.

Styling the Rich-text Editor

Apply styles from your website to the rich-text editor to give users a similar look and feel similar to the website. To access this feature, select the Websites tab from anywhere in the CMS and choose a website. You’ll see a button labeled Change Editor Styles.

Editing CSS, JavaScript, and XML Files

You can enable stylesheets, scripts, and XML files just like any other webpage. Of course, you’ll be editing raw source code, so you might want to block inexperienced users from accessing these types of files if you enable them.

Editing Full HTML Source Code

While you’re editing a webpage, you’ll notice a button labeled “Edit Content Regions”. This actually allows you access to the full source code of the page. Editors do not have access to this tool.

Repairing Messy HTML Code with Tidy

Surreal CMS has a built in tool that utilizes the popular HTML Tidy library. This is useful for fixing nested tags or invalid HTML code that may cause problems while editing. You can access this tool from within the full source code editing page.

Viewing Editor Activity

You can see what your editors have been up to! This includes what pages they’ve accessed, when they were edited, and even the times that they logged in to the CMS. To view this information, select the Editors tab from anywhere in the CMS and choose an editor. Click on the editors name to see their recent activity.

Pro Features

Surreal CMS is free to use for up to three websites. After that, they ask you to pay $25 USD per month for their paid service, but Pro accounts have a couple other nice features, too. For example, you can access the CMS from your own domain or subdomain (i.e. cms.your-domain.com).

With a Pro account, you can also upload your own logo and customize the theme, which is ideal for designers who want to use the CMS as a solution for their clients. Here’s an example of what you can expect when you brand the CMS as your own: