Support Joomla ®, guides et aide Joomla

Contactez nous !

  

Insérer des images dans ses articles

Les sujets abordés sur cette page :

Les articles sont toujours plus agréables à lire quand ils sont accompagnés d'images. Bien sûr, avant d'ajouter une ou plusieurs image(s) à un article, il faut en posséder : soit en avoir créé soi-même (appareil photo, scanner, création graphique sous un logiciel), soit en récupérer.

La question des droits des images ainsi que celle du droit à l'image sont évidemment des problématiques à prendre en compte lorsque l'on crée son site web, surtout s'il se destine à avoir une vocation officielle. Les images visibles sur Google Images ne sont pas libres de droit et exploitables telles quelles, et mieux vaut se tourner vers des plates-formes comme iStockphoto pour obtenir légalement des photos ou illustrations exploitables.

Après avoir obtenu ses images, il faudra éventuellement les retoucher, les transférer sur le serveur (par FTP ou en utilisant les outils de Joomla), et enfin les insérer dans l'article

Il existe deux méthodes pour insérer ses images dans un article : appeler des images chargées au préalable par le biais de la page Gestion des médias, ou utiliser l'outil de JCE pour les monter sur le serveur depuis l'article.

Pour insérer une image directement dans un article sans passer par la Gestion des Médias, placez votre curseur à l’endroit où vous souhaitez qu'elle apparaisse dans l’article, puis cliquez sur le bouton prévu à cet effet sur la barre d’outils.

Bouton image sur la barre d'outils

 Note : il existe deux boutons "Images" dans une page d'édition d'article de Joomla : celui situé sur la barre d'outils de l'éditeur, en haut, et celui situé en bas de la zone de saisie, à côté des boutons Saut de page et Lire la suite. Si ce dernier bouton est tout à fait fonctionnel, nous vous conseillons d'utiliser le bouton supérieur, celui de JCE, beaucoup plus riche et puissant en terme de fonctionnalités.

S’ouvrira alors la fenêtre du gestionnaire d’images :

Gestionnaire d'images


Choisir une image

Avant toutes choses, il faut choisir l’image à insérer dans le texte.

Si l’image est déjà présente sur le serveur, il suffit d’aller la chercher à l’aide de l’explorateur situé en bas de la fenêtre, et qui permet de naviguer dans les différents répertoires du site, puis de sélectionner l’image en cliquant sur son nom.

Explorateur d'images


Charger son image sur le serveur

Pour charger une image sur le serveur, il faut d’abord choisir le répertoire de destination.

Choix du répertoire de destination

Par défaut, le répertoire racine utilisé par le gestionnaire d’images de JCE correspond au dossier images/stories.

Toutes les images chargées par l'intermédiaire de JCE sur le serveur seront donc placées directement dans ce répertoire images/stories, ou dans les sous-répertoires qui le composent, et dont la liste apparaît dans la colonne Dossiers.

Pour charger une image dans un dossier existant, il faut bien se placer à l’intérieur en cliquant sur le nom du dossier, comme sous l’explorateur Windows. Pour avoir confirmation de son choix, la ligne Actuellement confirmera le nom du dossier.

Dossier en cours

Pour créer un répertoire, utilisez le bouton prévu à cet effet situé au-dessus de la colonne de droite :

Créer un répertoire

Entrez le nom du nouveau répertoire, en prenant garde de bien vérifier que vous êtes situé à l’endroit correct sur le serveur (à la racine ou dans un répertoire déjà existant) puis cliquez sur Valider :

Nommez votre répertoire

 Attention : les noms de tous les fichiers (documents, images) comme ceux des répertoires doivent s’écrire sans accents, sans espaces, et sans caractères spéciaux autres que - (tiret) _ (underscore) ou . (point). Les majuscules sont tolérées, mais sont dispensables.
Exemples de nommage corrects : image-du-chateau.jpg, le_chateau.jpg, chateau.jpg
Exemples de nommage incorrects : image du chateau.jpg, château.jpg

