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 Dashboard | GIPHY Developers 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:

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

16 Likes

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

3 Likes

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

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

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

8 Likes

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

3 Likes