Chemins Faisant

Présentation de JCE

Présentation générale de JCE

Gestion des gabarits de mise en page avec JCE

Le «Gestionnaire de gabarits» (Template Manager) vous permet d'enregistrer des mises en pages sous format HTML pour les insérer dans de nouveaux contenus en quelques clics.

 Vous pouvez vous créer une bibliothèque de gabarits selon les différents types de pages que vous rédigez fréquemment.

Gabarit de mise en page avec le plug-in JCE Template Manager

Le gestionnaire de Gabarits

Gabarit de mise en page avec le plug-in JCE Template Manager

 

Fenêtre intégrée (IFrame)

Présentation du gestionnaire de fenêtre intégrée (IFrame)

Le «Gestionnaire de Fenêtre intégrée» (IFrame Manager) vous permet d'intégrer au sein de vos contenus des pages provenant d'autres sites.
Ce plug-in est gratuit et proposé dans le Pack de base.

Exemple d'intégration d'une page de ce site

  • L'IFrame est dans une balise div qui a une bordure appliquée par un style style XHTML 
  • L'URL possède un «2» après le «index» pour appeler la page sans le template : index2.php?option=com_content&view=article&id=15

Insérer un IFrame dans un contenu

  • Placez votre curseur à l'endroit où vous souhaitez insérer l'IFrame et cliquez sur l'icône d'édition dans la barre d'outils iframe

Gestionnaire d'IFrame

  • Adaptez les styles si nécessaire...

Gestionnaire d'IFrame

 

Gestion des liens avec JCE

Le gestionnaire de liens (link) permet d'appliquer des liens sur du texte ou des médias. La version avancée ( advlink ), intégrée également nativement, permet d'appliquer des liens sur des contenus du site.

gestionnaire-liens_00   

Gestionnaire basique de liens

Le gestionnaire basique de liens permet de proposer aux utilisateurs la possibilité de créer des liens en spécifiant l'URL, sans pour autant leur donner accès aux liens sur les contenus du site.
Selon les droits qui leur sont accordés, il peuvent avoir accès ou non au gestionnaire de fichiers.
  
Cliquez sur l'image pour l' afficher en popup

Gestionnaire avancé de liens

Dans l'exemple ci-dessous, les plugins complémentaires JCE Flexicontent, Rockdownloads et VirtueMart ont été installés ce qui permet de créer des liens sur leurs contenus.
Pour créer un lien , suivez la procédure décrite dans l'image.
   
Cliquez pour afficher l'image en popup

gestionnaire-liens_01

Le gestionnaire de liens permet également de créer des liens s'ouvrant en popup grâce à la classe «jcepopup» qui nécessite le plugin JCE Utilities ou nouvellement JCE MediaBox.

Pop-up Image

Si vous possédez le plugin Image manager Adhérent, vous n'avez pas besoin d'utiliser le gestionnaire de liens pour créer des pop-ups contenant des images, un onglet supplémentaire vous permet de les créer directement depuis le gestionnaire d'images (voir chapitre suivant...).

Pour ceux qui ne possèdent pas les plugins «Adhérent», vous devez au préalable insérer l'image miniature puis, par le gestionnaire de liens, créer un lien sur l'image à afficher en pop-up et appliquer la classe «jcepopup» au lien (voir chapitre suivant...).

Pop-up Article

 Pour créer un pop-up image ou contenu avec JCE, vous devez au préalable avoir installé et activé le plugin «JCE Utilities» ou, nouvellement,  «JCE MediaBox».

  1. Sélectionnez le texte ou l'image qui servira de lien ;
  2. Cliquez sur l'icône «Insérer/Editer» un lien ;
    Ouvrir le gestionnaire de liens de JCE
  3. Spécifiez l'URL de la page du site externe à afficher ou, choisissez l'article ou le composant de votre site en sélectionnant un «Lien interne» dans les listes déroulantes ;
  4. Vous pouvez attribuer une taille et une légende au pop-up en spécifiant dans le champ «Titre du lien» un titre, une largeur (width) et une hauteur (height). Exemple : title[texte de la légende];width[600];height[600] ;
  5. Dans l'onglet «Avancé» sélectionnez le style «jcepopup» ;
  6. Validez le tout en cliquant sur le bouton «Insérer».

