Joomla! Documentation™

The "J1.5" namespace is an archived namespace. This page contains information for a Joomla! version which is no longer supported. It exists only as a historical reference, it will not be improved and its content may be incomplete and/or contain broken links.

Content is Incomplete

Adding pictures

Many articles benefit from having pictures in them. It is worth a try - even if you do not have a lot of experience with websites. The main problem is likely to be manipulating the picture itself which some people find much harder than the mechanics of uploading and inserting it.

There are distinct stages in getting pictures into articles:-

1. Prepare a suitable image
2. Upload the image to the website
3. Insert it into an article.

You have to prepare the image but the editor does the upload and insert for you. The detail depends upon how the Web site you are using has been set up.

1. Prepare a suitable image

Your picture is likely to be on your own computer, where you can edit it and give it a suitable name.

Note on editing images: There are many packages used for editing photographs and various images. If you are doing simple illustrations, something like Paint is perfectly suitable. If you are experienced using images perhaps you will know enough about picture manipulation not to need to be told it here - it is a large subject in itself!

• The image should be a file in a standard format - such as jpeg
• Give the image a short name without spaces. (The computer-way is to use capitals - eg LondonVisit)

2. Upload the picture

You may find it easier to get the picture where you want it to be on the page by setting up a table with one row and two columns. The text is entered in one cell and the picture in the other cell.

Create a table with one row and two columns - and no border.

Put the picture in one cell and any commentary in the other.

This is frowned upon by purists but it is the easy way to get started with a helpful layout.

There is a bit more complexity in inserting a picture than in writing the text. The picture has to be on the web server (where the web site is hosted) in order to be inserted in the article. The good news is that this is done using the editor. There will be a place for you to put the picture files on the web site you are using and you need to know where this is located in order to insert an image.

Open the Article for editing

Position the cursor where you want the image to start vertically on the page. If you are using a cell in a table, then place the cursor in the cell.

Click on the Image button below the Edit Article screen (imagebutton here) (not on the icon in the tool bar, which does not let you see images on your own computer)

a screen shot of insert image screen - showing the Upload part before upload

The Insert Image screen will open. The dialogue box hovers over the edit screen.

The top part of the screen defines where the pictures will go on the server.

Click on the folder on the server where you want the picture will go

There will be a place for you to put the pictures on the web site you are using. You will need to find what this is before you start - or take a good guess. Users are often given a specific area for storing image files.

Upload the picture

a screen shot of insert image screen - showing the Upload part with selection of file

Find the image on your computer

Click on the Browse button.

This opens the File upload window which lets you find the folder where your image is located.

Find the picture file that you want to use on your computer

Click Open

This puts the location into the Upload box. To copy it to the server:-

Click the Start Upload button

The file should now be amongst the image files at the top section of the screen.

Image screen

Highlight the image you want to use

This fills in the Image URL

Image Description: Give the image a description (needed for those who are visually impaired and have the information converted to speech).

Align: This can be set to the left or right of the text.

Image Title: Give it a title.

It is now ready to be inserted

3 Insert the picture to an Article

Click the Insert button at the top right of the dialogue box

The picture should be inserted on the page according to your instructions. It is likely to look a little strange in the editor edit.

Save the article

Check that it looks OK

A common problem is that the picture is the wrong size and sometimes much too large. You can resize it on the screen.

screen to show this

Position the cursor over the small square 'toggle' in one corner and drag it to make it smaller or larger. There is a bit of a knack in doing this!

You can repeat re-sizing again but may need to Save and then Edit again.

Using the Insert/Edit icon on the toolbar.

Alter Dimensions. Be careful because you need to keep the relationship between the height and width of the image. With a very large picture v- it can be usefulto put a decimal place.

You can resize the original picture and upload it again. Even a simple picture editor, such as Paint, allows you to resize pictures. Then delete it from the article and insert it again.

It is often necessary to fiddle around to get it the right size and in the right place.

click on the Insert/edit image button (a green box - actually an oak tree - in the tool bar) to make changes.

Remove a picture from a page

Open the Article for editing

Select (highlight) the picture

Press delete on your keyboard.

The picture will remain on the server.

Links to more about adding images

• http://docs.joomla.org/Adding_an_image_to_an_article

---

--Lorna Scammell December 2010