Writing an Article Using the Joomla Frontend
Joomla has both a “frontend” of general user interface for writing aritcles and a “backend,” or administrator interface. The administrator interface has potentially more options and can be more confusing for new users. The tutorial that follows describes how to write a basic article for your organization’web site using the frontend interface. The website for Hillcrest Toastmasters is used for the example.
Resources Menu Before Logging In
In most web site designs, the options for adding a new article will not be available unless you log in. The example web site is designed so that the options appear under “Resources for Toastmasters” menu; before login, this only shows a menu option for the list of useful articles as shown in Figure 1.
Log In to the Website
To log in on most web sites, there will be a login screen or button. On the example web site, use the login panel at the bottom of the right side of the screen. The “Secret Key” box is used for Two Factor Authentication; this provides security when accessing the web site from a public terminal. If you do not know more, leave the Secret Key blank. For more information see Setting Up Google Authenticator for Joomla.
Resources Menu After Logging In
After logging in, the various menus for logged in users will appear. In this case the Resources menu adds options for creating articles and events. Select the New Article option to open up the dialog for creating a new article.
Write a New Article
To write an article select the "New Article" option will open the dialog for editing articles as shown in Figure 4.
Use Standard Text for Article Titles
Put the title for your article in the Title box. For search engine optimization, the title should be descriptive and between 30 and 70 characters and include one or more of the key words that you expect users to use in searches. The title will appear in Google/Bing search results and must fit on one line. If the article is part of a series, make sure that it fits the pattern of the other titles in the series.
In writing the article, you may want to include an <h1> tag that repeats the article heading or has a different description. Google, Bing and other search engines like to see <h1> tags, but you will need to follow the convention that your webmaster has set up for your site. Some sites are configured to include the title at the beginning of the article, while others are not.
To Add Photo, Select the Image Button at Bottom of the JCE Editor Window
Most articles should have an image or photo. To add images, use the “Image” button below the editor window (JCE Editor) or in the top right of the editor toolbar (Tiny MCE Editor).
If you have problems selecting the image, ask your webmaster to look at the “minification” settings for your web site. Minification is the process of removing unnecessary spaces and comments to reduce file sizes for downloads to browsers. Sometimes updates to templates can break the code used for the media manager dialog when minified; turning minification settings off can fix the problem.
Navigate to the Correct Folder to Store Images
The media manager will start out with the root directory for images. There will typically be a number of folders within the media directory to help organize the images on the web site. Navigate to the directory where the images you need are located, or to which you will upload your images.
Use the Browse and Upload Buttons to Select Files and Upload Them
To upload images, scroll to the bottom of the window and use the "Browse" button to select the images on your computer. When you have selected your images, use the "Start Upload" button to upload the files.
Before uploading images, resize them to the width that your webmaster suggests. If you do not have any instructions, 800 pixels wide is a reasonable size for most articles. An 800 pixel wide image will be about 100 kilobytes, while an image straight from your cell phone can be 1-2 megabytes; these take a 20-30 seconds to load in a browser and take up a lot of space on the web server. To resize before uploading, open the image in Paint or another image editor, and export it using an 800 pixel wide resolution.
If you have a lot of images to resize, the Imagemagick tool can do this from the command line on Linux, OS X or some Windows systems where it is installed:/p>
md originals
mv *.png ./originals
cd originals
for FILE in *.png; do convert $FILE -resize 800x ../$FILE; done;
cd ../
Set the Image Description, Caption and Title
After you have uploaded your image, select it and update the image description, caption and title. You can use the same text for all three or different text if you want to. The description is used by browsers that can't display the image and by search engine crawlers (Google) to figure out what the web site is all about.The title and caption are displayed with the image.
Set the Category According to Instructions From Your Webmaster
Most web sites are set up so that the category and tags assigned to an article determine where on the web site that the article shows up. For many web sites, this will be “Blog”. For the example web site, “Weekly Winners” put the article on the main page.
Fill in the Description to Give Google a Snippet You Want
Finally, scroll down to the Metadata section and fill in the Description field. Google, Bing and other search engines use the description to help understand the contents of the article. If it is a good length, the search engines will use this as the snippet of text displayed beneath the article title in the search results..
Save the Article to Publish
When you are finished, scroll back to the top and select the "Save" button to save and publish your article.
