Aller au contenu
Support de Zwii
roger

[Modification et astuce] Template Ligthbox pour TinyMCE

Messages recommandés

Template Ligthbox pour TinyMCE

Voir le fichier

Template Ligthbox pour TinyMCE

Vous aimeriez ouvrir toutes les images crées dans votre site ZwiiCMS dans une "lightbox" vous êtes au bon endroit.

Entièrement compatible les versions de ZwiiCMS  v9.0.xx

 

IMPORTANT

Depuis la Version ZwiiCMS v9.0.06 il n'est plus nécessaire d'utiliser ce template, car la fonction "Lightbox" à été intégrée par les développeurs du cms.
 

les dossiers contenus dans l'archive:
* partie installation : un dossier nommé "installer"
* partie restauration : un dossier nommé "restaurer

## le dossier "installer" contient :

- un dossier "core"
- un dossier "site"

Le template ajouté à tinymce (dans son dossier /core/vendor/tinmce/templates/)

- un fichier nommé lightbox.html

 

* Ce qui y est ajouté:

dans le init.js du tinymce ses lignes y seront inscrites par le script

	// Templates
	templates: [
                {
			title: "Lightbox",
			url: baseUrl + "core/vendor/tinymce/templates/lightbox.html",
			description: "Une image qui s'ouvre dans une lightbox."
		},


* Installation *

  Télécharger l'archive et décompressez la sur votre pc

2°  Votre archive étant décompressée vous devez avoir alors un dossier nommé "core"
     - un dossier nommé "core"
     - un dossier nommé "site"
     - un fichier nommé "index.php

  Ouvrez votre FTP à l'endroit où vous hébergez votre ZwiiCMS
    Envoyez les dossiers "core" et "site" ainsi que le fichier "index.php sur votre espace web et acceptez le remplacement de tout les fichiers.


Il ne vous reste plus alors qu'à vous rendre depuis votre navigateur web sur votre site en ligne et éditer une page pour voir le nouveau TinyMCE que vous venez de mettre en place.

 

NOTA :
 

Il est possible que celui ci (le nouveau Template) n'apparaisse pas de suite lors de votre édition de page, alors pas de panique, en restant sur la page que vous éditez cliquez simplement sur "Rafraîchir la page" dans votre navigateur et ainsi vous aurez ce fameux "petit plus" que vous attendiez.


* Restauration du tinymce sans le template Lightbox *

## le dossier "restaurer" contient :

     - un dossier nommé "site"
     - un fichier nommé "index.php

1°  Restauration

Suivre cette procédure uniquement;
Ouvrez votre FTP à l'endroit où vous hébergez votre ZwiiCMS
    Envoyez le dossiers "site" et fichier "index.php sur votre espace web et acceptez le remplacement de tout les fichiers.
    Rafraîchissez votre page, vous devriez alors revoir votre tinymce restauré à son origine.

 

Enjoy les amis.


# IMPORTANT A LIRE #

Vous reconnaissez qu'en utilisant ce script sur votre site être entièrement responsable en cas de problème quel qu'il soit après sa mise en œuvre, je ne pourrais donc être considéré en aucun cas comme responsable de cet état de fait.

💡 Pensez alors à faire une sauvegarde intégrale de votre site, ceci vous permettrait alors de revenir en arrière en réinjectant celle ci et retrouver votre site web tel que vous l'aviez conçu avant utilisation du script ci dessus.


 

  • Merci 1

Partager ce message


Lien à poster
Partager sur d’autres sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Invité
Répondre à ce sujet…

×   Collé en tant que texte enrichi.   Coller en tant que texte brut à la place

  Seulement 75 émoticônes maximum sont autorisées.

×   Votre lien a été automatiquement intégré.   Afficher plutôt comme un lien

×   Votre contenu précédent a été rétabli.   Vider l’éditeur

×   Vous ne pouvez pas directement coller des images. Envoyez-les depuis votre ordinateur ou insérez-les depuis une URL.


  • Contenu similaire

    • Par sylvainlelievre
      Ce module va vous permettre d'insérer un diaporama responsif dans une page Zwii.
       
      Par configuration vous pourrez obtenir cet aspect :

      La navigation se fait en cliquant sur la zone droite ou gauche de l'image.
      Le texte apparaît de façon progressive au survol de l'image.
      Arrêt du défilement automatique au survol de l'image.
       
       
      Celui là :

      Navigation par boutons discrets.
      Le texte et les boutons apparaissent de façon progressive au survol de l'image.
      Arrêt du défilement automatique au survol de l'image.
       
      Ou encore cette version avec légende en haut et boutons de navigation rectangulaires :

       
      Une version sans les puces de navigations :

       
       
      Le diaporama est basé sur responsiveslides.com, le module Zwii slider est basé sur le module Zwii gallery de @Rémi. Merci à @Gilux et à @roger pour leurs contributions dans le CSS et à @Fred pour ses conseils et la mise à jour du fichier edit.js.php.
       
      #Installation
       
      1- Dézipper l'archive slider_vxx.zip
      Elle contient le dossier slider et 1 autre fichier dont nous verrons l'utilité plus loin (edit.js.php).
       
      Si vous avez déjà fait l'installation d'une ancienne version du module slider, il est préférable de la supprimer avant de poursuivre. Si la version précédemment installée était >= 2.3 vous pourrez réutiliser votre diaporama après avoir procédé à nouveau à son paramétrage, pour une version plus ancienne il faudra le recréer.
       
      2 - Avec votre logiciel FTP transférer le dossier slider dans le dossier module de votre site (attention module, pas core/module)
       

       
       
      Résultat obtenu pour le site dev9test
       
      slider/vendor/js/ contient le fichier javascript nécessaire au fonctionnement du module.
       
      slider/view/index/ contient 4 fichiers : index.php responsable de l'affichage du diaporama, index.css qui regroupe tous le CSS du diaporama et themes.gif,  themes.svg pour les 2 boutons proposés.
       
      slider/view/config/ et slider/view/edit/ proviennent du module gallery et sont utilisés pour le paramétrage du diaporama. Ils sont légèrement modifiés.
       
       
      #mode d'emploi
       
      1 - Créer une nouvelle page, modifier cette page

       
      2 - Sélectionner le module Slider et choisir la position du module dans la page
       
      A partir de la version 9.2.07 de Zwii l'option "Position du module dans la page" apparaît. Elle vous permet de choisir où le diaporama va s'afficher dans la page.
      La position "libre" vous permet d'insérer du contenu avant et après le diaporama en saisissant [MODULE] à l'endroit voulu dans votre page.
       

       
      Avec des versions 9 de Zwii plus anciennes vous pouvez remplacer par FTP le fichier core/module/page/view/edit/edit.js.php par celui contenu dans l'archive et dont on a parlé plus haut. Si non votre diaporama s'affichera uniquement en bas de page.
       
      Cliquez sur l'icone "roue dentée", positionnée à côté du choix de module, pour passer à l'étape 3.
       
      3 - Choisir le dossier contenant les images
       
      Vous aurez au préalable chargé les images du diaporama dans un dossier à l'intérieur de site/file/source/ (par FTP ou par le gestionnaire de fichiers intégré à Zwii).
      A ce propos 3 remarques :
      * Le diaporama va s'adapter automatiquement au format (16/9, 4/3,...) ou à l'orientation des images mais je trouve que le meilleur résultat visuel sera obtenu avec des images de même format et de même orientation. Mais ce n'est qu'une opinion personnelle, vous êtes libre de mixer différentes images.
      * Le diaporama va afficher l'image dans le même conteneur quelque soit sa taille, une image trop petite va être dilatée, une image trop grande va augmenter le temps de chargement du diaporama. Je vous conseille des images de largeur minimum 800px si votre paramétrage de la " Largeur maxi du diaporama " est à 800px.
      * L'ordre de passage des images est l'ordre lexicographique.
       

       
       
      Saisissez un nom, sélectionnez un dossier cible puis cliquez sur l’icône dossier. Vous devez obtenir ceci :
       

       
       
      Pour passer à l'étape suivante cliquez sur l'icône "crayon" située sous "Paramétrage du diaporama".
       
      4 - Paramétrage du diaporama.
       
       

       
      Sur cette page de paramétrage, après un rappel du nom et du dossier cible des images, vous avez accès aux réglages suivants :
      Choix du type de navigation manuelle par boutons ou par zones droite ou gauche de l'image, Choix du type de boutons, flèche dans un rectangle noir ou dans un cercle blanc. Visibilité des puces de navigation ou pager, Largeur maxi du diaporama en pixels, le réglage "100%" correspond à la largeur du site définie en configuration - 40 pixels, La durée de la transition, en secondes ou en millisecondes, entre diapositives (fading) , La durée totale d'affichage, en secondes ou en millisecondes, d'une image (fading compris, au minimum durée de la transition + 100ms), La visibilité de la légende uniquement au survol de l'image, toujours visible ou jamais visible, La position de la légende en bas ou en haut de l'image, Le temps d'apparition de la légende et des boutons, La saisie des légendes.  
      N'oubliez pas d'enregistrer.
       
      # C'est possible
       
      Dans un même site Zwii vous pouvez insérer plusieurs diaporamas avec pour chacun des paramétrages différents.
       
      # C'est pas possible
       
      Dans une page Zwii vous ne pouvez insérer qu'un seul diaporama.
       
      Avec Zwii ce n'est pas possible d'insérer plus d'un module par page, vous ne pourrez donc pas insérer un diaporama (module slider) dans une page de blog (module blog) ou dans un formulaire (module form).
       
       
       
    • Par sylvainlelievre
      Diaporama Slider
      Voir le fichier  
      Ce module va vous permettre d'insérer un diaporama responsif dans une page Zwii.
       
      Par configuration vous pourrez obtenir cet aspect :

      La navigation se fait en cliquant sur la zone droite ou gauche de l'image.
      Le texte apparaît de façon progressive au survol de l'image.
      Arrêt du défilement automatique au survol de l'image.
       
       
      Celui là :

      Navigation par boutons discrets.
      Le texte et les boutons apparaissent de façon progressive au survol de l'image.
      Arrêt du défilement automatique au survol de l'image.
       
      Ou encore cette version avec légende en haut et boutons de navigation rectangulaires :

       
      Une version sans les puces de navigations :

       
       
      Le diaporama est basé sur responsiveslides.com, le module Zwii slider est basé sur le module Zwii gallery de @Rémi. Merci à @Gilux et à @roger pour leurs contributions dans le CSS et à @Fred pour ses conseils et la mise à jour du fichier edit.js.php.
       
      #Installation
       
      1- Dézipper l'archive slider_vxx.zip
      Elle contient le dossier slider et 1 autre fichier dont nous verrons l'utilité plus loin (edit.js.php).
       
      Si vous avez déjà fait l'installation d'une ancienne version du module slider, il est préférable de la supprimer avant de poursuivre. Si la version précédemment installée était >= 2.3 vous pourrez réutiliser votre diaporama après avoir procédé à nouveau à son paramétrage, pour une version plus ancienne il faudra le recréer.
       
      2 - Avec votre logiciel FTP transférer le dossier slider dans le dossier module de votre site (attention module, pas core/module)
       

       
       
      Résultat obtenu pour le site dev9test
       
      slider/vendor/js/ contient le fichier javascript nécessaire au fonctionnement du module.
       
      slider/view/index/ contient 4 fichiers : index.php responsable de l'affichage du diaporama, index.css qui regroupe tous le CSS du diaporama et themes.gif,  themes.svg pour les 2 boutons proposés.
       
      slider/view/config/ et slider/view/edit/ proviennent du module gallery et sont utilisés pour le paramétrage du diaporama. Ils sont légèrement modifiés.
       
       
      #mode d'emploi
       
      1 - Créer une nouvelle page, modifier cette page

       
      2 - Sélectionner le module Slider et choisir la position du module dans la page
       
      A partir de la version 9.2.07 de Zwii l'option "Position du module dans la page" apparaît. Elle vous permet de choisir où le diaporama va s'afficher dans la page.
      La position "libre" vous permet d'insérer du contenu avant et après le diaporama en saisissant [MODULE] à l'endroit voulu dans votre page.
       

       
      Avec des versions 9 de Zwii plus anciennes vous pouvez remplacer par FTP le fichier core/module/page/view/edit/edit.js.php par celui contenu dans l'archive et dont on a parlé plus haut. Si non votre diaporama s'affichera uniquement en bas de page.
       
      Cliquez sur l'icone "roue dentée", positionnée à côté du choix de module, pour passer à l'étape 3.
       
      3 - Choisir le dossier contenant les images
       
      Vous aurez au préalable chargé les images du diaporama dans un dossier à l'intérieur de site/file/source/ (par FTP ou par le gestionnaire de fichiers intégré à Zwii).
      A ce propos 3 remarques :
      * Le diaporama va s'adapter automatiquement au format (16/9, 4/3,...) ou à l'orientation des images mais je trouve que le meilleur résultat visuel sera obtenu avec des images de même format et de même orientation. Mais ce n'est qu'une opinion personnelle, vous êtes libre de mixer différentes images.
      * Le diaporama va afficher l'image dans le même conteneur quelque soit sa taille, une image trop petite va être dilatée, une image trop grande va augmenter le temps de chargement du diaporama. Je vous conseille des images de largeur minimum 800px si votre paramétrage de la " Largeur maxi du diaporama " est à 800px.
      * L'ordre de passage des images est l'ordre lexicographique.
       

       
       
      Saisissez un nom, sélectionnez un dossier cible puis cliquez sur l’icône dossier. Vous devez obtenir ceci :
       

       
       
      Pour passer à l'étape suivante cliquez sur l'icône "crayon" située sous "Paramétrage du diaporama".
       
      4 - Paramétrage du diaporama.
       
       

       
      Sur cette page de paramétrage, après un rappel du nom et du dossier cible des images, vous avez accès aux réglages suivants :
      Choix du type de navigation manuelle par boutons ou par zones droite ou gauche de l'image, Choix du type de boutons, flèche dans un rectangle noir ou dans un cercle blanc. Visibilité des puces de navigation ou pager, Largeur maxi du diaporama en pixels, le réglage "100%" correspond à la largeur du site définie en configuration - 40 pixels, La durée de la transition, en secondes ou en millisecondes, entre diapositives (fading) , La durée totale d'affichage, en secondes ou en millisecondes, d'une image (fading compris, au minimum durée de la transition + 100ms), La visibilité de la légende uniquement au survol de l'image, toujours visible ou jamais visible, La position de la légende en bas ou en haut de l'image, Le temps d'apparition de la légende et des boutons, La saisie des légendes.  
      N'oubliez pas d'enregistrer.
       
      # C'est possible
       
      Dans un même site Zwii vous pouvez insérer plusieurs diaporamas avec pour chacun des paramétrages différents.
       
      # C'est pas possible
       
      Dans une page Zwii vous ne pouvez insérer qu'un seul diaporama.
       
      Avec Zwii ce n'est pas possible d'insérer plus d'un module par page, vous ne pourrez donc pas insérer un diaporama (module slider) dans une page de blog (module blog) ou dans un formulaire (module form).
       
       
       
      Contributeur sylvainlelievre Soumis 25/09/2019 Catégorie Modules  
    • Par roger
      Unminificateurs 8 en 1 toutes versions de ZwiCMS
      Voir le fichier Vous avez pris l'habitude de parcourir le web pour trouver des outils en ligne afin de dé-ofusquer (dé-minifier) vos fichiers pour les rendre exploitables tant en lecture qu'en écriture, et bien je vous propose la même chose à incorporer dans votre propre cms avec les trois outils les plus importants.
      Dé-minifier du CSS, JSON ou JS n'aura jamais été aussi facile et aussi simple pour vous.
      Une petite vidéo pour vous convaincre, la voilou...
       
       
      Comment envoyer les fichiers nécessaires pour faire fonctionner "unminificateurs" dans ZwiiCMS
      1° Une fois avoir téléchargé l'archive sur le forum, vous devez la décompresser sur votre pc.
      2° vous obtiendrez alors ceci dans un unique dossier nommé "unminificateurs":
      * 3 dossiers à envoyer par FTP sur votre espace où se trouve installé le ZwiiCMS
         - css-formater
         - js-formater
         - json-formater
      * 1 dossier nommé "exemples" contenant ds fichiers extrait d'un zwii sous trois formats qui si vous le décidez pourront vous servir afin de tester le script une fois installé sur le Zwii;
         - tippy.min.css
         - jquery.min.js
         - theme.json
       
      * Ainsi que deux fichiers dont celui ci que vous êtes entrain de lire expliquant la procédure à suivre pour réussir votre projet;
         - Installation sur votre espace web .txt
         - Création des pages.txt
       
      INSTALLATION
      1° Ouvrir votre logiciel FTP et rendez vous directement dans le dossiers où est installé votre ZwiiCMS
      2° Envoyez uniquement à la racine de celui ci le dossier nommé "unminificateurs"
      Nota: vous pouvez si vous le désirez envoyer ce fichier dans /core/vendor/ (là où sont tout les dossiers des script comme tinymce par exemple) ceci afin de respecter au mieux l'architecture de rangement des dossiers et fichiers du ZwiiCMS.

       

       
      3° Vous pouvez maintenant passer à la seconde étape, créer vos pages pour chaque script sur votre Zwii en ligne, lire le second fichier nommé "Création des pages.txt pour cela.
      C'est aussi simple que cela, l'installation est finie.
       
      CRÉATION DES PAGES
      1° Créer une rubrique apparente dans le menu dans laquelle vous ferez une présentation de vos outils de déminificcation de fichiers;
      2° Ensuite vous créerez 3 pages qui seront incorporées comme "page enfant" de votre rubrique
      3° Pour chacune d'entre elle vous entrerez le code qui la concerne donné plus bas ci dessous
      exemple:
      page principale
          page enfant n°1
          page enfant n°2
          page enfant n°3
      Passez IMPÉRATIVEMENT votre éditeur en mode "SOURCE" pour écrire les codes.
      Vous pouvez aussi adapter la hauteur de votre iframe selon vos besoins.

       
      CODES A ENTRER POUR CHAQUE PAGE
      IMPORTANT:
      Dans le code (tout au début) changez juste "non_du_zwii" pour le non du dossier où est installé votre ZwiiCMS;
      Suivant où vous avez placerez votre dossier "unminificateurs" qui contient les scripts le chemin menant vers celui ci.
       *(cas de l'installation à la racine du zwii des dossiers permettant de faire fonctionner les scripts)
      A : pour déminifier du CSS (page enfant n°1)
      <p><strong>En mode mobile, utiliser le pivotement de votre smartphone (landscape).</strong></p> <p><iframe src="/non_du_zwii/unminificateurs/css-formater/minifier.html" height="420px !important;" frameborder="0"></iframe></p> B : pour deminifier du JS (page enfant n°2)
      <p><strong>En mode mobile, utiliser le pivotement de votre smartphone (landscape).</strong></p> <p><iframe src="/non_du_zwii/unminificateurs/js-formater/index.html" width="100%" height="420px !important;" frameborder="0"></iframe></p> C : pour déminifier du JSON (page enfant n°3)
      <p><strong>En mode mobile, utiliser le pivotement de votre smartphone (landscape).</strong></p> <p><iframe src="/non_du_zwii/unminificateurs/json-formater/JSON-Formater.html" width="100%" height="420px !important;" frameborder="0"></iframe></p>  *(cas de l'installation dans le dossier /core/vendor/ du zwii des dossiers permettant de faire fonctionner les scripts)
      A : pour déminifier du CSS (page enfant n°1)
      <p><strong>En mode mobile, utiliser le pivotement de votre smartphone (landscape).</strong></p> <p><iframe src="/non_du_zwii/core/vendor/unminificateurs/css-formater/minifier.html" height="420px !important;" frameborder="0"></iframe></p> B : pour deminifier du JS (page enfant n°2)
      <p><strong>En mode mobile, utiliser le pivotement de votre smartphone (landscape).</strong></p> <p><iframe src="/non_du_zwii/core/vendor/unminificateurs/js-formater/index.html" width="100%" height="420px !important;" frameborder="0"></iframe></p> C : pour déminifier du JSON (page enfant n°3)
      <p><strong>En mode mobile, utiliser le pivotement de votre smartphone (landscape).</strong></p> <p><iframe src="/non_du_zwii/core/vendor/unminificateurs/json-formater/JSON-Formater.html" width="100%" height="420px !important;" frameborder="0"></iframe></p>
      Enregistrez votre travail pour chaque page et testez le à l'aide des fichiers joints dans le dossier "exemples" fourni avec l'archive que vous avez dézippé sur votre pc;
      Voila c'est aussi simple que cela, le tout étant bien entendu responsif afin que vous puissiez bénéficier de vos service sur tout les affichages possibles.
      Enjoy les amis
       
      # IMPORTANT A LIRE #
      Vous reconnaissez qu'en utilisant ce script sur votre site être entièrement responsable en cas de problème quel qu'il soit après sa mise en œuvre, je ne pourrais donc être considéré en aucun cas comme responsable de cet état de fait.
      💡 Pensez alors à faire une sauvegarde intégrale de votre site, ceci vous permettrait alors de revenir en arrière en réinjectant celle ci et retrouver votre site web tel que vous l'aviez conçu avant utilisation du script ci dessus.
      Contributeur roger Soumis 07/03/2019 Catégorie Modifications et astuces  
×
×
  • Créer...