Adding an image to an article/fr: Difference between revisions

Latest revision as of 05:00, 6 October 2023

Introduction

How best to add images to an article depends on which version of Joomla and which editor are in use. This article has illustrations for Joomla 4, with notes on differences in Joomla 3, and TinyMCE the Joomla default editor. To get started, open an article for editing:

Select Content → Articles in the Administrator menu.
Select the title of the article you wish to edit

After inserting the article text, place the cursor at the location where the image should appear.

Adding a local image

If the image is located in the images folder of your Joomla installation you should insert the image using the CMS Content → Media button In the TinyMCE edit toolbar (In Joomla 3: Select the Image button):

In the popup window, navigate to the image you want to use and click to select it. On selection a form will appear prompting for additional data. In Joomla 4 the form is to the left. In joomla 3 the form is at the bottom (scroll down):

Définissez les propriétés de l'image. Dans la plupart des cas, vous devez remplir le champ Description de l'image (texte Alt). Les autres champs sont utilisés pour personnaliser l'apparence de l'image avec votre propre code CSS.
- Description : l'attribut alt de l'image, une caractéristique importante pour l'accessibilité et la conformité avec les standards du web. Dans Joomla 3, il est appelé Titre de l'image.

Image Class : Si une image est utilisée sans légende, certaines classes personnalisées peuvent être appliquées ici. Par exemple, dans Joomla 4, float-end ms-2 mb-1 alignera l'image à droite et fera flotter le texte autour d'elle avec des marges à gauche et en dessous pour éviter que le texte ne touche l'image. Dans Joomla 3, le style équivalent est pull-right.
Classe de la figure : si une légende est définie, une classe d'alignement, le cas échéant, doit être appliquée à la figure. Il s'agit d'une balise html qui entoure la balise img. Notez que dans Cassiopeia, les marges sont appliquées par la feuille de style du modèle.

- Légende de la figure : permet de définir la légende qui s'affiche en tant que titre sous l'image.

In Joomla 3

Alignement : définit l'alignement de l'image. Par défaut, l'alignement est paramétré sur Non défini.
Classe de légende : permet d'appliquer la classe définie à l'élément figcaption.

Sélectionnez le bouton "Insérer un média" pour insérer l'image. L'écran Insérer une image se fermera et l'image sera affichée dans l'éditeur. Ou sélectionnez le bouton Annuler pour quitter l'écran Insérer une image.

Astuce: sélectionnez le bouton Toggle Editor pour voir les styles d'image et de légende appliqués.

Using Drag and Drop for Local images

In both Joomla 4 and Joomla 3 you can drag an image from the desktop or a file browser directly into the article text and the image will be uploaded to the media folder and placed in the article. The only snag is that all such uploaded images will be placed in the same media folder. The location of the Images Directory used for upload and whether this feature is enabled (On by default) are set in the TinyMCE configuration Options.

Adding a remote image

If the image you wish to use is not in the images folder of your Joomla installation a slightly different procedure is needed.

Select Insert → Image from the TinyMCE toolbar to open a dialog box. In Joomla 3, use the Image icon and the same dialog as used for local images.
Insert the image url in the Source field.
Fill out the other fields as required.
Advanced provides some formatting options applied as in-line styles. Experiment with 1rem, 2, groove. (This feature is incomplete)

Using Drag and Drop for Remote images

You can drag and drop an image from a remote web site directly into your article text. But be aware that this may also copy the image container html with class statements not valid for your site.

Chargement d'images avec l'écran d'insertion d'images

Vous pouvez télécharger de nouvelles images en utilisant l'écran Media (l'écran Image dans Joomla 3).

Ouvrez d'abord le navigateur média et naviguez jusqu'au dossier dans lequel vous souhaitez stocker les nouvelles images de l'article en cours.
Sélectionnez le bouton Upload en haut à gauche de l'écran Media (dans Joomla 3, faites défiler jusqu'au bouton Browse en bas du formulaire Image) pour ouvrir un navigateur de fichiers.
Sélectionnez les fichiers images que vous souhaitez télécharger. Sélectionnez Ouvrir dans le navigateur de fichiers pour confirmer la sélection. Remarque : le style et la présentation du navigateur de fichiers dépendent du navigateur et du système d'exploitation que vous utilisez. Dans Joomla 4, le téléchargement est immédiat. Dans Joomla 3, sélectionnez le bouton Démarrer le téléchargement.
Les fichiers sélectionnés apparaissent dans l'ordre alphabétique dans l'écran Média/Image.
Lorsque le téléchargement est terminé, un avis de confirmation vert apparaît en haut de l'écran.

Vous pouvez maintenant sélectionner et insérer l'image chargée comme précédemment.

@@ Line 1: / Line 1: @@
 <noinclude><languages /></noinclude>
