A Typical Article

Thank you for your contribution: 

The following items usually have to be taken into consideration when it comes to creating an article on your website:

  1. a text with one or more images
  2. a teaser text for list views with a read more link pointing to the full article page
  3. the article should appear on the front page and needs no menu link
  4. nice to have: a scheduled publication date
  5. nice to have: a printer-friendly version for visitors who would like to print the article
  6. nice to have: an option to forward the article by email

Start

The article should appear on the front page of your website. If you deleted, did not install or change your sample data, your Joomla! front page will look like the one in Figure 1. It is, of course, not a bad thing if posts should appear. :-)

cocoate.com/node/3604

Figure 1: Empty website

When you log into the administration area, you will see an icon called Add New Article.
You may either click on this icon or access the form via the main navigation Content Article Manager Add New Article (Figure 2)

cocoate.com/node/3604

Figure 2: Administration area

Article form

You are now in the article form, in which you will probably write all articles you will ever write in Joomla!. A very important place! The form is structured as in Figure 3.

cocoate.com/node/3604

Figure 3: Entry form for contributions

The minimum requirement for an article is a title (1), a category (2), and a text (3). If you look at the form more closely, you will notice the help texts that appear when you move the mouse across the description of a field. I have marked the areas in the form in Figure 3 with six digits.

1. Title

The most important part is the title or headline. The title appears as a headline on the website (usually in the biggest size of the HTML headline tags <h1>) and in the browser bar at the top (you can enable or disable this behavior). The title is the foundation for the alias field below. The alias is automatically generated by Joomla! when you save the article and and its appearance can be changed as well. Basically, the purpose of an alias is to have a simple, short and legible URL in the browser address bar, which can easily be used in e-mails or chats as well. In the example of http://example.com/first-article - first-article is the alias.

2. Category

This is about the classification or categorization of the article. Every item MUST be assigned to a category. If you explicitly do not want to categorize the article, you can assign the category uncategorized. This is especially useful for more static content pages like legal notices and the About Us page. In this area, other important attributes can be configured, including State (published or not), who has Access (Access, Permission depends on various settings), Language and Featured. Featured replaces the former attribute frontpage and ensures that the items are in a predefined blog layout for your website frontpage. The article ID is created after saving and consists of a serial number.

3. Text

In this section you can write your text, which should be of value to your audience. Sounds really easy, doesn't it?! :-)
Technically, you are dealing with a WYSIWYG editor (What You See Is What You Get) here. The editor converts your written text into HTML text format. Joomla! uses the TinyMCE editor as default configuration. TinyMCE is an independent open source project, which has so many functions that you could write a separate book about it. (May not be a bad idea.)
It basically works like any other word processor: write text, highlight text, then click on a toolbar icon and the function is applied or a dialog box opens.
The buttons below the input area are unusual and can be confusing at times. These buttons are Joomla! specific and only have an indirect relationship with the editor. The Joomla! core comes with five of these very practical additional buttons.
You can add more buttons by adding Joomla! extensions:

  1. Article: allows you to link to other existing Joomla! articles
  2. Image: You can insert an existing image or photo from the Media Manager or upload a new image.
  3. Pagebreak: inserts a pagebreak in your article
  4. Read More: allows you to stipulate where to place the read more link
  5. Toggle Editor: switches the editor on and off. If it is off, you will see the HTML code of your article.

4. Options

What was called Parameter in Joomla! 1.5, is now called Options since Joomla! 1.6, like, for example, the Publishing Options. Here you can specify who wrote the article (Created by). The user who created the article is usually allowed and responsible for making changes to the article later. Which name is really shown below the title at the webpage is configured in Created by Alias. The three fields below allow you to schedule the publishing. Simply enter the appropriate dates and Joomla! takes care of the rest.

5. More options

In this section you can configure many options by switching them on and off. You can change the article layout to suit the reader's and search engine's needs. Just start experimenting - it's the best way to learn.

6. Permissions

The sixth and final area concerns the permissions for this article. This selection will help us in many places in Joomla! 1.7 and I will cover this in chapter Users and permissions.

Sample article

Let's create the article outlined above together:

A text with one or more images

Just write your text. To add an image or images, there are numerous possibilities:

1. The image is already available online, for example, on Flickr.
In this case, click the image icon in the editor toolbar and copy the image URL to the dialog box.

2. The image is already in the Joomla! Media Manager.
In this case, click the image button below to select the image and insert it into your text (Figure 4).
cocoate.com/node/3604
Figure 4: Insert Image from media field

3. The picture is on your hard disk.
This is the most complex case. Basically, you will also use the image button below the text. There you will find an upload dialogue through which you can upload your image "easily". Remember that Joomla! will NOT resize the image. If you upload a photo from your digital camera, it will be displayed in its full original size (width > 3000 pixels). You have to resize the image before uploading.
If all goes well - congratulations!
If it doesn't work, this could be due to many things, such as lack of permissions in the directories of the media manager. At best, you will get an error message. If it still doesn't work, try posting a comment here. :-)

Once you have inserted the image from the media, you can select and format it by clicking the image icon in the editor's toolbar.

A teaser text for list views with a read more link to the full article

This is easy. Move the cursor to the position at which the read more link should appear and click on the read more button below the text area.

The article should appear on the frontpage and needs no menu link

Select Yes in the field Featured in Area 2.

A scheduled publication would be nice

Avoid this at first, so you don't have to wait for the article to appear on your website :-). If you would like to try it later with a different article, simply fill the fields Start Publishing and Finish Publishing with the appropriate information or select the dates by clicking the calendar icon.

A printer-friendly version of the article

If you do not know at this point where the global settings are located, have a look at the chapter Website and Content Configuration and verify the current settings. In area 5, you may switch the Show Printer icon to 'show'.

Forwarding of the article by e-mail

Simply set the options in area 5, switch the Show Email Icon to show.

Result

After saving you can reload your site and will see your article on the frontpage as in Figure 5.

cocoate.com/node/3604

Figure 5: Article on the frontpage