If you have successfully followed the first tutorial in our CMS series, you have learned how to login to your account and update the text on your site in real time. Now you must upload your images to the web server before you can use them on your web pages. This tutorial will show you how to upload your images using the Image Manager.

The Image Manager is intuitive and simple to use. First, you will use this utility to browse your computer for image files. Examples of images you may want to upload are photographs, illustrations and logos. You can use the Image Manager to delete unused images from the server. You can also use the Image Manager to crop, resize and perform other edits on the image after it has been uploaded to the server. (These edits will not affect the original image that resides on your computer.) Finally, you'll learn how to create folders to categorize and store your images in. We'll show you how to perform all of these functions in this tutorial.

Note: As you follow this tutorial, you may find that your screenshots may vary from what you see here. Nevertheless, the directions are fundamentally the same.

1. 1. Following the directions from the first tutorial, login to your account and select a page to edit.
2. 
3.  
4. 2. Click on the Image Manager link on the main page of the CMS Admin Console. You can also access the Image Manager from the "Content" dropdown menu at the top of the page.
5. 
6.  
7. 3. Navigate to the folder you want to put the image in, if applicable. Click "Browse..." to search your computer for images.
8. 
9.  
10. 4. Choose your image and click "Open".
11. 
12.  
13. 5. Click "Send" to upload your image.
14. 
15.  
16. 6. Your image is now on the web server. The thumbnail image is shown in the Image Manager.
17. 
18.  
19. 7. There are two small icons under each thumbnail. The icon on the left looks like a tiny trash can. Clicking on this button will delete the image and corresponding thumbnail from the server. The icon on the right allows you to rotate, resize and perform other edits on the image. Lastly, the size of each image (in pixels) is displayed under the icons.
20. 
21.  
22. 7. Editing your image is easy and intuitive. Experiment freely, you can always close the window which will cancel the changes and leave the image untouched.
23. 
24.  
25. 8. You can also create separate folders to store your images in. Type the name of your folder into the box and click "Create".
26. 
27.  
28. 9. The folder we created is now visible in the Image Manager window. To add images to the new folder, double-click on it before uploading your files. (To move existing files to your new folder, you'll need to use the File Manager, which will be the topic for a future tutorial.)
29. 

 

Now that you have uploaded some images to the Image Manager, you can add these images in your web pages. Our image management tutorial will show you how.

Back to Tutorial Index