Invité

[Module] template-lightbox pour Tinymce

Messages recommandés

Invité   
Invité

template-lightbox pour Tinymce

Voir le fichier

IMPORTANT:
Toute utilisation de ce plugin sur votre site par vous même le sera à vos risques et péril, en aucun cas l'auteur de celui ci ne sera tenu pour responsable en cas de problème dans son utilisation faite par vous même et sous votre entière responsabilité.

 

Nota :

Ce module de template ( thème ) vous permettra d'intégrer des images cliquable dans vos sujets et qui lorsque l'image sera cliquée ouvrira celle ci à la façon des images que l'on trouve dans une galerie, dans une grande fenêtre nommée " lightbox "; Il s'incorporera parfaitement avec les modèles de templates popur tinymce incorporés dans les dernières versions du cms Zwii

Il est 100% fiable et indexe un site dans son intégralité.

 

Comment utiliser ce module :

Décompressez le zip et ne garder que les fichiers image_vide.png et lightbox.html et suivez la procédure ci dessous

 

 

Envoyez le fichier lightbox.html dans le dossier template du tinymce ( /core/vendor/tinymce/templates/ )
 

Déclarez ce template dans le init.js du tinymce ( /core/vendor/tinymce/init.js )
 

dans le init.js recherchez "  // Templates  " et ajoutez juste comme ci dessous ceci:
    // Templates
    templates: [
        {
            title: "lightbox",
            url: baseUrl + "core/vendor/tinymce/templates/lightbox.html",
            description: "Une image qui s'ouvre dans une lightbox."
        },
 

Actualisez le tinymce et normalement vous devriez voir apparaître votre nouveau template
 

Cliquez dans la zone d'édition et choisissez ce template dans la barre d'outil du tinymce
 

Cliquez sur l'image provisoire affichée et allez choisir l'image voulue ( vous pouvez bien entendu la redimensionner si besoin était )

Un texte est accolé à l'image pour le cas ou vous souhaiteriez ajouter d'autres image dans votre page, il n'est là que pour servir de répère.

image_vide.png.187666000d4c8cccbd54b50c3f37e38f.png


Une fois ceci fait, soit vous effacez la partie texte si vous ne voulez qu'une seule image ouverte dans une lightbox ou alors ajouter autant d'autres que désiré en réalisant la même procédure qu'expliquée aux points n°5 à n°6 etc...

Bien entendu vous devez effacer le fameux texte affiché qui n'est là que pour vous servir de repère visuel.

 

Puis une fois satisfait de votre travail vous enregistrez la page normalement.

Enjoy les amis

Roger nounours

image_vide.png


 

Modifié par Invité

Partager ce message


Lien à poster
Partager sur d’autres sites
cybertaf    106

Merci pour cette excellente solution !

Je propose quelques modifications :
une image vide déposée dans /templates avec les instructions dessus.

un fichier lightbox un peu modifié :

<a href="#" data-lity><img src="core/vendor/tinymce/templates/image_vide.png"></a> 

 

Ci-joint mes fichiers dans une archive.


 

 

plugin_lightbox.zip

Modifié par cybertaf
Update zip archive

Partager ce message


Lien à poster
Partager sur d’autres sites
Invité   
Invité
il y a 55 minutes, cybertaf a dit :

Je propose quelques modifications :
une image vide déposée dans /templates avec les instructions dessus.

 

Comme nous l'avions évoqué par mp ensemble quand tu as fait le test, et en retour suggéré cette solution pour l'image, je viens te demander l'autorisation de mettre à jour mon plugin ( n'ayant pas eu le temps de le faire entre deux ) en utilisant l'image que tu as jointe dans cette mise à jour.

 

Excellent retour de test de ta part cybertaf et aussi superbe amélioration qui tu y apportes avec ta petite contribution. :thumbsup:

Partager ce message


Lien à poster
Partager sur d’autres sites
Invité   
Invité

Un léger petit problème à corriger dans le texte image :

 

image_vide.png.fcd227b1cc9792bc2bab3847dfa2798f.png

Remplacer cette image par une miniature n'est pas possible car pour choisir une image il faut clique sur le bouton image du tiny;

et si l'on met une adresse web d'une image c'est pareil.

 

La solution est toute simple, modifier le texte de l'image et ensuite aller chercher son image soit sur le gestionnaire de fichier, soit en indiquant son adresse web, puis deux solutions pour la redimensionner avant d'enregistrer la page :

-  Soit une fois choisie l'image, on met alors dans la boite de dialogue la taille que l'on souhaite pour la transformer en une miniature dans la page où sera postée l'image.

-  Soit une fois l'image incluse dans le texte on la redimensionne avec les poignées de redimensionnement sur un clic de l'image

 

Le code modifié lui dans le fichier html marche nickel pour le plugin, c'est même plus " propre" que le mien :)

 

 

Partager ce message


Lien à poster
Partager sur d’autres sites
cybertaf    106

 

il y a une heure, Roger nounours a dit :

Remplacer cette image par une miniature n'est pas possible car pour choisir une image il faut clique sur le bouton image du tiny;

et si l'on met une adresse web d'une image c'est pareil.

Si si c'est possible, j'ai fait un petit


En revanche, il m'a fallu changer le chemin vers l'image qui est différent d'un xampp local en

<a href="#" data-lity><img src="../../core/vendor/tinymce/templates/image_vide.png"></a>

 

vokoscreen-2018-03-08_17-07-58.mp4

Modifié par cybertaf

Partager ce message


Lien à poster
Partager sur d’autres sites
Invité   
Invité

