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

Features

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:

Settings

Name Description
api provider Which GIF provider should we use?
giphy api key GIPHY: API key
giphy file format GIPHY: Image format to use. WEBP has smaller files that load quicker while GIF provides compatibility with old browsers.
giphy content rating GIPHY: Content rating for search results. Find more info at https://developers.giphy.com/docs/optional-settings#rating .
giphy locale GIPHY: Language to use on the search. Used to cater search to regional content. Set to your default forum locale.
limit infinite search results Limit the number of GIF results returned as the user scrolls infinitely to prevent API Rate Limiting.
max results limit Tenor & GIPHY: When ā€œlimit infinite search resultsā€ is enabled, we will search until we get this number of maximum GIF results. Each API call retrieves 24 results, e.g. 240 Max Limit: 240 / 24 = 10 API Calls .
tenor api key Tenor: V2 API Key. Instructions to get one can be found in Discourse Meta - Discourse Gifs .
tenor client key Tenor: (optional) client-specified string that represents the integration
tenor file detail Tenor: Image format to use
tenor content filter Tenor: Content safety level for Tenor results. Find more info in Tenor API Guides .
tenor country Tenor: Two-Letter Country of Origin for the request. Find your country code in Wikipedia - ISO_3166-1 .
tenor locale Tenor: Language to use on the search. Country code (optional) can be provided to differentiate between dialects.
Translation Deafault
gif.modal_title Search GIFs
gif.query Term
gif.insert Insert Selected Images
gif.composer_title Search GIFs
gif.no_results Enter a keyword in the input box above to search for GIFs.
gif.bad_api_key Invalid $api_provider API Key. Site admins, please check your key and/or your $api_provider account.
gif.error_rate_limit We have reached our $api_provider API Rate Limits. Please wait and try again later. If this issue persists, contact your site admin.
gif.error_search_too_long Please shorten your search query to under 50 characters and try again.

:discourse2: Hosted by us? Theme components are available to use on our Standard, Business, and Enterprise plans.

Last edited by @JammyDodger 2024-06-12T10:45:10Z

Check documentPerform check on document:
83 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.

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

4 Likes