Difference between revisions of "Adding an image to an article"
From Joomla! Documentation
Jonflgiles (talk | contribs) m |
Jonflgiles (talk | contribs) m |
||
Line 14: | Line 14: | ||
#*''Caption'': Enables the caption which displays the Image Title below the image. | #*''Caption'': Enables the caption which displays the Image Title below the image. | ||
#When you have finished setting options click the ''Insert'' button to insert the image. The Insert Image screen will close and the image will be displayed in the editor. | #When you have finished setting options click the ''Insert'' button to insert the image. The Insert Image screen will close and the image will be displayed in the editor. | ||
− | + | #*Click the ''Cancel'' button to leave the Insert Image screen. | |
− | #*Click the ''Cancel'' button to leave the Insert Image screen | ||
== Uploading images using the Insert Image screen == | == Uploading images using the Insert Image screen == |
Revision as of 13:51, 21 June 2008
This article is a small, well-defined item that could be completed by someone with a reasonable knowledge of the subject matter and a modest time commitment. If you would like to try writing this article you're welcome to do so.
The subject may be self-evident, but if not then further details should be available on the discussion page. Please add {{inuse}} at the top of this page while editing. For other small, well-defined tasks, please look in the Cookie jar. ---Thank you. This article was last edited by Jonflgiles (talk| contribs) 15 years ago. (Purge) |
Images are added to articles using the Editor Buttons below the content editor window in the Edit Article screen. Note: It is possible to insert images using the editor in Joomla! however this feature provides a simple way of inserting images stored in the images/stories directory of Joomla!
- Open the article for editing either by:
- Opening the Article Manager, selecting the article and clicking the Edit toolbar button or,
- Clicking the Add New Article button in the Control Panel.
- Choose where you would like your image placed in the flow of the text by moving the cursor and click the Image editor button at the bottom of the screen.
- The Insert Image screen will open over the top of the Edit Article screen. Choose an image by cliking on it.
- You may also move directory by clicking on the folder icons.
- Use the drop down Directory field to quickly select a directory and click the Up button to go up a directory level.
- Set the image properties:
- Image Description: This becomes the alt attribute for the image, an important feature for accessibility and compliance with web standards.
- Image Title: Used for the optional caption and also becomes the title attribute in HTML.
- Align: Sets the image alignment. If left blank the align attribute is not set.
- Caption: Enables the caption which displays the Image Title below the image.
- When you have finished setting options click the Insert button to insert the image. The Insert Image screen will close and the image will be displayed in the editor.
- Click the Cancel button to leave the Insert Image screen.
Uploading images using the Insert Image screen[edit]
You may also upload new images using the Upload section of the Insert Image screen.
- Click the Browse button to open a file browser.
- Select the image files you wish to upload. Click Open in the file browser to confirm the selection. Note: The filebrowser depends on the browser and operating system you are using.
- To remove selected files before uploading click the Red icon next to the listed files.
- If you are uploading multiple files in batches you can clear the list of completed files by clicking the Clear Completed button.
- The selected file(s) appear as a list at the bottom of the Insert Image screen. Click Start Upload to being uploading files.
- When the upload is complete a green tick will appear next to the file.
- You may now select and insert the uploaded image as before.
jonflgiles 13:57, 21 June 2008 (EDT) Todo: Add some screen shots showing editor buttons and Insert Image screen.