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

Other languages:
Deutsch • ‎English • ‎Nederlands • ‎Nederlands (informeel)‎ • ‎eesti • ‎español • ‎français • ‎hrvatski • ‎italiano • ‎português do Brasil • ‎română • ‎Ελληνικά • ‎русский • ‎فارسی • ‎हिन्दी • ‎বাংলা

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!

  1. 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.
  2. 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.
  3. 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.
  4. 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.
  5. 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.

  1. Click the Browse button to open a file browser.
  2. 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.
  3. 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.
  4. You may now select and insert the uploaded image as before.