Discourse Gifs

:discourse2: Summary Discourse Gifs adds a button to the composer that allows you to search for gifs and easily add the best one to your post.
:hammer_and_wrench: Repository Link https://github.com/discourse/discourse-gifs
:open_book: New to Discourse Themes? Beginner’s guide to using Discourse Themes

Install this theme component

After searching you get an infinite scrolling wall of related gifs:

recording

Clicking one one inserts it on your current composer, which looks like:

shut up and take my money GIF by Product Hunt

This is heavily based on a old fork of ReplyGif: Adding reaction GIF easily, so thanks to @cpradio.

The big differences are:

  • It can use animated webp instead of gifs, so it’s a lot more efficient for bandwidth.

  • It is a theme-component, so it is way easier to install and update.

  • It offers the choice of Giphy API or the Tenor API.

  • Infinite Scrolling for results

  • Resulting gifs are downloaded to Discourse using our native bitrot protection. You can disable this behavior using existing settings if space is a concern.

  • No need to fiddle with nginx to setup a proxy for HTTPS

Obtaining a Giphy API Key

For the component to work you need to visit https://developers.giphy.com/dashboard/?create=true and click like:

Fill up the form and the API key will be show as:

image

Obtaining a Tenor API key

Get that key at the official Tenor site: GIF API - Better, Faster & Free | Get Your GIFs with Tenor

After that visit the theme-component page in Discourse and fill up the settings, e.g:

69 Likes

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!

15 Likes

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

3 Likes

After recently rebuilding the gif button has become blank. Clicking it still works but the icon is gone. It should be second from the right on the screenshot below:

Any ideas why this might have happened and how to get it back?

1 Like

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

1 Like

image

1 Like

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 Like

Oh you are installed into the old branch, re-install using the main branch at https://github.com/discourse/discourse-gifs/tree/main

3 Likes

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

4 Likes

Just double checked and the gif .svg file appears to no longer work, which lines up with my above report:

2 Likes

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

3 Likes

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 Likes

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

6 Likes

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 Likes

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 Likes

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

4 Likes

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

image

10 Likes

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


Thanks

1 Like

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 Likes

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 Likes