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 athttp://yoursite.com/joomla/administrator/.
2. Click on the large icon that says Add New Article.



3. 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.



4. We have already created a few sections and categories in Joomla!. Select Posturesas Section, and Featured as Category from the drop downs.



5. 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.

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.

6. Press Enter after the first paragraph. Add two more sentences like this:

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.

7. 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.



8. If you want to write additional text, go ahead and add it.
9. Click on the large Save icon at the top right of the page when you are done.



10. 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:

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.

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.

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:
http://www.html.net/tutorials/html/
http://www.w3schools.com/html/DEFAULT.asp

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. 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.
4. 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.



5. This should create a new folder within stories. Click on it to move inside.
6. 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.



                                              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.



7. 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.
8. Finally, your folder may look like this.



9. 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.
10. Click on the Image button below the WYSIWYG editor.



11. A window will open up with a thumbnail list of images available. Click on the b we created earlier.



12. Click and select an image you want to insert. Add a description and title.



13. Click on the Insert button at the top right.
14. 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:



15. 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.

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.