Difference between revisions of "Adding an image to an article"
From Joomla! Documentation
(Marked for translation) |
(Marked this version for translation) |
||
Line 1: | Line 1: | ||
<noinclude><languages /></noinclude> | <noinclude><languages /></noinclude> | ||
− | <translate>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!</translate> | + | <translate><!--T:1--> |
+ | 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!</translate> | ||
− | <translate>#Open the Article for editing either by:</translate> | + | <translate><!--T:2--> |
− | <translate>#* Click the '''Content > Article Manager''' menu item to go to the ''Article Manager'', select the Article and click the ''Edit'' toolbar button.</translate> | + | #Open the Article for editing either by:</translate> |
− | <translate>#* Clicking the ''Add New Article'' button in the Control Panel.</translate> | + | <translate><!--T:3--> |
− | <translate>#* 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.</translate> | + | #* Click the '''Content > Article Manager''' menu item to go to the ''Article Manager'', select the Article and click the ''Edit'' toolbar button.</translate> |
− | <translate>#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.</translate> | + | <translate><!--T:4--> |
− | <translate>#The Insert Image screen will open over the top of the Edit Article screen. Choose an image by clicking on it.</translate> | + | #* Clicking the ''Add New Article'' button in the Control Panel.</translate> |
− | <translate>#*You may also move directory by clicking on the folder icons.</translate> | + | <translate><!--T:5--> |
− | <translate>#*Use the drop down ''Directory'' field to quickly select a directory and click the ''Up'' button to go up a directory level.</translate> | + | #* 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.</translate> |
− | <translate>#Set the image properties as required:</translate> | + | <translate><!--T:6--> |
− | <translate>#*'''Image Description''': This becomes the '''alt''' attribute for the image, an important feature for accessibility and compliance with web standards.</translate> | + | #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.</translate> |
− | <translate>#*'''Image Title''': Used for the optional caption and also becomes the '''title''' attribute in HTML.</translate> | + | <translate><!--T:7--> |
− | <translate>#*'''Align''': Sets the image alignment. If left blank the align attribute is not set.</translate> | + | #The Insert Image screen will open over the top of the Edit Article screen. Choose an image by clicking on it.</translate> |
− | <translate>#*'''Caption''': Enables the caption which displays the Image Title below the image.</translate> | + | <translate><!--T:8--> |
− | <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> | + | #*You may also move directory by clicking on the folder icons.</translate> |
− | <translate>#*Click the ''Cancel'' button to leave the Insert Image screen.</translate> | + | <translate><!--T:9--> |
+ | #*Use the drop down ''Directory'' field to quickly select a directory and click the ''Up'' button to go up a directory level.</translate> | ||
+ | <translate><!--T:10--> | ||
+ | #Set the image properties as required:</translate> | ||
+ | <translate><!--T:11--> | ||
+ | #*'''Image Description''': This becomes the '''alt''' attribute for the image, an important feature for accessibility and compliance with web standards.</translate> | ||
+ | <translate><!--T:12--> | ||
+ | #*'''Image Title''': Used for the optional caption and also becomes the '''title''' attribute in HTML.</translate> | ||
+ | <translate><!--T:13--> | ||
+ | #*'''Align''': Sets the image alignment. If left blank the align attribute is not set.</translate> | ||
+ | <translate><!--T:14--> | ||
+ | #*'''Caption''': Enables the caption which displays the Image Title below the image.</translate> | ||
+ | <translate><!--T:15--> | ||
+ | #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--> | ||
+ | #*Click the ''Cancel'' button to leave the Insert Image screen.</translate> | ||
− | <translate>== Uploading images using the Insert Image screen ==</translate> | + | <translate>== Uploading images using the Insert Image screen == <!--T:17--></translate> |
− | <translate>You may also upload new images using the Upload section of the Insert Image screen.</translate> | + | <translate><!--T:18--> |
− | <translate>#Click the Browse button to open a file browser.</translate> | + | You may also upload new images using the Upload section of the Insert Image screen.</translate> |
− | <translate>#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.</translate> | + | <translate><!--T:19--> |
− | <translate>#*To remove selected files before uploading click the red icon next to the listed files.</translate> | + | #Click the Browse button to open a file browser.</translate> |
− | <translate>#*If you are uploading multiple files in batches you can clear the list of completed files by clicking the ''Clear Completed'' button.</translate> | + | <translate><!--T:20--> |
− | <translate>#The selected file(s) appear as a list at the bottom of the Insert Image screen. Click ''Start Upload'' to begin uploading files.</translate> | + | #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.</translate> |
− | <translate>#*When the upload is complete a green tick will appear next to the file.</translate> | + | <translate><!--T:21--> |
− | <translate>#You may now select and insert the uploaded image as before.</translate> | + | #*To remove selected files before uploading click the red icon next to the listed files.</translate> |
+ | <translate><!--T:22--> | ||
+ | #*If you are uploading multiple files in batches you can clear the list of completed files by clicking the ''Clear Completed'' button.</translate> | ||
+ | <translate><!--T:23--> | ||
+ | #The selected file(s) appear as a list at the bottom of the Insert Image screen. Click ''Start Upload'' to begin uploading files.</translate> | ||
+ | <translate><!--T:24--> | ||
+ | #*When the upload is complete a green tick will appear next to the file.</translate> | ||
+ | <translate><!--T:25--> | ||
+ | #You may now select and insert the uploaded image as before.</translate> | ||
<noinclude> | <noinclude> | ||
<translate> | <translate> | ||
+ | <!--T:26--> | ||
[[Category:Tutorials]] | [[Category:Tutorials]] | ||
[[Category:Article Management]] | [[Category:Article Management]] |
Revision as of 06:31, 3 August 2015
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:
- Click 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 by clicking 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 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.
- 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.
- 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.
- 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 begin 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.