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:

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

64 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

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

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

3 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