En regardant ta vidéo attentivement je m'apperçois qu'avec ta solution ( qui dans un zwii normal et son RFM n'existe pas, en effet les miniatures des images sources elles sont dans un autre dossiers non visible à la sélection d'une image ) que pour une image qui sera affichée en grandeur normale tu as crée une miniature de la même image et tu as mis ces deux images dans le dossier  " Source " des images...

trac1.thumb.png.335b0465f70aabc0d17ffadd2c0e47b2.png

 

Oui c'est possible de faire avec ta solution mais celà à deux gros désavantages:

 

1° il te faut créer la miniature de l'image qui sera affichée ensuite en taille réelle et la joindre à celle qui est l'image originale

2° tu alourdi ainsi le dossier " source " mais aussi le dossier " thumb " ( car lorsque tu envoie une image dans le dossier source, RFM en crée systématiquement sa miniature dans l'autre dossier ( ceci pour ceux qui veulent afficher dans le RFM l'architecture de leur images sous forme de minatures )

Car en plus de ton image originale en taille réelle, ce n'est pas une minature mais deux qui sont stockées sur l'espace web, et leurs poids en conséquence bien entendu ;)

 

 

Affichage en mode miniature dans les RFM ( ce sont les images que rfm crée dans son dossier thumb pour les afficher dans son interface )

trac4.thumb.png.d014826c41fe341252edea18fe1b757e.png

 

Et ton affichage en mode " Vue par liste " sur ta vidéo

trac2.thumb.png.6382f114d40cfcd903321c86a1dd937e.png

 

trac3.thumb.png.16bf0991eb7224eca8c37b17479f9147.png

 

Tandis que le tuto original couplé à ta seule image lui soit va chercher une image déjà hébergée par le RFM et ensuite tu en règle la taille toi même avec a méthode décrite pour ce faire dans mon dernier message ne crée pas lui une miniature supplémentaire puisque qu'il l'a déjà fait avec l'image original lors du premier import.

 

Tandis que dans le cas ou si tu veux mettre ta miniature dans le même dossier que l'image à afficher ensuite en taille réelle il te faudra alors ( pour alléger le fameux poids des miniatures crées d'office par rfm ) aller dans le dossier thumb et supprimer la miniature de la fameuse autre miniature ;)

 

Et avec la mise à jour fait, un seul clic suffit maintenant pour aller chercher son image et la régler en taille avant d'appuyer sur le bouton enregistrer la page

 

Cela n'empêche pas que ta solution est sans conteste fiable bien entendu :)

 

Partager ce message


Lien à poster
Partager sur d’autres sites
cybertaf    106

Tu as raison, mon épouse, toujours très pragmatique, m'a aussi indiqué préférer redimensionner l'image pour faire une miniature ce qui n'est pas faux...

 

Ensuite les miniatures créées dans RFM sont des miniatures de gestion qui n'ont peut-être pas la taille que l'on souhaite, et de toute manière on parle de quelques kilos :grin:

 

Partager ce message


Lien à poster
Partager sur d’autres sites
Invité   
Invité
il y a une heure, cybertaf a dit :

Ensuite les miniatures créées dans RFM sont des miniatures de gestion qui n'ont peut-être pas la taille que l'on souhaite, et de toute manière on parle de quelques kilos

 Oui mais tu additionnes quelques ko par autant d'images que l'on désire mettre en lightbox dans un zwii ( imagine un utilisateur prolifique en textes+images ) à la fin du obtiens des mo puis au final...

 

Plus nous faisons en sorte de maintenir le zwii ultra léger dans son espace occupé chez ses utilisateurs ( je parle de ceux qui développent justement les petits plus pour Zwiicms ), plus nous contribuons à son succès de cms parmi les plus légers et si possible les plus facile à utiliser pour une personne qui n'y connaît rien du tout :)

 

Au passage, mes hommages et salutations à Madame qui est de bons conseils il me semble, tu as bien de la chance de pouvoir discuter de vie voix de la chose pratique ou pas :)

Partager ce message


Lien à poster
Partager sur d’autres sites
cybertaf    106

Oui ce sera fait, elle est convertie à ZWii et c’est le CMS qu’elle préfère et de très loin.  

 

En effet parfois c’est bien d’avoir un avis de candide eń direct.  

Partager ce message


Lien à poster
Partager sur d’autres sites

Créer un compte ou se connecter pour commenter

Vous devez être membre afin de pouvoir déposer un commentaire

Créer un compte

Créez un compte sur notre communauté. C’est facile !

Créer un nouveau compte

Se connecter

Vous avez déjà un compte ? Connectez-vous ici.

Connectez-vous maintenant

  • Contenu similaire

    • Par trobert
      Salut
      Je découvre Zwii. Très chouette..
      Correspond tout à fait à une utilisation minimaliste (OVH, 10Mo).
      Accessible à des novices.
      Beau boulot
       
      Ma question : comment ajouter une image dans le bandeau, sous le titre ?
      A+
    • Par Marie-Anne
      Hello les amis
      Si je mets à jour mon petit Zwii par l'administration je me retrouve sur la page d'accueil du blog avec une erreur 500 (page blanche) 
      Une idée ? 
      Seule le module blog bug pour moi
    • Par Marie-Anne
      Bonjour à tous

      Je vous présente le site de la ferme bio de mon épouse dont je suis le gestionnaire : la ferme Du-Pâquis Fleury
       
      Il tourne sous la dernière version de Zwii avec quelques modifications simple pour l'optimisation SEO et hébergé chez o2switch.
       
      Habitué depuis un moment à un autre CMS sans base de données Pluxml de son nom Je me suis tourné vers Zwii, car il me semble plus moderne.

      Je suis agréablement surpris de la simplification du travail avec Zwii, de son optimisation et du respect des standards du W3C.