A Typical Article
Submitted by Hagen Graf on
The following items usually have to be taken into consideration when it comes to creating an article on your website:
- a text with one or more images
- a teaser text for list views with a read more link pointing to the full article page
- the article should appear on the front page and needs no menu link
- nice to have: a scheduled publication date
- nice to have: a printer-friendly version for visitors who would like to print the article
- 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. :-)
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)
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.
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.
- 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.
- 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.
- 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:- Article: allows you to link to other existing Joomla! articles
- Image: You can insert an existing image or photo from the Media Manager or upload a new image.
- Pagebreak: inserts a pagebreak in your article
- Read More: allows you to stipulate where to place the read more link
- Toggle Editor: switches the editor on and off. If it is off, you will see the HTML code of your article.
- What was called Parameter in Joomla! 1.5, is now called Options in 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.
- 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.
- The sixth and final area concerns the permissions for this article. This selection will help us in many places in Joomla! 1.6 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:
- 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. - 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).
Figure 4: Insert Image from media field - 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.
Figure 5: Article on the frontpage















7 Comments
I found the article "How to
Submitted by Guest (not verified) on
I found the article "How to Create an 'About Us' Page" to be difficult to follow. In particular, I still do not understand how to connect a menu item to an article. I would like to see a detailed ample of how to create a typical article, how to place it on the web site, and how to attach it to a menu item. I would also like to see a discussion of when you need a menu and when you don't. Real beginners to content management need some theory to back up the examples. I know because I are one. If you like, and when I become comfortable with content management, I volunteer to write a suggested new chapter. (But only if the author asks me to.)
In particular, I still do not
Submitted by Hagen Graf on
try it here http://cocoate.com/joomla-16-english/con...
may be here http://cocoate.com/joomla-16-english/con...
and here http://cocoate.com/joomla-16-english/con...
hm ... a bit here ... http://cocoate.com/joomla-16-english/str...
Please write one on your new Joomla! 1.6 website :-) and comment here with a link to it.
I wish you all the best.
Thank you so much, after
Submitted by Guest (not verified) on
Thank you so much, after carefully following this I finally got it!
Still a long way to go but I'm getting there.
You are a life saver ! :)
"Figure 3: Entry form for
Submitted by Guest (not verified) on
"Figure 3: Entry form for contributions"
This image is too small and can't be enlarged, can you fix it?
"The alias is automatically
Submitted by Guest (not verified) on
"The alias is automatically generated by Joomla! when you save the article and and its appearance can be changed as well"
There is double "and".
I can't see the article on
Submitted by Guest (not verified) on
I can't see the article on the main page. It's just blank. I have set the category to uncategorized and featured to yes but still nothing. I have unpublished all the sample data but still cannot view the Apple on the main page or even any other page. I tried to put it on another page and put a link in the menu. After clicking it says page cannot be found.....Help?
Thank you but there is a
Submitted by Guest (not verified) on
Thank you but there is a problem and I want your help.
When I link the images inside my article from my back-end and I click the readmore button in someplace. the images link inside the article in the front page but it do not link in the intro text "
The read more text"?? How can I fix that. I want the pictures in the intro text to link as it link in the article page.
Thanks in advance.