Texte agrandi ou pleine page

Le plugin boutonstexte

Un plugin client qui pose ou équipe tout seul des boutons dans le texte pour gérer la taille des caractères ou passer le texte en pleine page

Motivations

Insérer des boutons dans le texte pour

  • augmenter/diminuer la taille de la police de caractères,
  • voir le texte en pleine page.

Tout cela

  • en cliquant juste sur installer le plugin sans toucher à rien d’autre

Installation

C’est un plugin. Il faut donc être en 1.9

Tout se fait coté client en javascript new wave, il faut donc une 1.9.2 sinon avoir le plugin jQuery

Le zip pour spip 1.9.0 à 2.1.x boutonstexte des snapshots de la zone ou le zip pour spip 3.0.0 à 3.2.x boutonstexte des snapshots de la zone fournit un dossier plugins/boutonstexte/ à poser dans votre spip/plugins/

Ensuite, allez dans configuration/administrer les plugins ( ecrire/?exec=admin_plugin ) et validez Boutons dans le Texte

Vous pouvez aussi l’obtenir en svn

Réglages

A priori aucun.

Par défaut, les boutons sont insérés dans un span de classe boutonstexte, chacun ayant sa propre classe textonly, textsizeup et textsizedown juste avant chaque élément de classe texte.

Il est aussi possible de spécifier soi même des boutons « fixes », il suffit qu’ils aient les classes textsizeup et textsizedown. Dans ce cas, boutonstexte n’insèrera pas de boutons avant les zones de texte et le click agira sur toutes ces mêmes zones.
Note au 24/12 : ce n’est que dans la version en développement et ça n’est pas encore fait pour le bouton « texte seulement »

Vous pouvez changer les images utilisées en icones.
izo propose des alternatives

Plusieurs règlages sont possible en affectant des propriétés de boutonstexte en javascript juste avant </head> comme par exemple, pour chercher toutes les zones de classe texte et pas seulement celles dans la div id contenu :

<script type="text/javascript">boutonstexte.selector = ".texte";</script>

Si vous êtes en 1.9.2 ou suivantes, installez cfg. Vous pourrez alors effectuer ces réglages directement depuis le lien donné dans administration plugins lorsque on ouvre le « chapitre » Boutons dans le texte. Cette méthode est conseillée, elle évite toute intervention dans le code.

Propriétés Défaut Description Notes
selector #contenu .texte Sélecteur jQuery/CSS des éléments affectés, défaut : les classes texte descendantes de l’id contenu
imgPath plugins/boutonstexte/images Chemin des icones
rate 1.2 Ratio (nombre réel) d’augmentation/diminution des tailles de police, le défaut correspond à 20%
txtOnly Texte seulement Titre du bouton pour n’afficher que le texte 1,2
txtBackSpip Retour à Spip Titre du bouton pour retour affichage complet 1
txtSizeUp Augmenter police Titre du bouton pour augmenter la taille des caractères 1,2
txtSizeDown Diminuer police Titre du bouton pour augmenter la taille des caractères 1,2
  1. Texte traduit (fr, de, it au 24/12), si affecté doit être en séquences Array javascript
  2. Mis à blanc comme boutonstexte.txtXXX = ""; : inhibe le bouton correspondant

Extensions

Ce plugin se marie très bien avec Crayons

Essayez l’édition pleine page :)

Discussion

