Home Help and Tips Joomla! Help How to add a picture to an Article

How to add a picture to an Article

E-mail Print

Introduction - This article describes how to add pictures to articles such as News.

Before you begin you need to prepare the image/logo to be 'web-ready' - it needs to be no wider than 470 pixels for full width or 200 to 300 pixels wide for half width to allow text wrapping, and saved lowercase no spaces as a gif or jpg file.

1. Do steps 1 to 7 on How to Publish an Article

2. Now to add a picture you need to know whether the picture already exists on the site - if so go to 7. otherwise carry on to step 3.

3. To upload your new 'web-ready' picture click the Upload Upload Image button

4. Click the browse button and select your image, Click the Open button and then the Upload Button (you should get a message confirming when the upload is successful)

5. IMPORTANT - Now click the Apply button (this will REFRESH the list of images)

6. Click the Images tab (top right) and scroll down to select your image

7. Click the >> button to push it into the Content Images list on the right

8. Now Click on the file in the Content Images list (you should see a thumbnail Active Image underneath)

9. Scroll down to Edit the image selected

10. Image Align - select Right if you want to wrap the text around the left etc..

11. Alt Text - Type a description of the image (creates tag when user floats over - e.g. BAA Stansted)

12. Caption - type text that will appear under picture

13. Caption Align: Choose Center

14. IMPORTANT - You must now click the Apply button

15. Now go the the text and type  mosimage where you want the image to appear. i.e. If you have it aligned to the right type it immediately before the first word of the paragraph that you wish to wrap around the left.

16. Finally Click the Save Save button

TIP: If you want to display more than one image then add them using the >> button into the Content images list making sure you Edit all the Alt tags etc slecting the Active Image.

Then just type another  tag where you want the second image to appear.