GIFs de Discourse

:discourse2: Resumen Discourse Gifs agrega un botón al editor que te permite buscar gifs y agregar fácilmente el mejor a tu publicación.
:hammer_and_wrench: Enlace al Repositorio https://github.com/discourse/discourse-gifs
:open_book: ¿Nuevo en los Temas de Discourse? Guía para principiantes sobre el uso de los Temas de Discourse

Instalar este componente de tema

Características

Después de buscar, obtienes un muro de gifs relacionados con desplazamiento infinito:

recording

Hacer clic en uno lo inserta en tu editor actual, que se ve así:

shut up and take my money GIF by Product Hunt

Esto se basa fuertemente en una antigua bifurcación de ReplyGif: Agregar GIF de reacción fácilmente, así que gracias a @cpradio.

Las grandes diferencias son:

  • Puede usar webp animado en lugar de gifs, por lo que es mucho más eficiente en cuanto al ancho de banda.

  • Es un componente de tema, por lo que es mucho más fácil de instalar y actualizar.

  • Ofrece la opción de usar la API de Giphy o la API de Tenor.

  • Desplazamiento infinito para los resultados.

  • Los gifs resultantes se descargan a Discourse utilizando nuestra protección nativa contra degradación. Puedes desactivar este comportamiento usando la configuración existente si el espacio es una preocupación.

  • No es necesario configurar un proxy para HTTPS con nginx.

Obtener una clave de API de Giphy

Para que el componente funcione, debes visitar Dashboard | GIPHY Developers y hacer clic como se muestra:

Rellena el formulario y la clave de API se mostrará como:

Obtener una clave de API de Tenor

Obtén esa clave en el sitio oficial de Tenor: GIF API - Mejor, más rápido y gratis | Obtén tus GIFs con Tenor

Después, visita la página del componente de tema en Discourse y rellena la configuración, por ejemplo:

Configuración

Nombre Descripción
proveedor de api ¿Qué proveedor de GIFs debemos usar?
clave api giphy GIPHY: Clave de API
formato de archivo giphy GIPHY: Formato de imagen a usar. WEBP tiene archivos más pequeños que cargan más rápido, mientras que GIF proporciona compatibilidad con navegadores antiguos.
calificación de contenido giphy GIPHY: Calificación de contenido para los resultados de búsqueda. Encuentra más información en https://developers.giphy.com/docs/optional-settings#rating .
idioma giphy GIPHY: Idioma a usar en la búsqueda. Se utiliza para adaptar la búsqueda a contenido regional. Establece el idioma predeterminado de tu foro.
limitar resultados de búsqueda infinita Limita el número de resultados de GIF devueltos a medida que el usuario se desplaza infinitamente para evitar la limitación de tasa de la API.
límite de resultados máximos Tenor y GIPHY: Cuando “limitar resultados de búsqueda infinita” está habilitado, buscaremos hasta obtener este número máximo de resultados de GIF. Cada llamada a la API recupera 24 resultados, por ejemplo, 240 Límite Máximo: 240 / 24 = 10 llamadas a la API.
clave api tenor Tenor: Clave de API V2. Las instrucciones para obtener una se encuentran en Discourse Meta - Discourse Gifs .
clave de cliente tenor Tenor: (opcional) cadena especificada por el cliente que representa la integración
detalle de archivo tenor Tenor: Formato de imagen a usar
filtro de contenido tenor Tenor: Nivel de seguridad de contenido para los resultados de Tenor. Encuentra más información en Guías de la API de Tenor .
país tenor Tenor: Código de país de dos letras de origen para la solicitud. Encuentra tu código de país en Wikipedia - ISO_3166-1 .
idioma tenor Tenor: Idioma a usar en la búsqueda. Se puede proporcionar un código de país (opcional) para diferenciar entre dialectos.
Traducción Predeterminado
gif.modal_title Buscar GIFs
gif.query Término
gif.insert Insertar Imágenes Seleccionadas
gif.composer_title Buscar GIFs
gif.no_results Ingresa una palabra clave en el cuadro de entrada de arriba para buscar GIFs.
gif.bad_api_key Clave de API de $api_provider no válida. Administradores del sitio, por favor verifica tu clave y/o tu cuenta de $api_provider.
gif.error_rate_limit Hemos alcanzado nuestros límites de tasa de API de $api_provider. Por favor espera e intenta nuevamente más tarde. Si este problema persiste, contacta a tu administrador del sitio.
gif.error_search_too_long Por favor acorta tu consulta de búsqueda a menos de 50 caracteres e intenta nuevamente.

:discourse2: ¿Alojado por nosotros? Los componentes de tema están disponibles para usar en nuestros planes Estándar, Empresarial y de Empresa.

84 Me gusta

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 Me gusta

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

3 Me gusta

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

1 me gusta

image

1 me gusta

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 me gusta

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

3 Me gusta

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

4 Me gusta

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

3 Me gusta

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 Me gusta

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

8 Me gusta

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 Me gusta

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 Me gusta

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

4 Me gusta

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

image

10 Me gusta

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


Thanks

1 me gusta

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 Me gusta

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 Me gusta

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

8 Me gusta

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

4 Me gusta