Content Editing and Management in an Open Souce CMS

There are exciting things ahead in this article, so let's get started.

Adding content to our site

Adding, updating, and deleting page content is at the heart of a CMS. We will use the Joomla! content management system for our examples in this article. Joomla! is a very popular and powerful CMS. Let's see how we can manage content with Joomla!.

Time for action-adding a page

  1. Log in to the administration section of Joomla!. It is generally at
  2. Click on the large icon that says Add New Article.
  3. Choosing an Open Source CMS: Beginner's Guide

  4. We want to create a page about Surya Namaskara, or Sun Salutation, one of the most popular yoga postures. Enter Surya Namaskara in the Title field, and Sun Salutation in the Alias field.
  5. Choosing an Open Source CMS: Beginner's Guide

  6. We have already created a few sections and categories in Joomla!. Select Posturesas Section, and Featured as Category from the drop downs.
  7. Choosing an Open Source CMS: Beginner's Guide

  8. The Word-like area below is a content editor. It is also known as the WYSIWYG (What You See Is What You Get) editor. Type in the following text in the area that looks like a white page. We took this text from Wikipedia, but you can type a statement of your choice.
  9. Surya Namaskara or Sun Salutation (lit. "salute to the sun"), is a common sequence of Hatha yoga asanas. Its origins lie in a worship of Surya, the Hindu solar deity.

    Don't see a Word-like editor?

    If you don't see a Word-like text editor, you may be missing some browser plug-ins. Your browser may warn you of missing plug-ins. In such a case, go ahead and install the missing plug-ins. If it still does not work, go toSite | Global Configuration | Site | Site Settings | Default WYSIWYG Editor and select TinyMCE or XStandard. You can also configure the editor per user from User Manager.

  10. Press Enter after the first paragraph. Add two more sentences like this:
  11. Surya Namaskara is an excellent exercise for the whole body. Mastering this asana will help you stay fit forever.

    "Asana" is the Sanskrit word for posture. Yoga postures are called Asanas.

  12. We want to highlight that Surya Namaskara is an excellent exercise for the whole body. Select that portion of text and click on the B icon to make it bold. You will immediately see the result in the editing window. At this stage, your editing window will look like this.
  13. Choosing an Open Source CMS: Beginner's Guide

  14. If you want to write additional text, go ahead and add it.
  15. Click on the large Save icon at the top right of the page when you are done.
  16. Choosing an Open Source CMS: Beginner's Guide

  17. Now our content is saved. Click on the Preview link in the Joomla! menu bar and you will see the content on the site's home page. Here's how it will look:
  18. Choosing an Open Source CMS: Beginner's Guide

What just happened?

We used Joomla! to create our first content page. We added a page title, an alias, and the section and category this page belongs to. We then used a Word-like editor to enter text for our page.

We emphasized keywords by making them bold. This was done by selecting the keywords, and clicking on the B icon button in the toolbar. Notice that we can use this editor to apply a variety of other formatting to selected text. This kind of text editor is called aWYSIWYG editor.

