Logo JoomlaAfin d'embellir vos articles, l'insertion d'images est surement ce qu'il y a de mieux. En effet, une image permet d'illustrer ce que vous exprimez dans votre article. Mais, il est important de savoir comment gérer ces images que se soit au niveau de la disposition ou des liens que l'on peut leur associer.

Logo JoomlaAvant-propos

Icone objectifObjectif du tutoriel

  • Insérer une image dans un article Joomla

Icone niveauNiveau

  • Débutant

Icone tempDurée

  • 30-45 minutes

Icone pré-requisPré-requis


Je précise que pour ce tutoriel j'utilise Filezilla comme client FTP et JoomlaCK editor en tant qu'éditeur pour les articles Joomla (celui-ci s'installe comme une extension). Vous pouvez télécharger ces deux logiciels dans notre centre de téléchargement.

Logo JoomlaOrganisez votre dossier "images"

Le transfert d'images via votre client FTP Filezilla

Logo FileZillaLa 1ère chose à savoir c'est comment fonctionne l'insertion d'images dans un article Joomla. Au moment d'insérer une image dans votre article, Joomla vous demande de "Parcourir le serveur" afin de la faire apparaitre. Il est donc important d'avoir transférer au préalable vos images sur le serveur via votre client FTP (Filezilla par exemple). Ce dernier vous permet d'accéder aux dossiers de votre site web et tout particulièrement le dossier images. Par défaut, en cliquant sur "Parcourir le serveur", vous vous retrouverez dans le dossier "stories" qui lui-même se trouve dans le dossier "images" à la racine de votre site. Je vous conseille donc de placer vos images dans le dossier "nomdevotresite/images/stories".


Transfert image Joomla

Le transfert d'images via l'éditeur CKEditor


logo ckeditorIl existe un autre moyen de transférer vos images dans le dossier "images" de votre site web. En effet, vous pouvez passer par CKEditor (éditeur qui s'installe comme une extension) en cliquant sur "Parcourir" en bas de la fenêtre qui apparait lorsque vous cliquez sur "Parcourir le serveur" (voir image ci-dessous). De cette manière, vous pourrez envoyer une image se trouvant sur votre ordinateur vers votre serveur. Seul bémol à cette solution, vous ne pouvez transférer qu'une seule image à la fois donc je vous conseille de passer par Filezilla si vous avez plusieurs images à transférer.


Upload FCK

Créer de nouveaux dossier

Si vous ne souhaitez pas que toutes vos images soient en vrac dans le dossier "stories", alors vous avez la possibilité de créer de nouveaux dossiers afin de mieux vous organiser. Je me base sur Filezilla mais je pense que pour les autres clients FTP, le principe reste le même. Le mieux est de se placer dans le dossier "nomdevotresite/images", de faire un clic droit et de choisir "Créer un dossier". Par exemple, un nouveau dossier "logos" qui contiendrait toutes les images représentant un logo. Dernière chose, il est également possible de créer un nouveau dossier en passant par FCK editor, il suffit de cliquer en bas de la fenêtre d'importation sur "Create New Folder".


Nouveau dossier Filezilla

Changer la destination de "Parcourir le serveur"


gestion plugin joomlaSi vous avez opté pour le mode d'organisation mentionné précédemment, alors il peut s'avérer utile de modifier la destination du bouton "Parcourir le serveur". En effet, par défaut, vous arrivez dans le dossier "stories", ce qui n'est plus pertinent si vous avez créé vos nouveaux dossiers dans "images". Pour ce faire, vous devez vous rendre dans "Composants > CKEditor" puis cliquer sur l'onglet "File Browser Settings". Une fois dans cet onglet, le paramètre à modifier s'appelle "Images path" dans le cadre "Ressource Types Configuration", écrivez à la place de "images/stories" "images" tout court (voir image ci-dessous).


Configuration FCK

Logo JoomlaInsérez une image dans vos articles Joomla

Insertion d'images avec FCK editor


logo ckeditorMaintenant que vous savez transférer vos images vers votre serveur, je vais vous expliquer comment les faire apparaitre dans vos articles. Vous allez voir que cela est très simple. Je vous rappelle que j'utilise FCK editor qui est beaucoup plus performant que TinyMCE, l'éditeur par défaut dans Joomla. Je vous conseille donc grandement de l'installer.

Une fois sur la page d'édition d'un article, placez votre curseur à l'endroit où vous voulez placer l'image puis cliquez sur cet icône Insérer images FCK. Ensuite, cliquez sur "Parcourir le serveur" puis servez-vous de l'explorateur pour trouver l'image à insérer, une fois que vous l'avez repérée cliquez dessus pour l'insérer.

Mise en forme de votre image


taille images ckeditor petitMaintenant que votre image est insérée dans l'article, il est possible entre autre d'en ajuster la taille et la disposition par rapport à votre texte. Pour accéder à ces paramètres, il suffit de cliquer sur l'image puis sur l'icône Insérer image FCK

Juste en dessous de l'adresse de l'image, vous pouvez écrire un texte alternatif, ensuite vous avez la largeur et la longueur, puis les paramètres pour appliquer une bordure et enfin, l'alignement qui vous permet de placer comme vous le souhaitez votre image par rapport au texte.

Mettre un lien sur une image


lien images ckeditor petitPour finir ce tutoriel, je vais expliquer comment insérer un lien dans une image. Il suffit de cliquer sur l'icône Insérer lien FCKet de copier/coller l'adresse de votre lien dans le champ "URL" (voir image ci-contre).

Dans l'onglet "Destination", vous pouvez déterminer si en cliquant sur l'image, une nouvelle fenêtre (ou onglet) s'ouvre ou si l'internaute reste sur la même page. Il est également possible de faire apparaître le contenu du lien dans un popup. Enfin en cliquant sur "Parcourir le serveur", vous pouvez faire un lien vers une autre image, de plus grande taille par exemple.

Une question sur ce tutoriel ? Posez vos questions sur le forum


Icone helpTutoriels associés

L'auteur : un expert à votre service
Geoffrey LEOST
Nom : Geoffrey LEOST

Commentaires (3)

This comment was minimized by the moderator on the site

bonjour je suis curieux et explore vos tutos merci

This comment was minimized by the moderator on the site
This comment was minimized by the moderator on the site

Bonjour,Avec Internet explorer 9 je ne peux plus gérer les médias comme avant.Merci !

Il n'y a pas encore de commentaire pour cet article.

Ajouter vos commentaires

  1. Insérer un commentaire en tant qu'invité.
Pièces jointes (0 / 3)
Share Your Location
Contact

Scoop.It de NosyWeb

Twitter de NosyWeb

YouTube de NosyWeb

Facebook de NosyWeb

Google+ de NosyWeb

Flux RSS de NosyWeb

Inscription newsletter de NosyWeb