Difference between revisions of "Adding an image to an article"
From Joomla! Documentation
m (Content updated) |
|||
Line 30: | Line 30: | ||
#*'''Caption''': Enables the caption which displays the Image Title below the image.</translate> | #*'''Caption''': Enables the caption which displays the Image Title below the image.</translate> | ||
<translate><!--T:15--> | <translate><!--T:15--> | ||
+ | #*'''Caption Class''': Applies the entered class to the ''figcaption'' element. | ||
#Click the ''Insert'' button to insert the image. The Insert Image screen will close and the image will be displayed in the editor.</translate> | #Click the ''Insert'' button to insert the image. The Insert Image screen will close and the image will be displayed in the editor.</translate> | ||
<translate><!--T:16--> | <translate><!--T:16--> |
Revision as of 10:25, 18 August 2015
Images are added to articles using the Image button 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 directory of Joomla!
- Open the Article for editing either by:
- Clicking the Content > Article Manager menu item to go to the Article Manager, select the Article and click the Edit toolbar button.
- Clicking the Add New Article button in the Control Panel.
- If logged in to the Front-end, you have appropriate permissions and are viewing the Article you wish to edit: Click the Edit toolbar button.
- 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 and click on the Instert button.
- 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 as required:
- 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.
- Image Float: Sets the image alignment. By default, the align attribute is Not Set.
- Caption: Enables the caption which displays the Image Title below the image.
- Caption Class: Applies the entered class to the figcaption element.
- 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 file browser style and layout depends on the browser and operating system you are using.
- The selected file(s) appear at the bottom of the Insert Image screen. Click Start Upload to begin uploading files.
- When the upload is complete a green tick will appear at the top fo the screen.
- You may now select and insert the uploaded image as before.