You are reading this tutorial because you have a website powered by the Joomla! content management system. Congratulations!  Joomla! is one of the best ways to run a website. It is dynamic and expandable, with a huge community of developers and users (see http://www.joomla.org for more info.)

Click here to download this tutorial.

This tutorial will demonstrate how to upload pictures and other media files into your Joomla! website.  As always, remember to use the Firefox web browser to access your website.

We start this tutorial on the home page of the administrator back end. Before you can insert pictures into your website, you must first load them into the media manager. On the administrator navigation bar, hover over "Site". Then click on "Media Manager":

This will take you to the media manager (see image below). Notice that the media manager contains folder. Click on the "Stories" folder:

Important! All uploaded images to your website must be kept in the "Stories" folder, or a folder within the "Stories" folder. Otherwise, Joomla! will not recognize it later.

You should now be in the "Stories" folder:

Notice that the directory selector box (see above) is now displaying "/stories". This means that you are in the stories folder.

It is important to keep your website well organized. Since we will be uploading a picture of a bonsai tree in this tutorial, we will create a new folder (within the "stories" folder) called "trees". To do this, enter "trees" in the Create directory input box (see below). Then click "Create", located in the upper right hand corner:

Important! Folder names cannot have spaces in them. If you want to use two words in the folder name, don't use a space or use an underscore,"_".

Now we have a new folder, located inside the "Stories" folder, called "trees":

Click on the "trees" folder to enter it. You should now be inside the "trees" folder (see below). Notice how the directory display now shows that you are in the "trees" folder, within the "stories" folder:

Now that we are inside the folder we want, it is time to select a picture to upload. To select the picture file we want, we must first click the "Browse" button, located on the bottom left: 

This will pop up a window that you can use to navigate to the picture file you want. In this tutorial, we are selecting a picture of a bonsai tree (if you are using a PC computer, this pop up screen will look a little different):

When you have selected the picture file, click "Open", which is located on the bottom right of the window.

Now you should be returned to the folder display Click on the "Upload" icon:

The file should upload, and a few seconds later it should appear in the window:

The picture is now successfully into your website!

Important! The file size of your uploaded pictures should be kept as small as possible. Try not to exceed 50-80 K, and if you are using many pictures in one content item, try to keep the less than 30K each. This is because the bigger the file size of the picture, the longer it will take to download on to someone's computer when they visit your website.

That concludes the tutorial. You can use the same method to upload Flash-.swf files and mp3's and Quicktime movies onto your website.

To insert an image into one of the content items on your site (in other words, to actually get your pictures onto one of your web pages) you must manually insert the picture into the content item that is displayed on that particular page. To learn how to do this, please see the tutorial "Inserting Pictures and Flash files Into a Content Item."

This concludes out tutorial on how to upload pictures. We hope it is of use. Should you have any questions, please don't hesitate to call or email Floating World Web Development.