This tutorial will tell you how to upload images and other media files to Joomla website. It also will touch such questions as: how to edit and manage images uploaded to content pages of the site, how to use Media Manager image(s), etc.

You can insert images to a content page in two ways: through Media Manager or through Article Manager.

Media Manager

Before you can insert pictures into your website, you must first load them into the media manager. Media Manager is one of the most useful Joomla’s built-in components. It can help you manage a lot of media formats such as video, sound and images. It can even be used to generate HTML codes for images.

So,

1. select Site -> Media Manager on the Joomla Administration page first:

1. Media manager already contains some media information structured by the folders. If you wish to use the uploaded image on content pages of your site, select Stories folder.
2. Within the Upload Image area, click Browse button. Use the browser in the File Upload popup window to select a picture to upload.
3. Click Start Upload button.

The uploaded image will appear in your image library, and you will then be able to insert it in any part of your website. However you can use media manager to work with any media files (sounds, video, images).

Note: Please remember that all images uploaded for their further using on the content pages must be kept in the Stories folder, or a folder within the Stories folder.

Note: You can easy delete any uploaded images in the Media Manager simply by selecting the image and then clicking the Delete button.

It is important to keep your site well organized. So you may wish to create a folder within the Stories folder and keep your image(s) there. To create a folder in Media Manager, you should:

1. Click on the Create Folder box (which is to the left of the respective button) and create a name of your new folder:
   
   Folder’s name cannot contain any spaces, so you should use a dash or underscore.
2. Click the Create Folder button.

Now you can upload images or other media files into this folder.

Note: to delete a folder, select it and then click Delete.

All uploaded media files are available through your site regardless are they used on the site content pages or aren’t. You can access to any uploaded file by a direct link.

Direct links forms in the following way:

   http://URL_to_your_site/images/path_to_the_file/filename

where URL_to_your_site is your site URL and /images/path_to_the_file/filename is a location of the required media file on your server. You can view path to the media file at the top of the Files area within Media Manager.

Article Manager

You can add an image file to a content page directly editing the article. To insert image to the article, first go to the Content -> Article Manager:

Create there a new article or edit the existing one; at the bottom of the page, click Image button.

Now you are in the Stories folder of Media Manager. Select the existing image file to insert it to the article:

1. Select the image;
2. Set image parameters (description, title, align and caption) if necessary;
3. Click Insert.

Or upload a new image first:

1. Within the Upload area, click Browse and select the required image;
2. Click Start Upload;
3. The uploaded image will be stored on your server. Now you can use it in the content of your article.

If you know URL to image you wish to insert, you can click this button being editing the article:

And enter URL to the image, its description and some other properties to the Insert/edit image form:

Click Insert when finish.

Joomla allows to edit images through the Insert/edit image form of the Article Manager. You are able to set the following parameters for the image:

• Description – enter short description of the image to the Image description field;
• Alignment – set the alignment for the image in your article (baseline, top, middle, bottom, text top, text bottom, left, right) or leave it “not set”.
• Dimensions – set the required dimensions for the image within Dimension field. You can easy reduce the image without quality loss using this parameter.
• Border – enter width of image border (in pixels) to the Border field;
• Vertical/Horizontal space – enter vertical and horizontal spaces between image and text content of the article to the respective fields.

Click Insert to save your changes.

Renew the respective page of your site. Now you are able to view the inserted image in the article.