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

¡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