Présentation du gestionnaire d'image

Le «Gestionnaire d'images» (Image Manager) vous permet d'envoyer des images sur le serveur pour les insérer dans vos contenus.

Le plug-in Image Manager est intégré d'office dans JCE offrant les fonctions essentielles. 
Une version enrichie de fonctions et de deux onglets complémentaires est disponible sous le nom de Image Manager Extended dans la suite des plug-ins "Adhérent" proposés par l'auteur.

Vous pouvez appliquer aux images :

• une légende (texte sous l'image) ;
• un effet «Rollover» (image réactive tel un bouton) ;
• un effet «Pop-up» (JCE MediaBox ou un autre plug-in doit être installé) ;
• un effet «Infobulle» (Tooltip) au survol de l'image ;
• différents attributs tels styles, image map (lien sur une portion de l'image), etc.

Version gratuite du gestionnaire d'images de JCE

Vous pouvez découvrir dans l'image ci-dessous les fonctions principales de la version gratuite du gestionnaire d'images de JCE.

Pour en savoir plus sur une fonction, affichez le gestionnaire d'images et pacez votre curseur au-dessus du titre, losrqu'il est souligné en traitillés, une bulle d'info s'affiche décrivant sa fonction.

Cliquez sur l'image pour l'afficher en pop-up

Créer un effet "Pop-up" sur une image

Avec le gestionnaire d'image «Adhérent»
Un onglet supplémentaire vous permet de créer un effet pop-up sur une image de manière extrèmement simple.
Si vous ne possédez pas le plug-in «Adhérent», vous pouvez également créer des pop-ups sur des images à l'aide du gestionnaire de liens (voir plus bas...).

1. Lors de l'envoi de l'image sur le serveur,  choisissez la création automatique des miniatures et si nécessaire le redimensionnement des images.

   Cliquez sur l'image pour l'afficher en pop-up
     

2. Sélectionnez l'onglet "Pop-up" puis l'image que vous souhaitez afficher en pop-up.
   Une fenêtre s'affiche pour vous demander si vous souhaitez utiliser la miniature associée ; confirmez par «Oui».

   Cliquez sur l'image pour l'afficher en pop-up   

3. Cliquez sur le bouton "Insérer" au bas du gestionnaire d'image pour finaliser la procédure.
   Votre image miniature avec un lien sur la fenêtre pop-up contenant l'image de grande taille est fonctionnelle.

Avec le gestionnaire d'image version gratuite
Il est également possible de créer un effet pop-up sur une image sans le plug-in Adhérent, la procédure est un peu plus fastidieuse.

1. Créez sur votre ordinateur les deux formats d'image pour la miniature et le pop-up.

   • Si vous ne possédez pas d'outils de retouche d'images vous pouvez utiliser les outils en ligne suivants :
     
     • http://www.lookimage.net/ pour le redimensionnement uniquement ;
     • http://www.pixlr.com/editor/?loc=fr est un logiciel de type photoshop ;
     • http://fotoflexer.com/app/index.php?lang=fr-FR est également un logiciel complet, plus accessible aux débutants.

2. Envoyez les images sur le serveur dans le répertoire de votre choix comme présenté dans l'image ci-dessous.

   Cliquez sur l'image pour l'afficher en pop-up
   

3. Insérez la miniature dans votre contenu.

4. Sélectionnez la miniature, cliquez sur le gestionnaire de liens et suivez les étapes présentées dans l'image ci-dessous.

   Cliquez sur l'image pour l'afficher en pop-up
   
   
   

Créer une "Image réactive"

L'onglet "Image Réactive" permet de choisir une image de remplacement à afficher lors du survol de l'image initiale. Cela permet de créer un effet de type "Bouton réactif".

Vous pouvez également afficher une image différente, mais elle doit absolument avoir la même taille. Si les deux images ne sont pas orientée dans le même sens, horizontal et vertical, créez une image à la taille de la plus grande hauteur et largeur ; attribuez-lui une couleur identique à la page, puis placez la première image au milieu et enregistrez-là ainsi. Faites de même avec la seconde image, vous aurez ainsi deux images de même taille.

Créer une "Légende d'image"

Le plug-in Adhérent «Caption» vous permet d'attribuer très simplement une légende à d'image.

• Spécifiez les paramètres du cadre et de ses marges ;

Résultat

(Pour la mise en page dans ce contenu, l'alignement à droite a été supprimé).

Cycle de développement de Joomla!

Appliquer une légende sans le plug-in «Caption»

Il est également possible d'attribuer une légende à une image sans le plug-in «Caption». La procédure est plus fastidieuse et doit être suivie scrupuleusement. Elle s'effectue à l'aide d'une balise «div» (le container) dans laquelle est placée l'image et à laquelle est appliqué un style XHTML.

Procédure

1. Insérez l'image, sélectionnaz-la et appliquez-lui le format Div.
2. Placez votre curseur à la droite de l'image et appliquez un retour à la ligne.
3. Ecrivez le texte de la légende.

4. à  10.   Appliquez un style XHTML à la balise div

Cliquez sur l'image pour l'afficher en pop-up

Cliquez sur l'image pour l'afficher en pop-up

Cliquez sur l'image pour l'afficher en pop-up

Cliquez sur l'image pour l'afficher en pop-up

1

 
2

 style="margin: 5px 0px 5px 10px; text-align: center; width: 118px;
float: right; position: relative;">< alt="articles"
src="images/stories/articles.jpg"height="96" width="128" />
 />
>>La légende > > 
>  

Créer une "Image Map"

Le plug-in Image Map permet de créer des liens sur des zones d'une image

Ce plug-in vous permet de créer en toute simplicité des zones à cliquer sur une image vers des liens du site ou externes.

Ce plug-in est une adaptation pour JCE de la création de www.maschek.hu qui l'a développé pour les différents éditeurs hors Joomla! tels que TinyMCE, FCK Editor, Xinha et Adobe Air.