54 discussions

  • 1

    Bonjour,

    J’utilise la version 1.9.2, mon propre squelette et je suis en local avec EasyPhp.
    Le plugin s’installe sans problème et ça fonctionne, bravo et félicitation pour cette idée de plugin, ça va éviter à certain(e)s de sortir la loupe.

    Alors mon soucis ;

    A+ A- et le texte seulement apparaissent en page d’accueil sur les deux premiers articles, je ne trouve pas ça utile et injuste pour les autres, je n’ai pas réussi à les effacer, pour la page article, les trois lascars sont sous le logo de l’article et je n’ai pas réussi à les déplacer dans le bloc de droite « boîte à outil ».

    Après avoir lu et relu et dans ma tête ça devient relou, toute cette page, je n’ai toujours pas compris ou et comment je peux faire, désolé de mon incompétence, mais puis-je avoir de l’aide.

    Merci

    • Il te suffit de restreindre le sélecteur, fais le avec cfg c’est beaucoup plus facile.

      Vu que chaque page a une classe associéé au <body> , tu peux par exemple restreindre ces boutons aux pages article en changeant ce sélecteur en

      .page_article #contenu .texte

      soit les éléments de clase texte dnas la div id contenu à l’intérieur d’une classe page_article

      Et voilà, le tour est joué !

      Par exemple, si tu les veux aussi dans les pages rubriques :
      .page_article .texte, .page_rubrique .texte
      devrait le faire, tu peux procéder par tatonnements.

    Répondre à ce message

  • 2

    Plugin très intéressant !

    Comme je ne suis pas fort en Javascript du tout j’ai besoin d’ aide pour faire ceci :
    -  ne pas afficher le bouton ’pleine page’ : je voudrais seulement avoir la possibilité d’agrandir et de diminuer
    -  positionner les boutons au-dessus de la page, comme c’est fait dans spip-contrib même
    -  agrandir/diminuer tout le contenu de l’article, c-à-d aussi le titre, le sous-titre, le chapo etc.

    Pourriez-vous me donner un coup de main ?

    Merci.

    • Comme indiqué de manière générale dans la doc ci-dessus, on inhibe en mettant le texte descritptif correspondant à blanc. Ici pour toi ça donne :

      <script type="text/javascript">boutonstexte.txtOnly = "";</script>

      à placer just avant le </head> dans le squelette inc-head.html ou les tiens propres.

      Pour positionner les boutons de manière unique comme ici sur contrib, il suffit que ton squelette les incorpore où tu veux et qu’ils possèdent la classe adéquate : textsizeup et textsizedown comme indiqué ci-dessus.
      ... mais regardes toi même le source de cette page :)

      			
      <li><img src="squelettes/images/fontsizeup.png" alt="fontsizeup" class="textsizeup" /></li>
      <li><img src="squelettes/images/fontsizedown.png" alt="fontsizedown" class="textsizedown" /></li>

      J’en profite pour indiquer à ceux qui utilise la 1.9.2 qu’un fond de configuration cfg est maintenant livré dans la version svn.

      Si vous installez donc le plugin cfg , la configuration de boutonstexte est accessible en quelques clicks depuis administration plugins !

    • Un simple remerciement pour cette contribution et les explications qui l’accompagnent. Le plugin complémentaire cfg. est vraiment très pratique pour les réglages.
      Encore merci.

    Répondre à ce message

  • 2

    J’ai installé ce plugin et il fonctionne bien. Par contre pour atteindre mon site à partir d’une recherche Google je reçois ce message : « boutonstexte a besoin de jQuery ! ».

    J’utilise SPIP 1.9.3 dev [9361] ; je suppose que ça ira.

    • Je suis perplexe ...

      Pourrais-tu donner ton url pour que je puisse voir ce qui se passe ?

    • joseluis

      Salut !

      J’ai ce problème, le message on voit parfois et aussi un problème avec explorer que parfois ne charge la page.

      J’ai trouvé que quand existe la cookie spip-session il n’y a pas de boutons sur firefox ni sur explorer.

      C’est le même problème avec un javascript (RuzzeBorders) que quand la cookie spip-session existe il ne fonctione pas.

      Mon site aulalibre.es avec SPIP 1.9.2a

    Répondre à ce message

  • 2

    Bonjour,

    Très sympa comme plug-in

    Mais pourquoi ne fonctionne t il pas sur les chapeaux d’articles voir les réponses aux articles ?

    Merci

    • Il peut le faire, il suffit d’intégrer leur classe dans le selecteur, c’est strictement comme du CSS, une liste séparée par virgules permet de correspondre à plusieurs classes/id/elements.

      Tu peux le faire par script comme indiqué ci-dessus ou dans le forum à plusieurs reprises. Si tu es en 1.9.2 tu peux aussi installer cfg et le configurer directement depuis le lien donné dans administration plugins lorsque tu ouvres le « chapitre » Boutons dans le texte.

      Dis nous si tu rencontres des problèmes pour ce faire.

    • Merci Toggg

      Je vais paraître idiot mais je ne trouve pas Cfg.

      J’ai vu pas mal d’article qui font référence à lui mais ou le télécharge t on ?

      Merci

    Répondre à ce message

  • 2
    nonofr91

    Bonjour toggg,

    voila je suis débutant et j’ai un probleme qui n’est peut etre pas lier directement à ton plugin.

    Je m’explique dans mon squelette article.html je souhaite utilisé ton plugin et un script de présentation du portfolio nomé lightbox.

    Quand je met les deux c’est lightbox qui fonctionne et pas le tien quand j’enleve lightbox le tien fonctionne.
    étant tres nul je ne sais pas si c’est un probleme de plusieur fichier css ou de plusieur js.

    Enfin pour ne pas parler dans le vent voici l’url en question enfin de m’aider :
    http://unna91.free.fr/spip.php?article22&var_mode=recalcul

    Merci d’avance a tous ceux qui pourront m’aider et même à ceux qui ne le pourront pas :-)

    N’oubliez pas, le savoir n’est progrés que si il est partagé par tous. Sinon il ne sert qu’a la domination.

    • Ah désolé ! Je n’ai pas vu passer ton message.

      L’incompatibilité provient du fait que lightbox utilise prototype qui redéfinit $() en écrasant celui de jQuery.

      On peut considérer ça comme un bug de boutonstexte qui devrait se protéger. Je corrige ça de suite et je te tiens au courant.

    • Voilà, c’est fait dans le svn. Ça devrait être compatible maintenant.

      Ça sera au train de 9H sur files.spip.org

      Préviens moi si ça ne va toujours pas.

    Répondre à ce message

  • 2
    aita peapea

    Bonjour, je ne m’en sors pas trop avec ce plugin :

    Je l’ai activé dans la partie privé,
    j’ai bien #INSERT_HEAD dans mon

    je suis sous spip192a

    pour voir, j’ai renommé mon repertoire squelette, et même avec la dist ça ne veut toujours pas tomber en marche.

    Quand j’affiche le source de la page résultat, j’ai bien ça :

    <script type="text/javascript">
    	var boutonstexte = new boutonsTexte({
    		'selector':'',
    		'imgPath':'plugins',
    		'txtOnly':'',
    		'txtBackSpip':'',
    		'txtSizeUp':'',
    		'txtSizeDown':''
    	});
    </script >

    qui a été rajouté, mais justement, ça ne me paraît pas être les bonnes valeurs.
    J’ai beau essayer de les redéfinir dans une ligne supplémentarie

    <script> </script>

    dans mon head, il ne veut rien entendre.

    vous auriez une piste ? Je peux vous transmettre mon squelette, mais on peut discuter à partir du squelette de la dist puisque ça ne fonctionne pas non plus avec elle.

    Mon site est malheureusement local.

    Amicalement,

    • ça parait très bizarre ... peux-tu préciser de quel système d’exploitation et de quel php il s’agit ?

      Aussi, as-tu cfg installé et es-tu passé par l’écran de config ?

      Si, oui, va dedans et supprime la config boutontexte, éventuellement.

    • aita peapea

      Ah ! Merci beaucoup. En effet, suite à l’installation de cfg, puis suppression de la config comme vous me l’avez indiqué...

      et bien ça marche maintenant, les boutons apparaissent et je peux redimensionner mon texte, même sur mon squelette.

      Superbe !

      Je vous remercie chaudement.

      Bonne nuit, ça y’est je peux me coucher :-)

    Répondre à ce message

  • 2

    Salut a tous, salut toggg,
    superbe contrib mais par contre les explications sont incomprehensible pour un débutant, ca fait une semaine que je me bats pour la faire fonctionner j’y arrive pas donc ma demande est simple qulequ’un peut-il me fournir svp le code à mettre sur chaque page ?

    exemple : sur la page qui contient le texte a agrandir >> mettre tel code
    sur le fichier .css >> mettre tel code
    etc...

    Mettre si possible un lien vers une page de demo ou on peut eventuellement recuperer la source, je dis ca pour eviter que les futurs debutants reposent les memes questions ici et sur les forums ;-))

    merci bcp
    Reyno

    • Il n’y a normalement pas de code à insérer... et surement pas sur chaque page. Le plugin a juste besoin d’être activé. Il est réglé pour les valeurs standards de la dist. Tu peux essayer en désactivant ton dossier squelettes/ , par exemple en le renommant pour voir.

      Il faut déjà vérifier que le plugin s’insert bien, tu dois avoir pour cela une balise #INSERT_HEAD dans ton entête et avoir jQuery. Par exemple, pour la dist, #INSERT_HEAD est dans inc-head.html qui est inclus dans chaque page. jQuery est par défaut en 1.9.2, en 1.9.1, il faut le plugin jquery.
      Si tu visualises le source de ta page depuis ton navigateur et que tu ne trouves pas boutonstexte, c’est surement que l’un ou l’autre te manque.

      Si boutonstexte est là mais que rien ne se passe, c’est que le sélecteur CSS sur lequel il est réglé ne correspond pas avec ton squelette, dans ce cas il suffit d’insérer avant </head> une ligne comme
      <script type="text/javascript">boutonstexte.selector = ".maclasse";</script>
      maclasse étant la classe des textes où tu veux les boutons.

      Mais tout cela a déjà été répété plusieurs fois ici dans les forums, on ne peut guère le dire plus simplement. Eventuellement, donne l’url de ton site et je pourrai jeter un oeil pour voir ce qui te manque.

      Et quand tu auras réussi, fais nous une explication plus simple, ce sera la bienvenue. Apparemment, je ne suis pas très doué pour ça.

    • Mettre si possible un lien vers une page de demo ou on peut eventuellement recuperer la source, je dis ca pour eviter que les futurs debutants reposent les memes questions ici et sur les forums ;-))

      Si ça peut aider, « bouton texte » est activé sur SPIP-Contrib. Pour ce qui est des squelettes voir pour exemple le code source de http://www.spip-contrib.net/squelet..., lequel est inclus systématiquement sur chaque page selon le mécanisme d’INCLURE de la dist. Et encore ce bout de code n’a été nécessaire que du fait du choix de ne pas répéter les boutons de « bouton texte » à chaque champ de texte dans la page, ce qui peut poser des problemes de mise en page.

      Sinon il n’y a rien d’autre à faire qu’activer le plugin (si #INSERT_HEAD est déjà présent), comme il est dit dans l’article

    Répondre à ce message

  • 5

    Bonjour,

    Je suis sous spip 1.9.1, j’utilise FF et le quelette Alternatives que j’ai personnalisé en composant un dossier personnel en suivant les recommandations à la lettre. J’ai installé jquerry.
    Les boutons fonctionnent bien avec la dist originale, mais n’apparaissent pas dans les articles avec le squelette Alternatives.
    J’ai installé sans problème d’autres plugins. Je ne crois pas que ces plugins soient à l’origine du problème puisqu’avec la dist originale tout fonctionne.
    C’est vraissemblablement dû au fait qu’Alternetine surcharge spip.
    Que puis-je faire ? Merci.

    • Il y a des chances que ce soit le sélecteur défaut qui ne convienne pas pour Alternatives, que je ne connais pas.

      Comme indiqué ci-dessus, par défaut c’est « #contenu .texte » à savoir les éléments de classe « texte » à l’intérieur de la div d’id « contenu ». Regarde quelle classe est affectée aux éléments que tu veux équiper des boutons et modifie ce sélecteur (identique à un sélecteur css) , par exemple, si ils ont la classe « foo », tu place dans inc-head.html, juste avant </head>

      <script type="text/javascript">boutonstexte.selector = ".foo";</script>

      Si tu n’y arrives pas, donnes un lien sur ta page pour voir comment c’est fait.

    • Bonjour et merci d’avoir répondu.
      Tout cela, pour moi c’est de l’hébreu. Je suis nouveau sous SPIP et c’est déjà miraculeux d’avoir réussi à mettre en ligne un site en se débattant avec le jargon de SPIP.
      J’ai vraiment essayé, mais en vain, d’obtenir quoi que ce soit.
      Je te communique donc l’adresse du site :
      http://bondouxjacky.free.fr/spip/

      Merci encore de ton aide.

    • Et bien pour toi ce serait « #bloc-contenu .texte » voire tout simplement « .texte »

      Ça te mettrait les boutons aussi dans ton sommaire, si tu ne les veux que dans les articles , ça fera

      « .article #bloc-contenu .texte »

      Vraiement, ce sont des sélecteurs CSS, comme dans les feulles de style, vu ton site, tu dois bien savoir ce que c’est ...

    • Miracle !

      J’ai enfin réussi à mettre en oeuvre boutonstextes !

      Alors j’explique pour les néophytes comme moi, car les spécialistes qui se donnent beaucoup de mal pour créer des plugins intéressants oublient un tout petit détail de rien du tout : expliquer clairement et précisément ce qu’il faut faire et comment il faut faire pour qu’ils fonctionnent.

      Pour le squelette Alternatives (super squelette !)

      -  Installer le plugin comme à l’accoutumée ne suffit pas. Il faut :

      Dans le sous-dossier personnalisé ( mon_theme par ex.) du dossier themes :
      -  Ouvrir le squelette article.html avec conTEXT, par ex.
      -  A la ligne 10 (à une ou deux lignes près) juste au-dessus de

      , écrire :
      -  

      <script type="text/javascript">boutonstexte.selector = ".texte";</script>

      Et miracle ça marche !

      C’est pourtant pas difficile à expliquer, et ça évite de passer des heures à chercher.

      Merci au concepteur en tout cas.

      Il me reste à trouver une soluce pour Crayon, car lui aussi refuse de fonctionner.

      Décidément, SPIP ça se mérite. C’est pas donné !

    • LIRE : A la ligne 10 (à une ou deux lignes près) juste au-dessus de </head>

      Encore un autre truc plutôt casse-pieds. Il faudrait un éditeur de texte digne de ce nom dans SPIP. On n’exige pas le Pérou mais tout de même, le moncde ne fonctionne pas que pour les puristes.

    Répondre à ce message

  • 2

    Bonjour, voila j’ai un petit problème avec ce plugin
    je suis sous spip 1.9.1 et j’utilise le squelette RECIT FP 1.5 beta

    le plugin affiche les icônes augmenter, diminuer la police... deux fois à la suite dans les articles et les brèves, http://necrontyre.ne.funpic.org/solartowerbeta/spip.php?article10
    je vous laisses aller voir.

    Mais dans la version imprimable des articles, il n’y a aucun problème a part un petit problème de positionnement pas très grave dont je vais m’occuper. Je vous laisse aller voir http://necrontyre.ne.funpic.org/solartowerbeta/spip.php?page=imprimer&id_article=10

    Si quelqu’un pouvait arranger ce problème ce m’aiderait beaucoup, merci.

    • Bonjour,

      Tu es victime du syndrome du double #INSERT_HEAD , un problème maintenant corrigé en 1.9.2 SVN.

      Simplement, dans tes squelettes, <INCLUREfond=inc/inc-headlang> possède déjà cet #INSERT_HEAD, tu ne dois pas le rajouter ailleurs dans ce cas

      ... et surtout pas après <body> , malheureux !

      Conclusion, vires cet #INSERT_HEAD après <body> dans squelettes/article.html , ça ira mieux. Vérifies que tu n’as pas d’autres xxx.html affecté du même problème.

      Au cas où cela est d’origine sur ce truc RECIT FP 1.5 beta , préviens les auteurs , ce serait sympa.

      Dis donc, c’est extrèmement désagréable ce popup quand on arrive sur ton site ... pas cool l’hébergeur :)

    • Un grand merci pour avoir répondus rapidement

      le balise #INSERT_HEAD n’est pas d’origine, c’est de moi =)
      Maintenant tout fonctionne sans problemme enfin à part un petit problemme de dispostion pas bien grave. :)

      L’hébergeur est un gratuit qui est de bonne qualitée niveau vitesse et un nombre de base mysql très convenable, la pub est génante mais bon faut faire avec.

      voila, encore merci
      a+

    Répondre à ce message

  • 1

    Bonjour,
    J’utilise ce plugin avec bonheur mais il semblerait qu’il y ait un conflit avec un autre plugin : soit avec Phpmyvisistes soit avec Lightbox, soit recherche_etendue.
    J’ai enlevé ces 3 qui n’étaient là que pour des tests et maintenant les boutons textes sont réapparus.
    dd

    • Bonjour,

      J’ai vérifié le code de ces 3 autres plugins , je ne vois pas où ils pourraient interagir.

      Pourrais-tu essayer en activant/désactivant d’isoler lequel fait ça ?

      Il faudrait aussi que tu précises quelle sont les versions de spip et des plugins concernés.

      Si je comprends bien , les boutons n’apparaissent pas.
      As-tu des messages d’erreur dans la console javascript ?

      Ce qui serait optimal lorsque ça arrive, c’est que tu puisses montrer la page en ligne ou sinon sauvegarder et me faire parvenir le source de la page obtenue (voir source da la page et un copier/coller). Tu peux me joindre par le site , en irc #spip sur FreeNode ou par la liste spip-zone@rezo.net ... et puis mon mail est malheureusement un peu partout sur le web :)

    Répondre à ce message

Ajouter un commentaire

Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :

  • Désactiver tous les plugins que vous ne voulez pas tester afin de vous assurer que le bug vient bien du plugin X. Cela vous évitera d’écrire sur le forum d’une contribution qui n’est finalement pas en cause.
  • Cherchez et notez les numéros de version de tout ce qui est en place au moment du test :
    • version de SPIP, en bas de la partie privée
    • version du plugin testé et des éventuels plugins nécessités
    • version de PHP (exec=info en partie privée)
    • version de MySQL / SQLite
  • Si votre problème concerne la partie publique de votre site, donnez une URL où le bug est visible, pour que les gens puissent voir par eux-mêmes.
  • En cas de page blanche, merci d’activer l’affichage des erreurs, et d’indiquer ensuite l’erreur qui apparaît.

Merci d’avance pour les personnes qui vous aideront !

Par ailleurs, n’oubliez pas que les contributeurs et contributrices ont une vie en dehors de SPIP.

Qui êtes-vous ?
[Se connecter]

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici

Ce champ accepte les raccourcis SPIP {{gras}} {italique} -*liste [texte->url] <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Ajouter un document

Suivre les commentaires : RSS 2.0 | Atom