(View PDF file)

If there is a picture in your article, you will need to insert the picture into the article. You may also want to create a thumbnail picture to be displayed when the article is listed. You don’t need to use any photo editing software to prepare the correct sized picture. The admin program can resize the picture to fit the web page. It will also create a thumbnail picture at your request.

Example: You will insert a picture at the top of the article you’ve just added to the website. The picture will be at the left side of the text.

If the article was posted several days ago, you will have to open that existing article in the Control Panel.

Suppose you have just added an article, and you are looking at the article record in the Control Panel. Your computer screen looks like this.

A. Go to the Description box, it is the lower box in the Title/Description group. Find the beginning of the article and click your mouse at this position.

B. Click the “Insert/edit Image” icon among the editing tools. It is the icon with a tree. The “Insert/edit Image” screen will appear.



C. You will need to fill in the Image URL box with the path to the image file in the web server. Note that we also use the term "image" for "picture". In order to upload an image file and fill in this box, please click the icon at the end of the box. You will see existing files in your web server. These files are organized into folders depending on their purposes. Since this file is related to an article, you will upload it into folder "Articles".



D. The look of this screen is similar to Windows Explorer where you store files in your computer. Click on folder "Articles" on the left panel. You will enter the files area of articles. This folder looks similar to the following picture if you have not uploaded any file into it.



E. Click the Upload button at the upper right corner. You will see the Upload Screen.

Note: At this moment, do not concern about the options on the right of this screen.

F. Click the "Add" button. You will see the files in your computer similar to the following. If you want to see the thumbnails of your files, click on the last icon in the same line with the "Look in" box, then select "Thumbnails" in the drop down list.



G. Find your image file. Click on it. Note that you can select more than one file to upload by holding the "Ctrl" key on your keyboard while clicking more files. Then, click the "Open" button.

The Upload Screen will be back with the name of the file at the upper left corner.

NOTE: You may select additional files to upload by clicking the "Add" button at the lower left corner. You may remove a file by clicking the "Delete" button right under the filename, or remove all selected files by clicking the "Delete All" next to the "Add" button. On the right side are options to overwrite existing filename, keep original image size, resize to standard size, and more.

H. Click the "Upload" button. The file will be transferred to the web server.

I. When transfer is completed, the message “All Files have been uploaded” will appear. Click "OK". Then click the "Close this window" button at the lower right corner.

J. A message will appear asking you to confirm. Click the "Yes" button.

K. You will be back to the file area of your web server. This time, the filename you just uploaded will appear inside the folder "Articles".

L. If you want to add a caption to the picture, you may do it now, before inserting the picture.

M. Click on the filename, you will see a small image of your file at the lower left corner. Under the image is the "Adjust image" button. Click this button; a screen will appear with some image functions.

• To add caption to the image, type text into the "Draw caption" box. The text will be converted into an image and will be part of the image. Adding caption this way is easy, but if you need to change the caption you will have to re-upload the picture and repeat this step.

• In this screen, there are functions to change the image format, change the image quality, overlay a watermark on your image (called "Draw Mask" in this screen), and create different standard sizes of the picture. The default size is the original image.

N. Click "OK" to finish adding the caption or adjusting the image.

• Then, click the "Insert" button at the right bottom.

P. You will be back to the "Insert/edit Image" screen. Now, the "Image URL" box was filled with the path to the image.

Fill in or select the necessary data for the rest of the boxes.

• Original Insert. If this box is checked, the original image will be inserted into the article. If it is unchecked, the image will be resized to the standard size for this website. You can decide the standard sizes for the images in your website by going into System Tools.

• Image description. You may fill in the description of this picture in this box. This text is not shown on the website. But, search engines will use this text to compare with the text that a user enters to search for information. If your description matches the search data, your image will be displayed in the search results.

• Alignment. You may place your image at different positions in relation to the text. Click on the arrow at the end of the Alignment box and choose an alignment. In this example, you will select "Left" and the image will be on the left side of the text.

• Border. You can decide whether your image will have a border or not.

• Vertical and Horizontal space. You can decide the distance from the edge of the image to the nearest text by filling a number of pixels in these boxes. Vertical space is the distance from the top edge and bottom edge of the image to the text. Horizontal space is the distance from the left edge and the right edge of the picture to the text. The default number for both spaces is 5.

You have just inserted an image into the article. There is still one more thing you need to do. That is adding a thumbnail image to the article.

R. Find the "Thumbnail Image" box below the description box. You need to fill in the path to the thumbnail image here.

S. Click the "Browser" button. You will see the file area of your web server. Find the image file you want to create a thumbnail image from.

U. You are back to the article record and will see that the "Thumbnail Image" is already filled in with the path to the thumbnail image file. The thumbnail image is also displayed above this box.



V. Click the "Update" button at the top or bottom of the screen to save the changes you have made. The message "Update Successful!" will appear near the upper left corner.

W. Go to your website and check if the image has been inserted into the article and the thumbnail image is already showing in the list of articles of the category "Writings". You must refresh the web page. Click the "Refresh" button of your browser, or hit the "F5" key on your keyboard.