Gifs de Discourse

||||
-|-|
:discourse2: | Resumen | Discourse Gifs añade 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 temas de Discourse

Instala este componente de tema

Funciones

Después de buscar, obtienes una pared de desplazamiento infinito de gifs relacionados:

recording

Al hacer clic en uno, se 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: Adding reaction GIF easily, 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 para el ancho de banda.

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

  • Ofrece la elección de la API de Giphy o la API de Tenor.

  • Desplazamiento infinito para los resultados

  • Los gifs resultantes se descargan en Discourse utilizando nuestra protección nativa contra la corrupción de bits. Puedes deshabilitar este comportamiento usando la configuración existente si el espacio es una preocupación.

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

Obtener una clave de API de Giphy

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

Completa 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 - Better, Faster & Free | Get Your GIFs with Tenor

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

Configuración

Nombre Descripción
proveedor de api ¿Qué proveedor de GIF debemos usar?
clave de api de giphy GIPHY: Clave de API
formato de archivo de 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.
clasificación de contenido de giphy GIPHY: Clasificación de contenido para los resultados de búsqueda. Encuentra más información en https://developers.giphy.com/docs/optional-settings#rating .
localización de giphy GIPHY: Idioma a usar en la búsqueda. Se utiliza para adaptar la búsqueda al contenido regional. Establécelo en la localización predeterminada de tu foro.
limitar resultados de búsqueda infinita Limita el número de resultados de GIF devueltos mientras el usuario se desplaza infinitamente para evitar la limitación de la tasa de la API.
límite máximo de resultados Tenor & 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 de api de tenor Tenor: Clave de API V2. Las instrucciones para obtener una se pueden encontrar en Discourse Meta - Discourse Gifs .
clave de cliente de tenor Tenor: (opcional) cadena especificada por el cliente que representa la integración
detalle de archivo de tenor Tenor: Formato de imagen a usar
filtro de contenido de tenor Tenor: Nivel de seguridad del contenido para los resultados de Tenor. Encuentra más información en Guías de la API de Tenor .
país de tenor Tenor: Código de dos letras del país de origen de la solicitud. Encuentra tu código de país en Wikipedia - ISO_3166-1 .
localización de tenor Tenor: Idioma a usar en la búsqueda. El código de país (opcional) se puede proporcionar 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 anterior para buscar GIFs.
gif.bad_api_key Clave de API de $api_provider no válida. Los 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 inténtalo de nuevo 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 inténtalo de nuevo.

:discourse2: ¿Alojado por nosotros? Los componentes de tema están disponibles para usar en nuestros planes Standard, Business y Enterprise.

84 Me gusta

¡Hola @Heather_Dudley!

He agregado una nueva configuración de sitio para que puedas forzar al componente a usar el formato GIF en lugar de WebP.

Ten en cuenta que esto ocupa más del doble de espacio en disco/ancho de banda de red y tiene menor calidad.

Este GIF aquí:

GIF: 3.5 MB
giphy

WEBP: 1.4 MB
Detective Pikachu Reaction GIF

MP4: 1 MB

AVIF: 276.8 KB

Para todos los demás, ¡he añadido el enfoque automático en el modal de búsqueda!

17 Me gusta

¡Genial, muchas gracias! Estaba buscando una función así :slight_smile:

3 Me gusta

¿Dónde está la configuración, @Falco? No he podido encontrarla para activarla.

1 me gusta

1 me gusta

Vale, entonces no soy ciego, no tengo esa opción. Solo tengo la clave de la API:

Repositorio al que estoy vinculado: https://github.com/discourse/discourse-gifs/tree/giphy

1 me gusta

¡Oh, estás instalado en la rama antigua! Vuelve a instalarlo usando la rama principal en GitHub - discourse/discourse-gifs · GitHub

3 Me gusta

¡Aaaah, eso lo solucionaría! Gracias. No prevé problemas, ¡pero te avisaré si tengo alguno!

4 Me gusta

¿No es posible utilizar la plataforma Tenor de Google? Después de que Facebook adquiriera Giphy, dejé de usarlo y cambié a Tenor.

3 Me gusta

Este componente usaba Tenor en la primera versión, pero pasé a Giphy porque usar GIFs en formato WEBP es mucho mejor para la usabilidad que otros formatos. Además, Tenor no admite GIFs en formato WEBP.

4 Me gusta

Irónico, considerando quién creó el formato WebP y quién ahora es dueño de Tenor.

8 Me gusta

¿Quizás van directamente por los avif animados? Ya están disponibles en Chrome y pronto estarán en todos los navegadores modernos.

Lo he añadido en la publicación de arriba; el tamaño del archivo es increíble:

5 Me gusta

¿Cómo va el desarrollo de ese formato? ¿Cuánto crees que tardarán otras empresas en adoptarlo (incluido Discourse :wink:)?

2 Me gusta

Discourse puede soportarlo fácilmente tan pronto como haya soporte en los navegadores: AVIF image format | Can I use... Support tables for HTML5, CSS3, etc

4 Me gusta

¡Gracias a @eviltrout, ahora renderizamos el botón de GIF en una mejor ubicación en móviles, así que esto ya no volverá a ocurrir!

10 Me gusta

Gracias @Falco, ¿es posible ocultar el botón de GIF mientras se previsualiza el mensaje?


Gracias

1 me gusta

No estoy muy familiarizado con los componentes de temas, ¿es posible activar esto solo en una categoría?

Tenemos una categoría aleatoria / fuera de tema / divertida donde esto sería un gran añadido, pero si lo añado a todas las categorías, se desatará el caos total :rofl:

4 Me gusta

Podrías intentarlo con CSS, pero como el compositor permanece abierto cuando navegamos por el foro, no estoy seguro de que funcione al 100%.

Sería algo así:

:not(.category-your_category_id) .d-icon-discourse-gifs-gif-icon {
    display: none
}
4 Me gusta

¡Buena idea! Se añadió en la última versión, ¡por favor actualiza!

8 Me gusta

¡Esto es increíble! Buen trabajo, ¡acabo de agregarlo a mi foro!

4 Me gusta