Add an image: Joomla! 1.5
From Joomla! Documentation
Revision as of 05:54, 28 December 2010 by LornaS
Many articles benefit from having images, illustrations or pictures in them.
Who is it written for?
But there is a bit more complexity than in entering and manipulating text. It is worth a try - even if you do not have a lot of experience. The main problem is likely to be manipulating the image itself before you use it and the mechanics of uploading it.
There is a bit more complexity in inserting a picture than in writing the text. There are distinct stages in getting images to display in articles:-
- Prepare a suitable image
- Upload the image to the website
- Insert it into an article.
You have to prepare the image but the mechanics of upload and insert are done using the editor. The detail depends upon the Web site that you are using.
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.
- The image should be a file in a standard format - normally jpeg or png
- Give the image a short name without spaces. (The computer-way is to use capitals - eg LondonVisit)
2. Upload the picture
The picture has to be on the web server (where the web site is hosted) in order to be inserted in an article.
- 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. You will not be able to copy the image file directly to that place, the article editor does this as part of the insert process.
- If you are using the localhost sample data, there is a folder for images.
You can copy the image there but it is good practice to upload it using the editor.
Upload the picture
- 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 (not on the icon in the tool bar, which does not let you see images on your own computer)
The dialogue box opens and hovers over the edit screen.
The top part of the screen defines where the pictures will go on the server.
Define where the image file is to go
- Click on the folder on the server where you want the picture to go
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
After upload, the file should show up be amongst the image files at the top section of the screen. Prepare it for insertion
- Highlight the image you want to use
- Image URL:This is filledout when you select an image
- 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.
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.
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 an Article
This is much as you might expect
- Open the Article for editing
- Select (highlight) the picture
- Press delete on your keyboard.
The picture remains on the server.
Links to more about adding images
- Image file formats is a large subject - see http://en.wikipedia.org/wiki/Image_file_formats
--Lorna Scammell December 2010