Une fois le répertoire choisi ou créé, nous allons « monter » notre image sur le serveur, c’est-à-dire l’envoyer à distance sur le serveur depuis notre disque dur.

Cliquez sur le bouton du milieu au-dessus de la colonne de droite :

Envoyer son image

Une fenêtre s’ouvrira, vous permettant d’envoyer vos images sur le serveur :

Monter l'image sur le serveur

 Attention : les seuls formats d’images tolérés sont JPG (ou JPEG), GIF et PNG. Les formats BMP, PSD, TIFF et autres sont fortement déconseillés.

Sélectionnez une ou plusieurs images à l’aide du bouton Ajouter.

Sélectionnez les images

Avant de cliquer sur Envoyer, vous pouvez choisir l’action à effectuer si le fichier existe déjà sur le serveur (vous pouvez l’écraser pour le remplacer ou choisir qu’il soit renommé automatiquement), renommer vos fichiers si leur nom ne vous convient pas voire en supprimer grâce aux deux icônes situées à leur droite :

Renommer ou supprimer ses images

Une fois vos choix validés, cliquez sur Envoyer. Les images seront alors transférées sur le serveur. Le temps de transfert dépendra évidemment de la taille des images.

Les icônes vertes vous indiqueront que le transfert s’est bien déroulé. Vous pouvez fermer cette fenêtre.

Transfert d'image réussi

Votre ou vos image(s) récemment transférées apparaîtront en gras et surligné en gris dans l’explorateur.

Noms des images en gras

Il faudra de nouveau cliquer sur le nom de l’image choisie pour bien la sélectionner. Le chemin complet vers l’image apparaîtra alors dans la zone supérieure de la fenêtre :

Chemin complet de l'image

Veillez à bien cliquer sur le nom de l’image choisie pour que le chemin complet apparaisse dans le champ URL. Dans le cas contraire le champ apparaîtra en rouge pour vous indiquer qu’il y a un problème et un message d’erreur vous préviendra si vous essayez de cliquer sur Insérer.

Chemin vers l'image incorrect


Administrer son image (redimensionner, renommer, aligner)

Quand vous cliquez sur le nom d'une image pour la choisir, sa miniature s’affichera dans la zone de droite :

Vue de l'image en miniature

Vous pourrez voir ses dimensions, son poids, le type et le nom de l’image. Vous aurez également une série d’outils situés dans la colonne de droite pour la renommer, la copier, la supprimer, la visualiser dans son format d'origine, ou encore la sélectionner pour l’insérer dans l’article (équivalent du clic sur le nom de l’image).

Outils d'image

Une fois l’image sélectionnée, le chemin complet apparaîtra donc dans le champ URL :

Lien complet vers l'image

Le champ Description est très important puisqu’il permet de rentrer une description complète de l’image (accents et espaces autorisés) qui permettra non seulement aux moteurs de recherche de référencer l’image, mais aussi aux logiciels qui lisent les pages pour les personnes aveugles ou malvoyantes de pouvoir « traduire » l’image à leurs utilisateurs. Pensez donc à renseigner ce champ.

Le champ Dimensions vous permet de changer les dimensions de l’image en utilisant la largeur et la hauteur exprimées en pixels (laissez Proportionnel coché si vous souhaitez conserver les proportions de l’image en la redimensionnant).

 Note : s’il est tout à fait possible de redimensionner les images trop grandes directement dans l’éditeur, préférez si possible des images de taille raisonnable : 150/160ko grand maximum, en 72DPI, d’une taille avoisinant les 500 pixels de large. Le travail sur les images (compression, taille, redimensionnement) doit se faire de préférence avant leur envoi sur le serveur, au moyen de logiciels type Photoshop, Gimp, Paint.net.

Alignement vous permet de jouer sur l’alignement de l’image par rapport au texte (et non pas l’alignement de l’image sur la page elle-même).