gestionnaire-liens_02

Le «Gestionnaire de lien sur fichier» (plugin Adhérent File Manager) vous permet d'insérer des liens sur des fichiers avec selon choix, l'icône du type de fichier, son poids, la date de l'insertion. 

Les types de fichier autorisés (PDF, Word, Excel, etc.) se définissent dans les «Paramètres des plug-ins».

Pour créer un lien sur un fichier, placer le curseur où sera inséré le texte avec le lien.

Lien sur un fichier

Cliquez sur l'icône «Insérer/Editer lien Fichier» pour ouvrir sa fenêtre d'outils et suivez les étapes présentées dans l'image ci-dessous.

lien_fichier_02

Et voilà le résultat...

Lien sur un fichier

 

Gestion des médias avec JCE

Présentation du gestionnaire de médias vidéo/animation

Le «Gestionnaire de médias» (Media Manager) est un plugin de la suite «Adhérent» qui permet d'envoyer des vidéos sur le serveur pour les insérer dans vos contenus ou les ouvrir dans des fenêtres popup. Il possède son propre lecteur (player).

Le gestionnaire de médias permet également d'insérer des vidéos hébergées sur d'autres serveur tels Yootube, Google vidéos, etc.

Attention : selon la taille de votre fichier et les limitations du poids par le serveur, vous devez envoyer vos médias par transfert FTP.

  • Exemple de la même animation mais en contenu, le fond noir est préservé :
  • Exemple d'une vidéo FLV de 3Mo insérée avec une image de base pour l'affichage avant le lancement de la vidéo ;
    la fonction plein écran a été ajoutée :
 
Source : Ancienne vidéo de la page d'accueil du site www.bathardesign.com

L'envoi de médias sur le serveur

Avant tout, comme une image, la vidéo doit être hébergée sur un serveur.

Envoyer / Insérer un média avec JCE  
Si votre vidéo n'est pas trop lourde, vous pourrez l'envoyer par le gestionnaire de fichiers inclut dans JCE et accessible depuis la fenêtre d'outils de Media Manager.

 

Envoyer un média sur le serveur

N'oubliez pas que le poids d'un fichier gérer par l'explorateur de JCE se règle également dans la gestion du groupe concerné, même si c'est le serveur qui délimite le poids maximum réél

Sur de nombreux serveurs mutualisés, à partir de 3Mo déjà, vous serez dans l'obligation d'utiliser votre gestionnaire FTP pour envoyer les vidéos.
De préférence, créez un dossier avec le gestionnaire de fichiers de JCE qui ajoutera automatiquement un fichier index.html vide pour éviter que le contenu du répertoire puisse être listé en appelant directement son URL.

Si vous ne disposez pas d'un espace de stockage ou d'une passante importante, il peut être judicieux d'héberger les vidéos auprès d'un service gratuit et de les appeler dans Media Manager par leur URL.

L'insertion de médias dans un contenu

L'insertion d'un contenu media est extrèmement simple...
Ouvrez la fenêtre d'outils de Media Manager :

Ouvrir la fenêtre d'outils de Media Manager

La fenêtre d'outils de Media Manager

Sept formats de médias sont pris en charge, le format FLV se règle dans les paramètres Flash.

Fenêtre d'outils de Media Manager

   
Options des différents formats

  • Animation Flash et vidéo FLV

Format animation Flash et vidéo FLV

  • Format vidéo QuickTime

Format vidéo QuickTime

  • Format media Director

Format media Director

Format vidéo Windows Media

Format vidéo Windows Media

  • Format vidéo Real Media

Format vidéo Real Media

  • Format vidéo DivX

