Discourse Gifs component

This theme component add a button to the composer that allows you to search for gifs and easily add the best one to your post.

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

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 uses 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 uses the Giphy 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

After that visit the theme-component page in Discourse and fill up the settings:

Install this theme component

62 Likes

I switched over to the Giphy version but I’m still getting a lot of people on iOS for whom this just plain doesn’t work. The .webp thing doesn’t work at all, and is not supported as far as I know, so we’ve just switched for whom it isn’t working.

Example:

I have the same issue as well.
Device: Mac
(I can see the Tenor gifs, but the Giphy gifs just show up like this:)

Regular gifs show up just fine, but gifs pulled from this component aren’t working for a pretty big portion. According to my tech volunteers, it has to do with the codecs not working for .webp on iOS. I don’t see any of this on android, Chrome, nor Windows, it’s only Mac/iPhone users reporting.

1 Like

It will work on iOS devices running latest version. Also MacOS Safari devices running latest MacOS version.

https://caniuse.com/webp

If someone wants to fork this to use plain old GIFs instead of the WEBP format that should be doable. It’s a trade-of between compatibility with old devices and large file sizes. I may be able to add it as a theme setting, but it will take me a few days.

4 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!

13 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

2 Likes

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

3 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.

2 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.

5 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:

4 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

I guess we are just waiting on Microsoft Edge then. It can be enabled in Mozilla Firefox.

2 Likes

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

image

9 Likes