La zone Prévisualiser vous permettra de voir en direct les changements que vous appliquez à l’image, et notamment si vous choisissez d’appliquer des Marges autour de l’image pour créer des espaces avec le texte (ne laissez pas la case Proportionnel cochée si vous voulez renseigner des valeurs différentes), voire de lui appliquer une Bordure, avec différents paramètres (largeur, style, couleur).

Zone de prévisualisation
Image alignée à gauche du texte avec marge de 10 pixels à droite

Une fois l’image choisie, correctement configurée, cliquez sur Insérer dans le cas d'une nouvelle image, ou Mettre à jour dans le cas d'une image que vous modifiez.

Bouton Insérer

L’image apparaîtra donc dans le texte, à l’endroit où vous aviez placé votre curseur.

Image dans l'article

L’image est un peu grande, il faudrait la réduire.

Cliquez sur l‘image pour la sélectionner (un cadre noir et de petits carrés blancs vont apparaître autour de l’image) :

Image sélectionnée

Cliquez sur l’un des coins de l’image avec la souris et changez sa taille à la volée. Lâchez la souris une fois le bon format atteint, et l’image prendra sa nouvelle taille.

Redimensionnement d'image à la volée

Image redimensionnée

Si vous sélectionnez un des carrés situés sur les bords de l’image, vous pourrez l’écraser verticalement ou horizontalement, ce qui aura pour résultat de la déformer.

Il est également possible de modifier d’autres paramètres en cliquant sur l’image pour la sélectionner, puis en cliquant de nouveau sur l’icône image de la barre d’outils, pour faire revenir la fenêtre du gestionnaire d’images.

 Note : vous pouvez également faire un clic droit sur une image sélectionnée pour amener le menu et cliquer sur le lien Insérer/Editer une image pour la modifier.

Menu éditer image

Bien sûr, vous pouvez également insérer des images "vivantes" dans vos articles, au moyen de vidéos :

Insérer des vidéos dans son article

Astuces et Conseils

Si votre hébergement est chez OVH, la procédure classique consistant à ajouter à votre fichier .htaccess la ligne php_value register_globals Off ne fonctionnera pas.

En effet OVH a modifié la configuration de ses serveurs. Pour désactiver le Register globals il faut ajouter cette ligne : SetEnv REGISTER_GLOBALS 0

Lors de l'installation de Joomla il faut modifier certains droits sur les dossiers et fichiers. Si votre hébergement est chez OVH, il faut savoir que leurs serveurs n'acceptent pas les CHMOD 777 sur les dossiers. Il faut mettre un CHMOD 755.

Lorsque vous trier votre liste d'articles pour n'afficher que ceux d'une section voire d'une catégorie donnée, si vous cliquez sur Nouveau, le nouvel article sera directement dans la section et dans la catégorie avec lesquelles vous avez filtré vos articles.


Attention : les noms de tous les fichiers (documents, images) comme ceux des répertoires doivent s’écrire sans accents, sans espaces, et sans caractères spéciaux autres que - (tiret) _ (underscore) ou . (point). Les majuscules sont tolérées, mais sont dispensables.
Exemples de nommage corrects : image-du-chateau.jpg, le_chateau.jpg, chateau.jpg
Exemples de nommage incorrects : image du chateau.jpg, château.jpg


Attention : les seuls formats d’images tolérés sont JPG (ou JPEG), GIF et PNG. Les formats BMP, PSD, TIFF et autres sont fortement déconseillés.


Qui est Support Joomla! ® ? | Plan du site | Mentions Légales | Nous contacter









Le nom Joomla!® est utilisé sous license limitée de Open Source Matters, qui reste le propriétaire mondial de la marque.
Support Joomla n'est ni affilié à Open Source Matters ou au projet Joomla!®, ni approuvé par eux.

http://www.support-joomla.com/ is not affiliated with or endorsed by the Joomla! Project or Open Source Matters.
The Joomla! name and logo is used under a limited license granted by Open Source Matters the trademark holder in the United States and other countries.

Support Joomla est basé sur le template JA Purity II par JoomlArt