Insérer une image et ajouter un lien en pop-up avec JCE Médiabox

Nous allons voir dans cet article, comment insérer une image dans un article, l'agrandir en pop-up grâce au plug-in Médiabox de JCE, mettre le texte autour et en profiter pour faire une petite balade en Bretagne.

Insérer une image - effet Mediabox JCE pour Joomla

Tout d'abord, ouvrez un article existant ou créez un nouvel article : Contenu > Gestion des articles.

Dans la fenêtre de l'éditeur de l'article cliquez sur le bouton image (en bas de la fenêtre de l'éditeur) et sélectionnez le dossier qui vous intéresse.

Si l'image n'existe pas, repérez-la sur votre ordinateur en vous servant du bouton Parcourir... puis lancez le transfert.

Un conseil : afin de ne pas alourdir votre page et surtout si votre page doit comporter plusieurs images, effectuez 2 transferts. La première image est la vignette qui s'affichera et la seconde image est celle qui sera agrandie à la demande.

Pour info, une vignette ne devrait pas dépasser 250/300 pixels de largeur (à titre indicatif) et l'image de taille maxi ne devrait pas excéder 1500 pixels de largeur. Tout ceci en 72 DPI.

Une fois les images téléchargées sur votre site, sélectionnez la vignette si vous l'avez créée (sinon sélectionnez l'image unique) et cliquez sur le bouton insérer en haut à droite.

Si vous n'avez pas créé de vignette et que votre image prend trop de place, redimensionnez-la (ce n'est pas la méthode la plus propre mais elle a le mérite d'être plus rapide).

Pour vous positionner sous l'image, faites un retour à la ligne, puis saisissez votre texte.

Si ce n'est pas déjà fait, il est temps d'enregistrer votre travail, on ne sait jamais ce qui peut se passer...

Créer un lien vers la seconde photo

Maintenant sélectionnez l'image en vous positionnant dessus, puis cliquez sur le bouton Insérer/Modifier un lien représenté par le maillon d'une petite chaîne.

Grâce au bouton en haut à droite (à côté de l'enveloppe) de la fenêtre qui vient de s'ouvrir, vous allez rechercher l'image de grande taille en parcourant les dossiers. Sélectionnez-là puis appuyez sur le bouton Insérer en bas de cette nouvelle fenêtre.

Ensuite, dans l'onglet Popups, choisissez l'option Popups JCE MediaBox et appuyez une nouvelle fois sur le bouton Insérer.

Il ne reste plus maintenant qu'à placer votre texte autour de l'image. Sélectionnez l'image et appliquez-lui le style qui convient. Pour info, Emeraude-Internet à probablement configuré pour vous un style nommé : photo ou photo-left....

Enregistrez votre travail et allez vérifier le rendu en front-end.

Petite précision : il y a des moyens d'aller plus vite pour effectuer cette petite tâche, quand vous vous serez familiarisé avec l'outil, vous trouverez facilement des astuces...

Créér un groupe d'images

Vous pouvez aussi créer un groupe d'images qui évitera à l'internaute de fermer chaque image pour en ouvrir une autre. Si vous créez un groupe d'images, il pourra alors naviguer d'image en image grâce à la flèche, au numéro de photo ou grâce aux boutons "suivant / précédent" de son clavier... un confort appréciable.

Pour ceci quand vous indiquez que l'image doit être ouverte en pop-up (onglet pop-up, voir plus haut) et à la ligne indiquez le numéro du groupe auquel appartient l'image et enregistrez. Vous voulez voir le résultat ? Je vous propose une petite balade dans Dinard en Bretagne près de Saint-Malo.

Balade à Dinard en Bretagne

Version Diaporama

Une autre façon de présenter vos photos... juste pour le plaisir des yeux !