|
Joomla: To add an image to a Joomla article |
|
Important - This procedure requires that you have JCE Content Editor ( http://www.joomlacontenteditor.net/ )installed. Generally, images cannot be wider than 500px. Check with your website designer if you don't know the maximum width for your article images. If you need to add an image larger than 500px, see To add a pop-up image to a Joomla article. - In an open article, add a new paragraph.
To add a new paragraph, put your cursor at the end of an existing paragraph and click Enter. If the paragraph is a heading 1, 2, etc, on the Format menu, click Paragraph.
 - With your cursor in the new, blank paragraph, click Insert/Edit Image.
 - Click the images folder and then click the image you want to use.

Note - If you want to upload an new image, from the image directory, click Upload and then navigate to the file on your local machine. - Add the following settings to the Image Manager dialog box.
 - In the Description box, enter a description. Title and Description can be the same. Use something descriptive to help search engines.
- In the Title box, enter a title. Title and Description can be the same. Use something descriptive to help search engines.
- In the VSpace box, delete the text.In the HSpace box, delete the text.
Note: If you don't have the styles above, add the css styles in this img-styles.zip file to the top of your template.css file. Once you add these to the top of your template.css file, you will probably need to delete your browser cache so they will show up in the Joomla Editor Styles list
- Or, if you don't have css styles to float image to right or left, use the JCE Alignment to specify left or right. - Click the Advanced tab and change the following settings:
- In the Style box, delete ALL text.
- In the Class List, select img-border. Note: "img-border" and others are css styles I created in my editor.css file.
- If you want the image to float left of the text, place your cursor in the text paragraph where you want to start the float and select img-border-fl from the Class List.
 Image Floated to the Left
- If you want the image to float right of the text, place your cursor in the text paragraph where you want to start the float and select img-border-fr from the Class List.
Image Floated to the Right - Click Insert to add the image.
- (Optional) If you want to add a caption:
- Add a paragraph below the image.
- Type the caption text.
- With your cursor in the caption paragraph, in the Styles box, select Caption.
JCE Joomla Content Editor: Style Selector
- Click Apply and then in a different browser screen, open that page on your live website to see the changes.
|