What is WYSIWYG? Why is it important?

 WYSIWYG (pronounced 'wize,wig) is an acronym for What You See Is What You Get.The Word-like content editor we saw is WYSIWYG because our page looks the same in the editor as it does on the site. The fonts, formatting, colors, and alignments—all work consistently between the editing interface and the actual site.

 Most CMSs come with a WYSIWYG editor. Such editors make it very easy for authors to add content and the formatting style that they like. These formatting options look and behave in a way similar to Microsoft Word or OpenOffice Writer. But the complexity of options provided may vary between CMSs.

The following image shows the WYSIWYG editor toolbars of Joomla! (top) and WordPress (bottom). As you see, WordPress offers a simpler editor, but with lesser options. An amateur user will find it easier to work with an editor with fewer choices. As a matter of fact, WordPress's editor toolbar shows only the first row of options by default. You can enable a second row by clicking on the last button in first row: Show / Hide Kitchen Sink. On the other hand, Joomla! comes ready with all options visible. This is useful for a professional who wants better control over content formatting.

Choosing an Open Source CMS: Beginner's Guide

Evaluate how important is it for you to have a WYSIWYG editor. Also, see if the CMS comes with it by default, or you have to add it via a plug-in or extension. For example, Drupal does not have a WYSIWYG editor module by default; but you can easily add it via a module.

This also means some CMSs may not have a WYSIWYG editor. So, if there is no WYSIWYG editor, how do you add content? Well, if your content does not require a fancy format, you can live with simple textual content. Else, you can always use HTML.

Surya Namaskara or Sun Salutation (lit. "salute to the sun"), is a common sequence of Hatha yoga asanas. Its origins lie in a worship of Surya, the Hindu solar deity.

Do I need to learn HTML? 

HTML is the language to layout and format web site pages. If you know HTML, it will be easier to manage your CMS. If HTML is not an option, a WYSIWYG editor can be really helpful. Here are some links for learning the basics of HTML:

Adding images

We have added the basic content to our page. Now, we will try to include some pictures in our page. Images add a lot of meaning to the content, apart from adding a decorative value. Let's add an image to our page now.

Time for action-adding images

  1. If you are not already logged in to the Joomla! administration, log in now.
  2. Click on Site in the main menu. That should open a submenu of site management options. Click on Media Manager.
  3. Choosing an Open Source CMS: Beginner's Guide

  4. You will see previews of current images in Joomla!. Click on the stories folder to go into it. You will now see images within this folder.
  5. Let's create a new folder here to store images of different asanas/postures. In the Create Folder text box near the top right side, type in asanas and click on the button.
  6. Choosing an Open Source CMS: Beginner's Guide

  7. This should create a new folder within stories. Click on it to move inside.
  8. We can now upload an image here. Click within the text box of the Upload File section at the page end. This will bring up a dialog window to select a file you want to upload. We want to upload an image for Surya Namaskara. Select an image of your choice. Now click on the Start Upload button.
  9. Choosing an Open Source CMS: Beginner's Guide

                                                  File uploading requires correct permissions on the server

    To upload files to your site, you require correct permissions on yourserver. In technical terms, this is called making a folder world-writable or changing mode to 777. You can change folder permissions using an FTPapplication, or your site's control panel. Technically, it's sufficient to give a 666permission—read-and-write permission to the owner, group, and others—butnormally everyone gives a 777 permission, including execute permission for allthree. Here's a screenshot of setting these permissions using FireFTP, an FTPextension for the Firefox browser.

    Choosing an Open Source CMS: Beginner's Guide

  10. The file upload operation may take a few seconds to complete, depending on image size. Once the image is uploaded, you will see its thumbnail in the list. Upload more images if you want to.
  11. Finally, your folder may look like this.
  12. Choosing an Open Source CMS: Beginner's Guide

  13. We are now ready to insert an image in our page. Select Content  Article Manager  from the main menu. Click on the Surya Namaskara page to edit it. Inside our WYSIWYG editor, keep your cursor where you want to insert the image.
  14. Click on the Image button below the WYSIWYG editor.
  15. Choosing an Open Source CMS: Beginner's Guide

  16. A window will open up with a thumbnail list of images available. Click on the b we created earlier.
  17. Choosing an Open Source CMS: Beginner's Guide

  18. Click and select an image you want to insert. Add a description and title.
  19. Choosing an Open Source CMS: Beginner's Guide

  20. Click on the Insert button at the top right.
  21. That will insert our image into the content area. Re-size it using the handles on the corners if you wish. Here's how it will look:
  22. Choosing an Open Source CMS: Beginner's Guide

  23. Congratulations! You have successfully added an image to our page.

What just happened?

 We uploaded an image from our computer and added it to a page. In the process, we learned about the Media Manager, creating folders, and uploading files to Joomla!. We also learned how to select images to use on a page and even saw image insertion options.

 Adding an image involved multiple activities. We had to first add it to the Media Manager.Because this was the first time we were adding an image, we also created a new folder. It was as simple as typing in a name and clicking a button.

 We added images within folders since it will help us manage the images better. Once we add an image to the Media Manager, we can use that image on as many pages as we want. The Image button on the content editing screen allows us to select images to use on that page. It also helps us to add captions and correctly align inserted images with the text.

You can also upload images using that image selection window itself.We took the Media Manager route to learn more.

You can also upload images using that image selection window itself.We took the Media Manager route to learn more.

Have a go hero-image formatting options

 We have learned enough about inserting images to content now. It is time we try out something else. Once you insert an image, click on it, and then click on the small photo icon in the WYSIWYG editor's toolbar. Go ahead and try out different image properties, different alignment options, spacing, caption, and alternative text. See how the result changes in the preview.

Choosing an Open Source CMS: Beginner's Guide

                                                      Don't let your images sink your site!                                                    

Make sure your images are optimized and sized for web usage. Avoid changing the width and height via image properties. If you want to show a smaller image than the one you uploaded, resize it using photo editing software and use that new version. Large images take longer to load and can make your site slow.


Have a go hero-adding a video

 Our Yoga site may also require videos. Look around and find how a video can be added to the page.

 Completed? Alright! We have now looked at how to edit a page and insert images/videos into it. Let's see the other options we have in editing and maintaining site content.

Maintaining content

Apart from editing text content and images, there are many other content maintenance activities we may have to do. We may need to assign categories to content, add metadata, and manage contributions. Let's quickly review how we can accomplish each of these tasks, and assess the CMS in that process.

Our Yoga site will have a lot of information about asanas. Apart from that information, we also want to put up yoga-related products. Hence, it is important for us that our site ranks well in search engines. When someone searches for a particular asana, we want our site to show up on the first page of search results. There are numerous techniques to achieve this,and this subject is known as Search Engine Optimization (SEO).

One of the techniques for SEO is having good page titles, meta tags, and relevant text.Let's start by adding some metadata to our page.

Time for action-adding metadata

  1. Log in to Joomla! administration and edit the Surya Namaskara page we created earlier.
  2. On the right bar, locate the Metadata Information tab.
  3. Enter a description and some important keywords about this page.
  4. Choosing an Open Source CMS: Beginner's Guide

  5. Let's also make the page title more descriptive. Instead of just calling it SuryaNamaskara, change the title to Surya Namaskara - Sun Salutation - Ideal way to perform this ideal Yogasana.
  6. Click on the Save button at the top right to save the page.
  7. Joomla! sets some global metadata by default. Let's change that to our requirements. Go to the Site | Global Configuration | Metadata Settings.
  8. Change the Global Site Meta Description and Global Site Meta Keywords fields.Values entered here will show on all pages of our site. Save the settings.
  9. Note that the configuration.php file in the Joomla! installation root folder,should be writable for these changes to be saved. You will get an error message if it is not.

    Choosing an Open Source CMS: Beginner's Guide

  10. Now, go to site Preview and navigate to the Surya Namaskara page. Right-click on the page and click on View Source to view the source code of the page. Near the start of the HTML source code, you may see something like the following image.
  11. Choosing an Open Source CMS: Beginner's Guide

     It's the description and keywords we entered. If you go to another page where we haven't entered metadata earlier, you will see the global metadata. The search engines—and humans—should be able to understand our pages much better now.Job well done!

What just happened?

 We set up site-wide and page-specific description and keywords. We also changed the page title to be more informative—something that could attract visitors to our site if they see it on the Google search results page.Metadata embedded in a page is not visible to the users, but software can see it. So, you can use metadata to help search engines or other software that is going to read that page.

 This metadata can also help in identifying content. Description metadata can be used to show a summary of the page in archives. If we have a site search engine, keywords can be searched to find a match for the user. As a matter of fact, some search engines(not Google) rely on metadata from title, keyword, and description tags along with the content body—giving more weight to metadata.

 Some CMSs allow adding custom metadata. This is a great way to embed additional information. You can put in the author name, revision date, source of the content, licensing attributes, or anything else that you prefer. In our case, we can possibly use metadata to find products related to a posture.

Tagging is keywords on steroids!

 You may have heard about "tagging" your content. Tagging essentially means associating some keywords to content. These keywords are searchable, and can be shown on a page. Clicking on one tag or keyword can show you a list of all other content items that belong to that tag. This concept originated on blogs and is now available in many CMSs. Adding tags even allows you to build beautiful tag clouds using font sizes in proportion to usage of tagsin content.

Do you need more SEO?

If you need more Search Engine Optimization, enable Search EngineFriendly URLs on your site. This will include page title, category, or other such information directly in the URL. This is a simple and effective way to improve search engine rankings.

We saw how we can use metadata to help our search engine positions and to organize content. One more thing we will need often is to link one page to another. How do we do that?

Have a go hero-adding links

Linking one page to another is very important. Linking increases hits, and makes it easier to find relevant content on your site. Every CMS will allow adding links to the content. You typically do this by selecting a piece of text and clicking an anchor-like tag in a WYSIWYG editor. Look around and find out how you can do this with your favorite CMS.

Does the CMS allow linking internal content without using full URLs? Is it easy to manage related content? How easy will this be for content authors?

Allowing people to contribute

On our Yoga site, we will have multiple authors. Each will write some content. An editor will review this content, edit it as needed, and publish it to the site. We also want to make sure we have old versions of content. In case something wrong gets published, we can quickly revert to an earlier version. And of course, authors won't have access to site administration features.

Have a go hero-determine multiuser needs

 Answer the following questions for your site to determine your needs to support multiple users:

  1. Do you want to allow multiple authors to contribute content to your site?
  2. Do you want to allow anyone to edit the site content? Wiki-based software will be best in such a case.
  3. Do you want to assign different access rights to different users?
  4. Do you want to keep different versions of content and compare between revisions?
  5. Do you want to be able to revert/rollback to a previous version without actually editing the content?
  6. Would you like your site users to add comments? Can any user add comments?
  7. Do you want users to register before adding comments?
  8. If users can contribute content/comments, what will the approval process be?

 Now check the CMSs you shortlisted to support these features. This can get critical because not all CMSs will support these features. A wiki supports adhoc editing of the content, and is ideal for many-to-many communications. A blog is perfect for one-to-many communication, and to allow reader comments. Strike a balance between the CMS's features and your needs.

Understand tech skills of authors

If you are going to manage content yourself, you have to worry less about the technical skills of others. You can choose a CMS that you find comfortable. But if you have other people writing and editing content, make sure they don't get daunted by the complexity of the software. An author's job is to create and manage content, and not fiddle with nuances of a CMS. So, understand the technical skills of your authors and select a system they can use.


 We went through a lot! From WYSIWYG editors to uploading images and adding meta tags, we have covered a lot of distance.

 Specifically, we learned about:

  • A WYSIWYG editor and using it to format our content; adding images to content, changing image properties
  • Meta tags—how to add them, and how to use them
  • Features to look for while working with multiple authors

 In this whole process, we understood how easy (or difficult) it can be to use a CMS. A certain CMS may be very easy for you, but may prove complicated for someone else. We learned that we must keep our authors in mind while selecting the CMS.

Hence we can say we have learned how to go about maintaining content on our web site.

You've been reading an excerpt of:

Choosing an Open Source CMS: Beginner's Guide

Explore Title