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

3 discussions

  • Bernard

    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.

    Reply to this 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 ?

    Reply to this 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

    Reply to this message

Add a comment

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 / PostgreSQL
  • 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 apparait.

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.

Who are you?
[Log in]

To show your avatar with your message, register it first on gravatar.com (free et painless) and don’t forget to indicate your Email addresse here.

Enter your comment here

This form accepts SPIP shortcuts {{bold}} {italic} -*list [text->url] <quote> <code> and HTML code <q> <del> <ins>. To create paragraphs, just leave empty lines.

Add a document

Follow the comments: RSS 2.0 | Atom