Plugin Frimousses v2

Un plugin qui modernise la contribution historique en remplaçant les raccourcis ASCII par des emoiji unicode.

Le plugin propose la conversion à la volée, lors de l’affichage, des raccourcis ASCII traditionnellement utilisé pour représenter des smileys en saisie texte par l’emoji unicode adapté.

L’utilisation d’emoji à la place d’images utilisées dans les anciennes versions du plugin permet un rendu plus léger et rapide (un emoji n’est que du texte, représenté par 2 ou 4 octet en UTF8).

Le rendu sera différent selon les plateformes sur lesquelles le texte est visualisé. En contrepartie, et par conséquent, cela utilise le rendu auquel l’utilisateur est habitué.

Dans la barre d’outils de saisie de texte une nouvelle palette apparait permettant d’insérer un smiley si on n’est pas habitué aux raccourcis textes ou de voir quels raccourcis sont supportés

Les smileys sont toujours insérés au format raccourci texte dans l’édition

Mais ils sont bien rendus en emoji.

Attention : la palette de la barre d’outils d’édition utilise des images, elle, pour des raisons techniques. Elle ne représente pas le rendu final qui varie, mais est simplement une représentation parmi d’autres de l’expression qu’on souhaite rendre.

Rendu HTML et styles

Les smileys sont insérés dans une balise <b> avec une classe .smiley :

<b class="smiley" title="PTDR">&#128516;</b>

Il est ainsi possible de personnaliser le rendu pour par exemple grossir un peu les smileys par rapport au reste du texte :

.smiley {
	font-size: 1.2em;
	line-height: 1;
}

Discussion

4 discussions

  • Thierry

    Bonjour à tous,
    Est-ce qu’une mise à jour du plugin vers spip 4.2.2 est prêvue ? Merci, amicalement, Thierry

    Répondre à ce message

  • Bonjour,
    Le plugin fonctionne très bien. Super !
    Je voudrais agrandir la taille des smiley, mais je ne sais pas où insérer le code :
    .smiley
    font-size : 1.2em ;
    line-height : 1 ;

    Merci d’avance.

    Répondre à ce message

  • 1

    Hello

    Bizarre j’ai un icône vide dans la barre d’édition.
    Dans le code interprété, je vois
    background-image: url('data:image/svg+xml;base64,');

    Pas de problème pour le sous-menu, là j’ai bien les icônes.
    Là j’obtiens
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4b etc...);

    Etonnant, non ?

    Répondre à ce message

  • 1

    Bonjour.

    J’ai juste une question : pourquoi ce choix des balises b à la place de span ?

    • Parce que c’est moins de code, et que <b> ne porte pas de sémantique (contrairement à <strong> et qu’il n’influe pas sur la mise en forme du smiley ?

      Mais si ça pose des problème on peut basculer sur du span assez simplement je pense

    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