-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!
+== Introduction ==
-#Open the Article for editing either by:
+How best to add images to an article depends on which version of Joomla and which editor are in use. This article has illustrations for Joomla 4, with notes on differences in Joomla 3, and TinyMCE the Joomla default editor. To get started, open an article for editing:
-#* 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 ==
+*'''Select''' {{rarr|Content,Articles}} in the Administrator menu.
+* '''Select''' the title of the article you wish to edit
-You may also upload new images using the Upload section of the Insert Image screen.
+After inserting the article text, place the cursor at the location where the image should appear.
-#Click the Browse button to open a file browser.
+== Adding a local image ==
-#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 the image is located in the images folder of your Joomla installation you should insert the image using the {{rarr|CMS Content, Media}} button In the TinyMCE edit toolbar (In Joomla 3: Select the Image button):
-#*If you are uploading multiple files in batches you can clear the list of completed files by clicking the ''Clear Completed'' button.
+[[File:adding-an-image-to-an-article-cms-content-media.png|800|Adding an image]]
-#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.
+In the popup window, navigate to the image you want to use and click to select it. On selection a form will appear prompting for additional data. In Joomla 4 the form is to the left. In joomla 3 the form is at the bottom (scroll down):
-#You may now select and insert the uploaded image as before.
+[[File:adding-an-image-to-an-article-selected-image.png|800|Selecting an image]]
+#Définissez les propriétés de l'image. Dans la plupart des cas, vous devez remplir le champ Description de l'image (texte Alt). Les autres champs sont utilisés pour personnaliser l'apparence de l'image avec votre propre code CSS.
+#*'''Description''' : l'attribut '''alt''' de l'image, une caractéristique importante pour l'accessibilité et la conformité avec les standards du web. Dans Joomla 3, il est appelé '''Titre de l'image'''.
+*'''Image Class''' : Si une image est utilisée sans légende, certaines classes personnalisées peuvent être appliquées ici. Par exemple, dans Joomla 4, '''float-end ms-2 mb-1''' alignera l'image à droite et fera flotter le texte autour d'elle avec des marges à gauche et en dessous pour éviter que le texte ne touche l'image. Dans Joomla 3, le style équivalent est '''pull-right'''.
+*'''Classe de la figure''' : si une légende est définie, une classe d'alignement, le cas échéant, doit être appliquée à la figure. Il s'agit d'une balise html qui entoure la balise img. Notez que dans Cassiopeia, les marges sont appliquées par la feuille de style du modèle.
+#*'''Légende de la figure''' : permet de définir la légende qui s'affiche en tant que titre sous l'image.
+'''In Joomla 3'''
+*'''Alignement''' : définit l'alignement de l'image. Par défaut, l'alignement est paramétré sur '''Non défini'''.
+*'''Classe de légende''' : permet d'appliquer la classe définie à l'élément ''figcaption''.
+Sélectionnez le bouton "Insérer un média" pour insérer l'image. L'écran Insérer une image se fermera et l'image sera affichée dans l'éditeur. Ou sélectionnez le bouton ''Annuler'' pour quitter l'écran Insérer une image.
+'''Astuce:''' sélectionnez le bouton ''Toggle Editor'' pour voir les styles d'image et de légende appliqués.
+=== Using Drag and Drop for Local images ===
+In both Joomla 4 and Joomla 3 you can drag an image from the desktop or a file browser directly into the article text and the image will be uploaded to the media folder and placed in the article. The only snag is that all such uploaded images will be placed in the same media folder. The location of the Images Directory used for upload and whether this feature is enabled (On by default) are set in the TinyMCE configuration Options.
+== Adding a remote image ==
+If the image you wish to use is not in the images folder of your Joomla installation a slightly different procedure is needed.
+*'''Select''' {{rarr|Insert,Image}} from the TinyMCE toolbar to open a dialog box. In Joomla 3, use the Image icon and the same dialog as used for local images.
+*'''Insert''' the image url in the Source field.
+*'''Fill out''' the other fields as required.
+*'''Advanced''' provides some formatting options applied as in-line styles. Experiment with 1rem, 2, groove. (This feature is incomplete)
+[[File:adding-an-image-to-an-article-insert-edit-image.png|border|Data for a remote image]]
+=== Using Drag and Drop for Remote images ===
+You can drag and drop an image from a remote web site directly into your article text. But be aware that this may also copy the image container html with class statements not valid for your site.
+== Chargement d'images avec l'écran d'insertion d'images ==
+Vous pouvez télécharger de nouvelles images en utilisant l'écran Media (l'écran Image dans Joomla 3).
+* Ouvrez d'abord le navigateur média et naviguez jusqu'au dossier dans lequel vous souhaitez stocker les nouvelles images de l'article en cours.
+* Sélectionnez le bouton Upload en haut à gauche de l'écran Media (dans Joomla 3, faites défiler jusqu'au bouton Browse en bas du formulaire Image) pour ouvrir un navigateur de fichiers.
+* Sélectionnez les fichiers images que vous souhaitez télécharger. Sélectionnez Ouvrir dans le navigateur de fichiers pour confirmer la sélection. Remarque : le style et la présentation du navigateur de fichiers dépendent du navigateur et du système d'exploitation que vous utilisez. Dans Joomla 4, le téléchargement est immédiat. Dans Joomla 3, sélectionnez le bouton Démarrer le téléchargement.
+* Les fichiers sélectionnés apparaissent dans l'ordre alphabétique dans l'écran Média/Image.
+* Lorsque le téléchargement est terminé, un avis de confirmation vert apparaît en haut de l'écran.
+Vous pouvez maintenant sélectionner et insérer l'image chargée comme précédemment.
 <noinclude>
-[[Category:Tutorials]]
+[[Category:Tutorials/fr|Didacticiels]]
-[[Category:Article Management]]
+[[Category:Article Management/fr|Gestion des articles]]
-[[Category:Beginners]]
+[[Category:Beginners/fr|Débutants]]
 </noinclude>