Format vidéo DivX

Paramètres avancés

Appliquez un identifiant unique au media si vous appliquez des styles qui ne doivent pas l'être sur les autres médias d'un même contenu.

Paramètres avancés

Média en fenêtre popup

Le lien d'ouverture de la fenêtre popup peut s'appliquer à du texte, une image ou un autre média. 

  • Sélectionnez l'élément devant servir de lien et cliquez sur l'icône de Media Manager pour ouvrir la fenêtre d'outils ;
  • Choisissez le média dans l'onglet «Fichier» ;
  • Adaptez les options dans l'onglet «Options» ;
  • Passez ensuite à l'onglet «Popup» et choisissez le média à afficher, la fenêtre s'adaptera à sa taille.
Ouvrir la fenêtre d'outils de Media Manager

Media en popup

 

Gestion des images avec JCE

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-upimage_manager_01

image_manager_02

Gestionnaire d'images de JCE

Version "Adhérent" du gestionnaire d'images de JCE

Le gestionnaire d'image «Adhérent» propose deux onglets supplémentaires pour créer des images en pop-up et ajouter des infobulles affichées au survol de l'image.

Cliquez sur l'image pour l'afficher en pop-upGestionnaire d'images de JCE version Adhérent

image_manager_extended_01b

image_manager_extended_01c

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
    Gestionnaire d'images de JCE version Adhérent  

  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 Gestionnaire d'images de JCE version Adhérent  
  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.

  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
    Gestionnaire d'images de JCE
  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
    Gestionnaire de liens de JCE

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.

1. Choisissez la première image dans l'onglet «Image» puis la seconde dans l'onglet «Image Réactive».

2. Cliquez sur «Insérer» pour validez l'application de l'effet.

    Cliquez sur l'image pour l'afficher en pop-upGestionnaire d'images de JCE

    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.

    • Cliquez sur l'image à laquelle vous souhaitez attribuer une légende puis sur l'icône «Insérer/Editer une légende» caption pour ouvrir la fenêtre du gestionnaire ;
    • Spécifiez les paramètres du texte et de ses marges ;

    Gestionnaire du plug-in JCE Caption

    • Spécifiez les paramètres du cadre et de ses marges ;
    Gestionnaire du plug-in JCE Caption

    Résultat

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

    joomla-dev_cycle
    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.
    Cliquez sur l'image pour l'afficher en pop-up
    Insérer une légende d'image avec JCEInsérer une légende d'image avec JCE

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

    Cliquez sur l'image pour l'afficher en pop-up
    Insérer une légende d'image avec JCE

    Cliquez sur l'image pour l'afficher en pop-up
    Insérer une légende d'image avec JCE

    Cliquez sur l'image pour l'afficher en pop-up
    Insérer une légende d'image avec JCE

    Cliquez sur l'image pour l'afficher en pop-up
    Insérer une légende d'image avec JCE

    Code source
    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.

    Gestionnaire du plug-in Image Map pour JCE

     
    Plus d'articles...
    Dernières infos
    Chemins Faisant en visite chez Vauban Mercredi, 03 Octobre 2018  
    Image

     
      Tout le monde connaît Vauban ! Le célèbre architecte militaire de Louis XIV a réalisé près de deux cents forteresses dans toute la France... Lire la suite...
    Arts et la table, les Templiers, l'Empire, Friant, la vallée de la Seille, six conférences dans le Saulnois Dimanche, 12 Novembre 2017  
    Image

     
    Les associations des Amis du musée du sel de Marsal et Chemins Faisant proposent comme chaque année un cycle de conférences en commun.  La... Lire la suite...
    Chopin, Debussy, Catoire de Bioncourt à Marsal, le 11 juin Samedi, 28 Mai 2016  
    Image

     
    C'est un évènement exceptionnel qui sera proposé aux habitants du Saulnois par l'association Chemins faisant, le samedi 11 juin, à 17 heures,... Lire la suite...
    Derniers articles
    none