Aller au contenu
Support de Zwii

PeterRabbit

Membres
  • Compteur de contenus

    1 141
  • Inscription

  • Dernière visite

  • Jours gagnés

    65

Fichiers posté(e)s par PeterRabbit

  1. Zwii + Swiper = Zwiiper !

    Un slider facile à intégrer et à paramétrer ?
     
    Ce plugin, établi à partir d'une démo de Stu Nicholls, intègre le slider Swiper dans la bannière de votre Zwii.
    Swiper est-il vraiment le most modern mobile touch slider qu'il prétend être ? Voyez les démos et la page API pour vous faire une idée... ou installez le plugin pour étudier ses possibilités sur un site d'essai : il est livré avec quelques photos « empruntées » à L'internaute pour une mise en œuvre immédiate, d'où son poids.
     
    Présentement :
    Swiper est réglé pour démarrer automatiquement, tourner en boucle et intégrer des titres. On peut passer d'une diapo à l'autre au clavier, à la souris (au clic, au glisser ou à la molette) ou encore avec son gros doigt ou son petit stylet sur les écrans tactiles. Le tout responsivement et sans devoir recourir à jQuery — même si ce dernier est déjà intégré à Zwii pour d'autres raisons.  
    Installation du plugin
    Décompressez l'archive, ouvrez le dossier "Installation" et copiez-en le contenu (le fichier "index.php" et les deux dossiers "core" et "site") à la racine du répertoire d'installation de votre site. Acceptez le remplacement du fichier "index.php". Connectez-vous à votre site ou rafraîchissez la page. C'est fait. Seul le code nécessaire a été inscrit dans vos fichiers.

    Configuration d'un diaporama
    Créez un dossier dans lequel vous monterez les images de votre diaporama :
     

     

     
    Tout se passe ensuite dans "core/vendor/swiper/swiperslides.inc.php".
    L'explication en quatre étapes, à partir du code du diaporama fourni en démo. Il suffit de modifier les noms du répertoire et des images  :
    <img src="<?php echo helper::baseUrl(false); ?>site/file/source/répertoire/image.jpg">  
    Juste une image : <div class="swiper-wrapper"> <div class="swiper-slide swiper-slide-active"><img src="<?php echo helper::baseUrl(false); ?>site/file/source/cinque_terre/cinque_terre.jpg"> </div>  
    La même, avec une bulle-titre au survol de la souris : <div class="swiper-wrapper"> <div class="swiper-slide swiper-slide-active"><img src="<?php echo helper::baseUrl(false); ?>site/file/source/cinque_terre/cinque_terre.jpg" title="L'Internaute Voyage"> </div>  
    Un titre (sur deux lignes) ? <div class="swiper-slide swiper-slide-active"><img src="<?php echo helper::baseUrl(false); ?>site/file/source/cinque_terre/cinque_terre.jpg" title="L'Internaute Voyage"> <div class="swiper-text">Parco nazionale <br>delle Cinque Terre</div> </div>  
    La balise complète avec un lien vers la source de l'image (ou ailleurs) : <div class="swiper-slide"><a href="http://www.linternaute.com/voyage/europe/1223283-les-cinque-terre-escapade-a-flanc-de-falaises-en-italie/1225278-manarola-et-ses-vignes" target="_blank"><img src="<?php echo helper::baseUrl(false); ?>site/file/source/cinque_terre/manarola.jpg" title="L'Internaute Voyage"></a> <div class="swiper-text">Manarola</div> </div>
    Désinstallation
    Copiez le contenu du dossier "Restauration" (le dossier "core" et le fichier "index.php") à la racine du répertoire d'installation de votre site, acceptez le remplacement du fichier "index.php" et rafraîchissez la page.
    J'aurais pu ajouter un script pour supprimer le diaporama de démontration, mais je vous laisse le faire avec Responsive Filemanager ou FileZilla...
     


     

    8 téléchargements

       (1 avis)

    Mis à jour

  2. Template

    Le plugin "Template" de l'éditeur TinyMCE
     
    Dans sa version complète, l'éditeur TinyMCE embarque plus de 40 plugins — 43, pour être exact. C'est le cas dans le Zwii Ultimate proposé par @Roger nounours. Mais, pour exploiter leur potentiel, il faut les installer et les apprivoiser.
    Dans ces conditions, quelques-uns suffisent amplement, à condition qu'ils fonctionnent...
     
    L'un des plus utiles et des plus intéressants est certainement le plugin "Template" : il vous permettra d'insérer un modèle prédéfini dans votre page à l'endroit où vous le souhaitez.
    Tout ou presque semble possible, de l'intégration d'un texte simple ou d'une variable, à celle de mises en forme complexes : les deux modèles fournis à titre de démonstration permettent ainsi d'intégrer les 5 premiers paragraphes du célèbre pseudo-texte "Lipsum" et un tableau repris de la documentation de TinyMCE.
     
    NB : Ce plugin, qui ajoute une entrée dans le menu "Insérer" et un  bouton dans la barre d'outils de l'éditeur TinyMCE, respectera vos fichiers en n'écrivant que le code nécessaire à son fonctionnement.
     
    Installation
    Décompressez l'archive. Ouvrez le dossier "template_install" et copiez le dossier "core" et le fichier "index.php" qu'il contient à la racine du répertoire d'installation de votre site. Acceptez le remplacement des fichiers "index.php" et "core/vendor/tinymce/langs/fr_FR.js". Connectez-vous à votre site ou rafraîchissez la page. C'est tout.

    Mode d'emploi
    Placez le curseur à l'endroit où vous souhaitez insérer le modèle prédéfini. Cliquez sur l'entrée "Modèle" du menu "Insérer" ou sur le bouton  de la barre d'outils.  

     
    Choisissez le modèle. Validez.  
    A vous de jouer !
    Créez vos propres modèles sous la forme de fichiers textes dotés de l'extension ".php" que vous placerez dans le dossier "core/vendor/tinymce/templates". Inspirez-vous des deux modèles que vous y trouverez. Contrairement à ce qui est expliqué dans la documentation de TinyMCE, il ne semble plus nécessaire d'intégrer le contenu dans une <div class="mceTmpl">, la preuve... Éditez le fichier de configuration de TinyMCE "core/vendor/tinymce/init.js". Dupliquez la dernière ligne de l'option "template" et remplacez le titre et le nom du modèle par les vôtres. Ajoutez une description si vous le désirez :    templates : [     {title: "Lipsum", url: baseUrl + "core/vendor/tinymce/templates/lipsum.php", description: ""},     {title: "Tableau", url: baseUrl + "core/vendor/tinymce/templates/tableau.php", description: ""},     {title: "Votre titre", url: baseUrl + "core/vendor/tinymce/templates/votre modèle.php", description: ""},   ], Enregistrez les modifications du fichier sur le serveur. Rafraîchissez la page de votre site.  
    Enjoy ! 
     
    PS : N'hésitez pas à partager vos meilleures réalisations sous la forme "monsupermodele.php"  — avec ou sans post de présentation — sur la page de support du plugin !
     
     

     

    2 téléchargements

       (0 avis)

    Mis à jour

  3. Abbr

    "Abbr", un plugin pour l'éditeur TinyMCE
     
    Certains articles traitant de sujets politiques ou scientifiques font un usage abondant de sigles et autres acronymes que le lecteur ne connaît pas forcément. La balise HTML5 <abbr> permet d'afficher leur signification au survol de la souris en l'intégrant dans l'attribut "title".
    Voici par exemple ce que cela donnerait  pour expliquer le sens du sigle "CFF - SBB" sur les flancs des wagons des Chemins de Fer Fédéraux suisses — Schweizerischen BundesBahnen (SBB) en allemand :
    <abbr title="Ca Fa Fite ? - S'est Bas Bossible !">CFF - SBB</abbr>  
    Ce plugin, qui ajoute un bouton à la barre d'outils de l'éditeur TinyMCE, vous évitera d'éditer le code de votre page pour intégrer la balise.
    NB : Le plugin écrit le code nécessaire à son fonctionnement en respectant l'intégrité de vos fichiers. Le module de restauration les remettra dans leur état d'origine.
     
    Installation
    Décompressez l'archive. Ouvrez le dossier "abbr_install" et copiez le dossier "core" et le fichier "index.php" qu'il contient à la racine du répertoire d'installation de votre site. Acceptez le remplacement du fichier "index.php". Connectez-vous à votre site ou rafraîchissez la page. C'est tout.

    Mode d'emploi
    Tapez la signification complète de l'abréviation avec les majuscules du sigle ou de l'acronyme. Sélectionnez-la au curseur ou à la souris. Cliquez sur le bouton "ABBR" dans la barre d'outil de TinyMCE. Entrez l'abréviation dans la boîte de dialogue. Validez.  

     
    Edition
    Placez le curseur sur l'abréviation à modifier. Cliquez. Cliquez sur le bouton "ABBR". Modifiez l'abréviation. Validez.  

     
    Désinstallation
    Ouvrez le dossier "abbr_restaure" et copiez-en le contenu à la racine du répertoire d'installation de votre site. Acceptez le remplacement du fichier "index.php". Connectez-vous à votre site ou rafraîchissez la page.
     
     PS : Si ce plugin vous intéresse, j'en ai d'autres dans mes tiroirs. Après tout, pourquoi WP serait-il le seul CMS à bénéficier de toutes sortes de fonctionnalités supplémentaires ?

    0 téléchargement

       (0 avis)

    Mis à jour

  4. Auto inscription

    Cette réécriture du module d'inscription d'un nouveau membre proposé par Roger Nounours tient compte des réactions que son principe a suscitées sur le forum : le visiteur s'inscrit en ligne, son mot de passe restant confidentiel.
     
    Avertissement
    Ce plugin n'écrit pas les lignes de code nécessaires à son fonctionnement, il remplace les fichiers concernés — mais il y a peu de chance que vous les ayez personnalisés. Sinon, faites des copies de sécurité.
     
    Installation du plugin
    Dézippez l'archive et copiez les deux dossiers "core" et "module" qu'elle contient à la racine du répertoire d'installation de votre site. Acceptez les quatre remplacements. Connectez-vous à votre site ou rafraîchissez la page. C'est tout.
     
    Configuration de la page d'inscription
    Créez une nouvelle page.
    Éditez-la :
    Renommez-la "Inscription", par exemple. Choisissez son emplacement dans la barre de menu :
     
    Ajoutez-lui le module "Redirection" :
     
    Enregistrez les modifications de la page.
     
    Accédez à la configuration du module de redirection (roue crantée). Entrez l'adresse de redirection sur le modèle de celle-ci : http://www.votresite.net/user/add
    Enregistrez les modifications du module.
    Déconnectez-vous de l'interface d'administration.
     
    Le menu "Inscription" donne accès à la page qui permet au visiteur de s'inscrire en tant que "Membre" :

    Libre à vous d'éditer son profil par la suite pour lui attribuer un autre rang.

    Le script envoie un mail de confirmation au nouveau membre s'il a coché la case "M'envoyer un mail de confirmation" et, dans tous les cas, un mail d'avertissement au "superadministrateur" qui a créé le site :

     
    NB : Le plugin supprime aussi le désagrément de la boîte au dialogue un peu hermétique qui surgissait lorsqu'on éditait une page contenant le module de redirection :

     
    Désinstallation
    Supprimez la page d'inscription et copiez le contenu du dossier "Restauration" à la racine de votre site.
     
    Déposé sous le sapin le 24 décembre à 22:45. A n'ouvrir que le matin de Noël.

     
     
     

    4 téléchargements

       (1 avis)

    Mis à jour

  5. Ckeditor

    Envie d'essayer un autre éditeur que TinyMCE ? Ckeditor ne manque pas d'atouts et l'essai est sans risque.
     
    Avertissement
    Ce système de plugin basique permet une installation en quelques clics, pour rester fidèle au slogan de ZwiiCMS. Il évite aussi d'expliquer quelles modifications apporter et à quelles lignes de quels fichiers les apporter. Les curieux sauront bien les trouver. 
    Mais chaque plugin est spécifique à une version précise de ZwiiCMS. Celui-ci est conçu pour la version 8.1.0. Ne l'installez donc pas sur une autre version. Si Ckeditor rencontre un intérêt suffisant, je proposerai des mises à jour pour adapter l'intégration aux nouvelles versions.
    Si vous avez modifié certains fichiers de votre ZwiiCMS, vérifiez le contenu de l'archive pour être sûr que l'installation ne vous fera pas perdre vos personnalisations..
     
    Installation
    Après avoir décompressé l'archive, copiez les deux dossiers "core" et "module" du répertoire "installation Ckeditor" à la racine de votre site. Acceptez le remplacement des sept fichiers modifiés. C'est tout.
    Personnalisation 
    Le plugin installe la version complète de Ckeditor. Si vous n'avez pas besoin de toutes ces options, il suffit de remplacer "full" à la ligne 134 du fichier core/layout/main.php par "basic" ou "standard" — plus d'informations en suivant ces liens pour comparer les options des différentes distributions ou pour un mode d'installation différent et une personnalisation à la demande.
    Restauration
    Procédez de la même façon avec le contenu du répertoire "restauration TinyMCE" de l'archive pour retrouver l'éditeur TinyMCE et votre ZwiiCMS dans son état initial.
     
    PS : N'étant ni développeur ni même codeur, je pense qu'il doit exister des solutions plus élégantes. N'hésitez pas à les proposer, mais surtout, surtout, ne tirez pas sur le pianiste — que je ne suis pas non plus ! 
     
    Juste un commentaire pour préciser que pour citer les sources utilisées je n'ai utilisé que la documentation disponible sur le site de CKeditor et ma réflexion pour vous proposer ce plugin.

    41 téléchargements

       (2 avis)

    Mis à jour

  6. Logo

    Envie d'un logo ou d'une petite image dans la bannière de votre site ? Avec des liens qui ramènent vers la page d'accueil  (ou ailleurs) depuis le logo et/ou le titre du site ?
     
    Ce plugin est sans doute perfectible, mais il fonctionne plutôt bien en l'état — même chez Free :
     


    Cette fois,  je n'ai pas fait de script d'installation qui écrit juste ce qu'il faut de code là où il faut ni de plugin de restauration. Installez-le sur un Zwii d'essai ! 
     
    Décompressez l'archive. Copiez son contenu à la racine du répertoire de votre site. Acceptez le remplacement des fichiers.  
     
    Personnalisation des liens et des titres
     
    Éditez le fichier "core/layout/main.php" et modifiez l'adresse de redirection :
    <a href="<?php echo helper::baseUrl(false); ?>" et le titre :
    title="Accueil" aux lignes, 32, 38, 75 et 81.
     

     
    Merci à @simon511000 pour l'idée du lien et à @MAllus pour la syntaxe !
     
     

    16 téléchargements

       (0 avis)

    Mis à jour

  7. Magnific Popup

    Magnific Popup, de Dmitry Semenov, affiche les images de votre choix dans une fenêtre modale responsive de type "lightbox". Ce plugin a été réalisé pour répondre au souhait de @vinc[E].
     
     
    Installation
     
    Décompressez l'archive. Copiez son contenu (un fichier "index.php" et un dossier "core") à la racine du répertoire d'installation de votre site. Acceptez le remplacement du fichier "index.php". Rendez-vous sur votre site ou rafraîchissez la page.              C'est fait...
     

    Utilisation
     
    Dans le code de votre page ("Outils <> Code source"), placez la balise de votre image  :
    <img src="/site/file/source/gallery/votre-image" width="xx" height="yy" /> au milieu de cette balise <a> :
    <a class="image-popup" title="Légende apparaissant dans la lightbox" href="/site/file/source/votre-image"></a> comme ceci :
    <a class="image-popup" title="Légende apparaissant dans la lightbox" href="/site/file/source/votre-image.jpg"><img src="/site/file/source/gallery/votre-image" width="xx" height="yy" /></a>
    Pour les curieux ou les utilisateurs avertis
     
    Magnific  Popup offre bien d'autres possibilités d'affichage. Consultez son site  et n'hésitez pas à cliquer sur les différents titres des exemples pour étudier les codes sources et mieux comprendre son fonctionnement — d'autres exemples sur Codepen.
    Vous pourrez ainsi ajouter d'autres options ou d'autres scripts d'initialisation à la suite du premier, au bas de la page "core/layout"/main.php"  :
    <script type="text/javascript">       $('.image-popup').magnificPopup({type:'image',closeOnContentClick: true,});             $('.image-popup-fit-width').magnificPopup({           type: 'image',           closeOnContentClick: true,           image: {             verticalFit: false           }         });        $('.image-popup-no-margins').magnificPopup({           type: 'image',           closeOnContentClick: true,           closeBtnInside: false,           fixedContentPos: true,           mainClass: 'mfp-no-margins mfp-with-zoom', // class to remove default margin from left and right side           image: {             verticalFit: true           },           zoom: {             enabled: true,             duration: 300 // don't foget to change the duration also in CSS           }         });       });     </script>     
    Il faudra bien sûr modifier le nom de la classe dans la balise <a> en fonction de l'effet recherché :
    <a class="image-popup"  
    Vous trouverez les fichiers js et le css de Magnific Popup dans le répertoire "core/vendor/magnific-popup". Supprimez "jquery.magnific-popup.js" si  vous n'êtes pas curieux de connaître son codage : c'est la version compressée qui assure le fonctionnement.
     

    5 téléchargements

       (1 avis)

    Mis à jour

  8. Label.css

    Les scripts css qui permettent d'afficher la légende d'une image au survol de la souris sont nombreux, tous plus spectaculaires et plus imaginatifs les uns que les autres.
    Mais si j'ai choisi celui d'Hossein Emrani, c'est pour sa légèreté et sa facilité d'intégration qui me semblent bien en phase avec l'esprit de Zwii  :  c'est tellement simple qu'on se demande pourquoi expliquer et traduire... D'ailleurs, je ne vous ferai même pas de plugin ! 
    Si j'ajoute qu'il est responsive, qu'il s'adapte automatiquement à la longueur de la légende et que son fond clair se démarque agréablement, que demander de plus ?
     
    Installation 
     
    Collez le contenu du fichier "label.css" au bas de "core/layout/common.css" ou de core/layout/perso/perso.css" si vous avez installé mon plugin "Css perso" — ou d'un perso.css de votre cru (NDRN*).
     
     
    Utilisation 
     
    Éditez le code de la page ("Outils > Code source"), et placez la balise de l'image que vous aurez préalablement positionnée 
    <img src="/file/source/gallery/votre-image" alt="" width="xxx" height="yyy" /> à l'intérieur de cette balise
    <figure class="label inside bottom float" data-label="votre légende"></figure> comme ceci :
    <figure class="label inside bottom float" data-label="votre légende"><img src="/file/source/gallery/votre-image" alt="" width="xxx" height="yyy" /></figure>  
    Réglages 
     
    Précisez l'emplacement de la légende en inscrivant ces paramètres dans le sélecteur class="label" :
    outside : à l'extérieur de l'image :                    - bottom : en bas 
                      - top : en haut
    inside : à l'intérieur de l'image                  - bottom : en bas
                     - middle : au milieu
                     - top : en haut
                               - left : à gauche
                               - right : à droite

    Idem pour l'effet d'affichage :
                    - none : la légende s'affiche en même temps que la page.
                    - fade : la légende se révèle au survol de l'image.
                    - float : la légende entre dans le cadre au survol de l'image.
     
    Enfin, comme l'auteur est iranien, il a également prévu que la légende puisse se lire de droite à gauche en ajoutant "rtl" au sélecteur "class".
     
     
    Conseils
     
    Le css  est facile à décortiquer pour le personnaliser. Pour la copie d'écran, j'ai diminué légèrement la taille des caractères et justifié la légende en ajoutant deux lignes à la classe "label[data-label]" :
    .label[data-label] { padding:initial !important; font-size:initial !important; font-weight: initial !important; line-height: initial !important; color: initial !important; text-shadow:initial !important; white-space:initial !important; vertical-align: initial !important; background-color: initial !important; border-radius: initial !important; font-size: 0.95em !important; text-align: justify !important; } On peut aussi créer ses propres effets, comme Hossein Emrani encourage à le faire...
    Une fois les personnalisations terminées, un petit détour par un site comme CssMinifier vous permettra de gagner 2Ko...
     

     
    _____________
    * NDRN : Note De Roger Nounours.

     

    1 téléchargement

       (1 avis)

    Mis à jour

  9. Zwii chez Free

    Installer Zwii chez Free ? C'est non seulement possible, mais facile :
    Téléversez (il paraît qu'on dit comme ça, en français) un ZwiiCMS 8.1.0 à la racine de votre espace personnel Free. Décompressez l'archive et copiez-en le contenu (les deux dossiers "core" et "sessions" et le fichier ".htaccess"), toujours à la racine de votre espace. Acceptez le remplacement des fichiers ".htaccess" et "core/vendor/filemanager/config/config.php".  
    Mais n'activez surtout pas la réécriture des URLs, Free ne le permet pas !
    — Tiens donc, ça ne marche plus ? Je vous avais pourtant prévenus ! Mais c'est toujours la même chose, on veut vérifier... Allez, c'est vite réparé : il suffit de réinstaller le plugin ! 
     
    Enjoy et faites passer. 

    21 téléchargements

       (1 avis)

    Mis à jour

  10. Popin

    Ce plugin, suggéré par @stratego, installera une page modale (j'ai découvert qu'on appelle cela "popin" pour différencier cette technique des anciennes "popups") qui s'ouvrira automatiquement lorsqu'un internaute se connectera à votre site.
     
    Elle pourra s'avérer pratique pour des communications ponctuelles, d'autant que le module de désinstallation "modal_popin_restaure" inclus dans l'archive vous permettra de retrouver facilement votre configuration initiale.
     

    Installation
     
    Si vous avez installé une version 1.x.x désinstallez-la préalablement en utilisant son module "modal_plugin_restaure" !
     
    Décompressez l'archive "modal_popin" et copiez son contenu à la racine du répertoire d'installation de votre CMS. Acceptez le remplacement des deux fichiers "index.php" et "core/vendor/tinymce/init.js" Si vous avez déjà installé "css_perso", annulez le remplacement de "core/layout/perso/perso.css".  

    Utilisation
     
    La technique a changé, le code de la <div> aussi !
     
    Copiez ces lignes dans le code de votre page d'accueil ("Outils <> Code source") et remplacez le pseudo-texte par votre message.
     
    <div id="&zwnj;" class="modalDialog"><img src="site/file/source/pixel.png" border="0" onload="window.location.href = '#&zwnj;';" />
    <div><a class="close" title="" href="#"><img src="site/file/source/close_popin.png" border="0" alt="" title="" /></a>
    <h2>In in fermentum est</h2>
    <p>Donec vel suscipit est. Nullam tincidunt blandit enim a tempus. Integer convallis metus pretium odio porta, ac placerat augue mattis. Proin non malesuada lacus. Morbi lacus lectus, sagittis a tristique sed, ultrices at nisi. In ut dui at ex malesuada semper. Sed justo urna, lobortis ac rutrum nec, dignissim at ipsum. In in fermentum est.</p>
    </div>
    </div>
     

    Personnalisation
     
    Le css se trouve dans "core/layout/perso/perso.css".
     

    Désinstallation
     
    Procédez de la même façon avec le module "modal_popin_restaure".
     

    Notes techniques
     
    Comme pour mes précédents plugins, ma part se limite au choix de techniques trouvées sur le net, à leur intégration à ZwiiCMS et à la conception du système d'installation.
     
    Ce plugin utilise le code exposé sur cette page. Le design de la fenêtre reprend celui qui est présenté ici.  
    Cette technique présente un (tout) petit inconvénient cosmétique, que je me suis efforcé de minimiser le plus possible — mais je ne voulais pas utiliser de script pour ce plugin.
     

    13 téléchargements

       (1 avis)

    Mis à jour

  11. Patch module "Redirection"

    Bug signalé par @notkaa
     
    Après application du correctif, les "membres" ne se verront plus proposer d'éditer le module "Redirection"... et claquer la porte 403 au nez puisqu'ils n'ont pas le niveau d'autorisation nécessaire... 
    Avec la v.2, les grincheux n'auront même plus à cliquer sur cette bête boîte de confirmation pour modifier leur redirection ! 
     
    Avant
     
    Aprés
     
     
    Installation
     
    Dézippez l'archive et copiez son contenu (un dossier "module") à la racine du répertoire d'installation de votre site. Acceptez les deux remplacements qui vous seront proposés.  
     
    Personnalisation
     
    Je ne vois pas bien en quoi l'édition des modules de redirection concernerait un modérateur, mais j'ai conservé le paramétrage d'origine de ZwiiCMS. Si vous souhaitez restreindre cette autorisation au seul administrateur du site, il suffit de supprimer la ligne 51 du fichier module/redirection/redirection.php
    OR $this->getUser('group') === self::GROUP_MODERATOR) sans oublier de supprimer aussi la parenthèse ouvrante du début de la ligne 50, qui n'a plus sa raison d'être.
    AND ($this->getUser
     
     
     

    6 téléchargements

       (1 avis)

    Mis à jour

  12. Plyr, le player audio-vidéo qu'il vous faut !

    Vous cherchez un player audio-vidéo léger et polyvalent ?
    Un petit détour sur le site de Plyr vous convaincra qu'il est bien ce qu'il affirme : "a simple, accessible HTML5 media player", un player HTML5 simple à paramétrer qui vous permettra d'intégrer facilement des vidéos (les vôtres ou celles de Youtube) ou des fichiers audio sur votre site, le tout dans un format responsive.
     
     
    Installation 

    Ce plugin est conçu pour respecter vos données : il n'écrasera aucun fichier et n'installera que ce qui est nécessaire à son fonctionnement. 
    L'archive contient deux modules :
    "plyr", pour installer le player. "plyr_restaure", pour remettre votre site dans son état initial si le player ne correspond pas à vos attentes.  
    Pour chacun des modules :
    Après avoir décompressé le zip, copiez-en le contenu (un dossier "core" et un fichier "index.php") à la racine du répertoire d'intallation de votre CMS. Acceptez le remplacement du fichier "index.php". Connectez-vous ensuite à votre site pour finaliser l'opération.  
     
    Utilisation
     
    Collez ces lignes dans le code de vos pages ("Outils > Code source") en les adaptant à votre configuration et au type de vos fichiers.
     
    Audio
    <audio controls>
      <source src="chemin/vers/votre.mp3" type="audio/mp3">
    </audio>
     
    Exemple : <audio controls="controls"><source src="site/file/source/when_im_sixty-four.mp3" type="audio/mp3" /></audio>
     
    Vidéo
    <video poster="chemin/vers/votre image d'accueil.jpg" controls>
      <source src="chemin/vers/votre video.mp4" type="video/mp4">
    </video>
     
    YouTube
    <div data-type="youtube" data-video-id="bTqVqk7FSmY"></div>
     
    Pour plus d'information ou un paramétrage plus pointu, consultez la page d'aide de Plyr.
     
     
    Personnalisation
     
    Si vous souhaitez assortir Plyr aux couleurs de votre site, éditez le fichier "core/vendor/plyr/plyr.css" et recherchez-remplacez  #477BBB (un des bleus de ZwiiCMS) par le code hexadécimal de la ou des couleurs de votre choix.
     

    Remerciements
     
    Plyr s'installait sans aucune difficulté sur la version 7 de ZwiiCMS. Ce n'est plus le cas avec la version 8. Un grand merci à @Roger nounours pour la ligne de css qui a contribué à régler l'essentiel du problème ! 
     
     

    22 téléchargements

       (2 avis)

    Mis à jour

  13. Une question ferait pourtant un bon titre...

    Mais, en raison du bug engendré par le point d'interrogation, vous deviez y renoncer : en effet, l'URL "qui-sommes-nous-?" produite par le titre d'une page intitulée "Qui sommes-nous ?" renvoie une erreur 404.
     
    Après application du correctif, l'URL se présentera sous la forme "qui-sommes-nous", reconnue par le système et votre titre conservera son point d'interrogation.
     
    NB : Ce correctif a pour seul objectif de dépanner les utilisateurs en attendant une prochaine mise à jour de ZwiiCMS. 
    Il n'a donc pas l'ambition d'être parfait : s'il tolère qu'on oublie de faire précéder le point d'interrogation par un espace, il ne traite que le point d'interrogation final. Il n'empêchera donc pas le titre d'un article consacré au tableau de Gauguin "D'où venons-nous ? Que sommes-nous ? Où allons-nous ?" de produire une erreur 404.
     
    Installation
     
    Après avoir décompressé l'archive, copiez-en le contenu (un dossier "core" et un fichier "index.php") à la racine du répertoire d'installation de votre CMS.
    Acceptez le remplacement du fichier "index.php".
    Connectez-vous à votre site pour finaliser la correction.
     

    1 téléchargement

       (1 avis)

    Mis à jour

  14. Youtube &co audio player

    Par une étrange évolution, Youtube est désormais devenu un vaste répertoire de chansons, musiques et documents sonores en tout genre. Mais pourquoi afficher un diaporama, voire une image fixe ou un clip artificiel qui vous détournent du son ?
     
    Le script d'Amit Agarwal, qui fait appel à l'API de Youtube  — et que j'avais publié dans un premier temps — fonctionne parfaitement sur un PC Windows. Sur les mobiles, en revanche, c'est plus aléatoire (Remarques concernant les appareils mobiles).
     
    Le présent "player audio" repose uniquement sur du css. Même s'il présente un petit défaut (cosmétique), il devrait fonctionner sur tous les terminaux.
    De plus, ce défaut est très relatif, puisqu'il suffit de copier deux lignes de code pour intégrer plusieurs players sur une même page, là où des scripts imposent une mise en œuvre assez lourde — sans parler de son adaptabilité (voir notes ci-dessous).

    N'hésitez pas à faire part de vos retours.
     

    Installation
     
    Ce plugin est conçu pour respecter votre site : il n'écrasera aucun fichier et n'installera que ce qui est nécessaire à son fonctionnement. 
    L'archive contient trois modules complémentaires :
     
    "css_perso", qu'il faut installer en premier si vous ne l'avez déjà fait : il ajoutera un dossier "core/layout/perso" contenant la feuille de style "perso.css" que le plugin utilisera et sur laquelle vous pourrez désormais inscrire vos personnalisations, ce qui facilitera d'éventuelles réinstallations ou mises à jour. "ytap", qui constitue le plugin proprement dit. "ytap_restaure", l'outil de désinstallation qui remettra votre site dans son état initial — en conservant malgré tout le dossier "core/layout/perso" pour les raisons exposées ci-dessus.
    Répétez cette opération pour chacun des modules dans l'ordre de la numérotation :
    Après avoir décompressé le zip, copiez-en le contenu (un fichier "index.php" et un ou deux dossiers suivant le cas) à la racine du répertoire d'installation de votre site. Acceptez le remplacement du fichier "index.php" qui vous sera proposé. Connectez-vous ensuite à votre site pour finaliser l'installation du module.
     
    Utilisation
     
    Copiez intégralement ce <div> dans le code source de votre page ("Outils > Code source") et remplacez l'ID de la vidéo (les 11 caractères précédant le point d'interrogation) par celle de la vidéo que vous voulez diffuser :
     
    <div id="ytandcoap"><iframe src="https://www.youtube.com/embed/JB9zXoOBpOI?modestbranding=1" width="32" height="32" frameborder="0"></iframe></div>
     
    Enjoy ! 
     
    Notes : Ce "player" s'accommode également très bien des vidéos Dailymotion et Viméo — et peut-être d'autres encore, moyennant quelques ajustement du css... à vous de nous le dire !
    Remplacez la totalité de l'iframe en réglant la largeur et la hauteur sur 32, comme ci-dessus.
     
    ____________
    Plugin mis au point à partir de documentations techniques diverses, accessibles sur W3Schools et Stack Overflow pour l'essentiel. 

    5 téléchargements

       (2 avis)

    Mis à jour

  15. Floating videos

    Si vous fréquentez les sites d'information, vous avez sans doute croisé ce genre de player vidéo qui colle à la page et vous poursuit lorsque vous la déroulez. Pas étonnant que ce truc en agace certains... 
    Une recherche rapide m'a conduit ici.
    Même si le script ne fonctionne pour l'instant qu'avec des vidéos Youtube, je me suis dit qu'il serait intéressant de chercher à l'intégrer à ZwiiCMS, en complément du plugin "responsive video.js" publié par Roger nounours — que j'ai d'ailleurs ajouté à l'archive.
     
    Installation
     
    Le principe est simple, mais il faut le respecter à la lettre.
    L'archive contient plusieurs modules complémentaires à installer l'un après l'autre en suivant la numérotation :
    le plugin "css_perso" à installer impérativement en premier si vous ne l'avez déjà fait : il ajoutera à votre CMS un dossier "core/layout/perso" contenant la feuille de style "perso.css" sur laquelle le plugin inscrira les ajouts nécessaires à son fonctionnement — et où vous pourrez porter vos propres personnalisations pour faciliter une réinstallation ou une mise à jour ultérieures ; le plugin "floating_videos" proprement dit ; le plugin de désinstallation "floating_videos_restaure" qui ne laissera aucune trace du précédent tout en conservant les deux améliorations intéressantes que constituent le plugin "css_perso" et le script "responsive videos js".  
    Après avoir décompressé chacun des zips, copiez-en le contenu (un fichier "index.php" et un dossier "core") dans le répertoire d'installation de votre site et acceptez le remplacement qui vous sera proposé.
    Connectez-vous ensuite à votre site pour finaliser l'installation.
    Répétez l'opération pour chacun des modules.
     
    Utilisation
     
    Copiez intégralement ce <div> dans le code source de votre page ("Outils > Code source") et remplacez l'adresse par celle de la vidéo que vous voulez intégrer :
     
    <div id="featured-media"><iframe id="featured-video" src="https://www.youtube.com/embed/kdK4f3o6zsE?enablejsapi=1&amp;rel=0&amp;showinfo=0&amp;controls=1" width="720" height="405" frameborder="0" allowfullscreen="allowfullscreen"></iframe></div>
     
    NB : Le player flottant ne s'affiche que si la page est suffisamment longue pour qu'on ait à la dérouler... et qu'on lance la vidéo !

    Enjoy Avishai Cohen à Jazz in Marciac !
     
     
     
    ____________
     
    On aura compris que je ne suis que l'auteur du système de plugin — avec sans doute les maladresses d'un néophyte en matière de langage PHP  — le script lui-même provenant en fait de la documentation Youtube.
     

    5 téléchargements

       (1 avis)

    Mis à jour

  16. Css perso

    ZwiiCMS ne prévoit pas d'autre feuille de style que common.css pour y inscrire les personnalisations qu'on lui apporte — ce qui faciliterait pourtant les mises à jour...
    Une seule ligne de code corrige cette lacune, mais tout le monde ne sait pas forcément comment faire.
     
    Ce plugin l'ajoutera pour vous en même temps qu'un dossier "core/layout/perso" contenant la feuille de style perso.css sur laquelle vous inscrirez désormais vos petites modifications cosmétiques. Le tout dans le respect absolu de vos données et sans laisser la moindre trace.

    Installation
    Décompressez l'archive et copiez-en le contenu (le fichier index.php et le dossier "core") à la racine du répertoire d'installation de votre ZwiiCMS. Acceptez le remplacement du fichier index.php.
    Connectez-vous à votre site pour finaliser l’installation.

    Prise en main
    La feuille de style n'est pas vide, le petit gadget qu'elle contient vous donnera peut-être des idées...
    Éditez une page de votre site, ou créez-en une nouvelle avec un peu de texte, du lipsum par exemple, et remplacez la balise <p> de début de paragraphe par <p class="mylipsum"> dans le code source (Outils > Code source).
    Le texte du paragraphe n'est pas supprimé, mais la police Redacted l'a masqué.
    Pratique, si vous en avez assez du sempiternel Lorem ipsum dolor sit amet — il y a bien le schnapsum, mais on s'en lasse encore plus vite...

    23 téléchargements

       (2 avis)

    Mis à jour

  17. Exporter une copie fonctionnelle de son site

    Le bouton "Exporter les données" du menu "Configuration" permet d'exporter les répertoires "site/data" (la "base de données" du CMS) et "site/files" (les images ou autres fichiers que vous avez montés sur le serveur) sous la forme d'une archive zippée.
    Mais pourquoi ne pas exporter en un clic une copie intégrale de son site pour le réinstaller ultérieurement ou pour le transférer d'un hébergeur à un autre ?
    Remplacez seulement le fichier core/module/config/config.php par le fichier joint.
    NB : Pour une réinstallation à une autre adresse, pensez à corriger le chemin de RewriteBase à la ligne 11 du fichier .htaccess général, à la racine de votre répertoire d'installation.

    3 téléchargements

       (0 avis)

    Mis à jour

×