GIFs Discourse

:discourse2: Résumé Discourse Gifs ajoute un bouton dans l’éditeur qui vous permet de rechercher des gifs et d’ajouter facilement le meilleur à votre publication.
:hammer_and_wrench: Lien vers le dépôt https://github.com/discourse/discourse-gifs
:open_book: Nouveau sur les thèmes Discourse ? Guide pour débutants sur l’utilisation des thèmes Discourse

Installer ce composant de thème

Fonctionnalités

Après la recherche, vous obtenez un mur infini de gifs liés :

recording

En cliquant sur l’un d’eux, il est inséré dans votre éditeur actuel, qui ressemble à ceci :

shut up and take my money GIF by Product Hunt

Ceci est fortement basé sur une ancienne fork de ReplyGif : Ajouter facilement des GIF de réaction, merci donc à @cpradio.

Les principales différences sont :

  • Il peut utiliser des webp animés au lieu de gifs, ce qui est beaucoup plus efficace pour la bande passante.

  • C’est un composant de thème, donc il est beaucoup plus facile à installer et à mettre à jour.

  • Il offre le choix entre l’API Giphy ou l’API Tenor.

  • Défilement infini pour les résultats

  • Les gifs résultants sont téléchargés sur Discourse en utilisant notre protection native contre la dégradation. Vous pouvez désactiver ce comportement en utilisant les paramètres existants si l’espace est un problème.

  • Pas besoin de manipuler nginx pour configurer un proxy pour HTTPS

Obtenir une clé API Giphy

Pour que le composant fonctionne, vous devez visiter Dashboard | GIPHY Developers et cliquer comme ceci :

Remplissez le formulaire et la clé API sera affichée comme ceci :

Obtenir une clé API Tenor

Obtenez cette clé sur le site officiel de Tenor : GIF API - Mieux, Plus rapide et Gratuit | Obtenez vos GIF avec Tenor

Ensuite, visitez la page du composant de thème dans Discourse et remplissez les paramètres, par exemple :

Paramètres

Nom Description
api provider Quel fournisseur de GIF devons-nous utiliser ?
giphy api key GIPHY : Clé API
giphy file format GIPHY : Format d’image à utiliser. WEBP a des fichiers plus petits qui se chargent plus rapidement, tandis que GIF assure la compatibilité avec les anciens navigateurs.
giphy content rating GIPHY : Classification du contenu pour les résultats de recherche. Plus d’informations sur https://developers.giphy.com/docs/optional-settings#rating .
giphy locale GIPHY : Langue à utiliser pour la recherche. Utilisé pour adapter la recherche au contenu régional. Définissez-le sur votre langue par défaut du forum.
limit infinite search results Limitez le nombre de résultats GIF renvoyés lorsque l’utilisateur fait défiler infiniment pour éviter la limitation du taux d’appels API.
max results limit Tenor & GIPHY : Lorsque “limit infinite search results” est activé, nous chercherons jusqu’à obtenir ce nombre maximum de résultats GIF. Chaque appel API récupère 24 résultats, par exemple 240 Limite max : 240 / 24 = 10 appels API .
tenor api key Tenor : Clé API V2. Les instructions pour l’obtenir se trouvent dans Discourse Meta - Discourse Gifs .
tenor client key Tenor : (optionnel) chaîne spécifiée par le client représentant l’intégration
tenor file detail Tenor : Format d’image à utiliser
tenor content filter Tenor : Niveau de sécurité du contenu pour les résultats Tenor. Plus d’informations dans Guides de l’API Tenor .
tenor country Tenor : Code pays à deux lettres d’origine pour la requête. Trouvez votre code pays sur Wikipedia - ISO_3166-1 .
tenor locale Tenor : Langue à utiliser pour la recherche. Un code pays (optionnel) peut être fourni pour différencier les dialectes.
Traduction Défaut
gif.modal_title Rechercher des GIF
gif.query Terme
gif.insert Insérer les images sélectionnées
gif.composer_title Rechercher des GIF
gif.no_results Entrez un mot-clé dans la zone de saisie ci-dessus pour rechercher des GIF.
gif.bad_api_key Clé API $api_provider invalide. Administrateurs du site, veuillez vérifier votre clé et/ou votre compte $api_provider.
gif.error_rate_limit Nous avons atteint nos limites de taux d’appels API $api_provider. Veuillez attendre et réessayer plus tard. Si ce problème persiste, contactez votre administrateur de site.
gif.error_search_too_long Veuillez raccourcir votre requête de recherche à moins de 50 caractères et réessayer.

:discourse2: Hébergé par nous ? Les composants de thème sont disponibles pour une utilisation sur nos offres Standard, Business et Enterprise.

84 « J'aime »

Hey @Heather_Dudley,

I added a new site setting to allow you to force the component to use the GIF format instead of webp.

Just be aware that it uses more than double the disk space / network bandwidth while having less quality.

This gif here:

GIF: 3.5MB
giphy

WEBP: 1.4MB
Detective Pikachu Reaction GIF

MP4: 1MB

AVIF: 276.8 KB
pikachu.avif|

For everyone else I added autofocus on the search modal!

17 « J'aime »

awesome, thank you so much! was looking for such a feature :slight_smile:

3 « J'aime »

Where is the setting, @Falco? I haven’t been able to find it to enable it.

1 « J'aime »

image

1 « J'aime »

Okay, I am not blind then, I don’t have that option. I just have the api key:

repository I’m linked to: https://github.com/discourse/discourse-gifs/tree/giphy

1 « J'aime »

Oh you are installed into the old branch, re-install using the main branch at GitHub - discourse/discourse-gifs

3 « J'aime »

Aaaah, that would do it. Thank you. I don’t forsee issues, but I’ll let you know if I have any!

4 « J'aime »

Is it not possible to use Google’s Tenor platform? After Facebook acquired Giphy, I stopped using it and switched over to Tenor.

3 « J'aime »

This component used Tenor in the first version, but I moved to Giphy because using WEBP gifs is a lot better for usability over other formats. And Tenor doesn’t support WEBP gifs.

4 « J'aime »

Ironic considering who created the webp format, and who now owns Tenor.

8 « J'aime »

Maybe they go straight for animated avif ? It’s already live on Chrome, and will be soon everywhere modern.

I added it to this post above, the file size is amazing:

5 « J'aime »

How is development of that format going? How long do you think it’ll take for other companies to adopt it (including Discourse :wink:)?

2 « J'aime »

Discourse can support it easily as soon as browser support happens: Can I use... Support tables for HTML5, CSS3, etc

4 « J'aime »

Thanks to @eviltrout we now render the GIF button in a better place in mobile so this won’t happen anymore!

image

10 « J'aime »

Thanks @Falco , is it possible to hide the gif button while previewing the message?


Thanks

1 « J'aime »

I’m not that familiar with theme components, is it possible to enable this on only one category?

We have a random / off topic / fun category where this would be a brilliant addition, but if I add it to all categories then all hell will let loose :rofl:

4 « J'aime »

You could try with css but since the composer stays open when we navigate on the forum, I’m not sure it would work 100%

It would be something like this

:not(.category-your_category_id) .d-icon-discourse-gifs-gif-icon {
    display: none
}
4 « J'aime »

Good idea. Added it in last version, please update!

8 « J'aime »

This is awesome! Nice job, just got this added to my forum!

4 « J'aime »