Gifs do Discourse

:discourse2: Resumo Discourse Gifs adiciona um botão ao editor que permite pesquisar GIFs e facilmente adicionar o melhor ao seu post.
:hammer_and_wrench: Link do Repositório https://github.com/discourse/discourse-gifs
:open_book: Novo em Temas do Discourse? Guia para iniciantes sobre o uso de Temas do Discourse

Instale este componente de tema

Funcionalidades

Após pesquisar, você obtém uma parede infinita de GIFs relacionados:

recording

Clicar em um insere-o no seu editor atual, que se parece com:

shut up and take my money GIF by Product Hunt

Isso é fortemente baseado em um antigo fork de ReplyGif: Adicionando GIFs de reação facilmente, então obrigado a @cpradio.

As grandes diferenças são:

  • Pode usar webp animado em vez de gifs, tornando-o muito mais eficiente para largura de banda.

  • É um componente de tema, então é muito mais fácil de instalar e atualizar.

  • Oferece a escolha entre a API do Giphy ou a API do Tenor.

  • Rolagem infinita para resultados

  • Os GIFs resultantes são baixados para o Discourse usando nossa proteção nativa contra deterioração. Você pode desativar esse comportamento usando as configurações existentes se o espaço for uma preocupação.

  • Não há necessidade de mexer no nginx para configurar um proxy para HTTPS

Obtendo uma Chave de API do Giphy

Para que o componente funcione, você precisa visitar Dashboard | GIPHY Developers e clicar como:

Preencha o formulário e a chave da API será exibida como:

Obtendo uma Chave de API do Tenor

Obtenha essa chave no site oficial do Tenor: GIF API - Melhor, Mais Rápido & Grátis | Pegue seus GIFs com o Tenor

Depois disso, visite a página do componente de tema no Discourse e preencha as configurações, por exemplo:

Configurações

Nome Descrição
provedor da api Qual provedor de GIF devemos usar?
chave de api giphy GIPHY: Chave da API
formato de arquivo giphy GIPHY: Formato de imagem a ser usado. WEBP tem arquivos menores que carregam mais rápido, enquanto GIF oferece compatibilidade com navegadores antigos.
classificação de conteúdo giphy GIPHY: Classificação de conteúdo para resultados de pesquisa. Encontre mais informações em https://developers.giphy.com/docs/optional-settings#rating .
localidade giphy GIPHY: Idioma a ser usado na pesquisa. Usado para adaptar a pesquisa a conteúdo regional. Defina como o local padrão do seu fórum.
limitar resultados de pesquisa infinita Limite o número de resultados de GIF retornados conforme o usuário rola infinitamente para evitar Limitação de Taxa da API.
limite máximo de resultados Tenor & GIPHY: Quando “limitar resultados de pesquisa infinita” está ativado, pesquisaremos até obtermos esse número máximo de resultados de GIF. Cada chamada à API recupera 24 resultados, por exemplo, Limite Máximo 240: 240 / 24 = 10 Chamadas de API .
chave de api tenor Tenor: Chave da API V2. Instruções para obter uma podem ser encontradas em Discourse Meta - Discourse Gifs .
chave de cliente tenor Tenor: (opcional) string especificada pelo cliente que representa a integração
detalhe de arquivo tenor Tenor: Formato de imagem a ser usado
filtro de conteúdo tenor Tenor: Nível de segurança de conteúdo para resultados do Tenor. Encontre mais informações em Guias da API do Tenor .
país tenor Tenor: Código de país de duas letras de origem para a solicitação. Encontre seu código de país em Wikipedia - ISO_3166-1 .
localidade tenor Tenor: Idioma a ser usado na pesquisa. O código do país (opcional) pode ser fornecido para diferenciar entre dialetos.
Tradução Padrão
gif.modal_title Pesquisar GIFs
gif.query Termo
gif.insert Inserir Imagens Selecionadas
gif.composer_title Pesquisar GIFs
gif.no_results Digite uma palavra-chave na caixa de entrada acima para pesquisar GIFs.
gif.bad_api_key Chave de API $api_provider inválida. Administradores do site, verifique sua chave e/ou sua conta $api_provider.
gif.error_rate_limit Alcançamos nossos Limites de Taxa da API $api_provider. Aguarde e tente novamente mais tarde. Se esse problema persistir, entre em contato com o administrador do seu site.
gif.error_search_too_long Encurte sua consulta de pesquisa para menos de 50 caracteres e tente novamente.

:discourse2: Hospedado por nós? Componentes de tema estão disponíveis para uso em nossos planos Standard, Business e Enterprise.

84 curtidas

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 curtidas

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

3 curtidas

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

1 curtida

image

1 curtida

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 curtida

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

3 curtidas

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

4 curtidas

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

3 curtidas

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 curtidas

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

8 curtidas

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 curtidas

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 curtidas

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

4 curtidas

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

image

10 curtidas

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


Thanks

1 curtida

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 curtidas

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 curtidas

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

8 curtidas

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

4 curtidas