Discourse Gifs

Falco · 2020-07-24T22:24:05.595Z


	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.
	Repository Link	https://github.com/discourse/discourse-gifs
	New to Discourse Themes?	Beginner’s guide to using Discourse Themes

Install this theme component

image708×201 13.3 KB

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:

image726×111 7.44 KB

image1058×993 95.3 KB

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

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:

image735×119 5.32 KB

Falco · 2021-01-14T16:17:41.616Z

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!

David_Grey · 2021-03-07T14:36:53.386Z

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

Heather_Dudley · 2021-04-02T18:53:41.850Z

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

Falco · 2021-04-02T22:51:05.169Z

Heather_Dudley · 2021-04-02T22:58:16.680Z

Okay, I am not blind then, I don’t have that option. I just have the api key:

image933×715 38.1 KB

repository I’m linked to: https://github.com/discourse/discourse-gifs/tree/giphy

Falco · 2021-04-02T23:00:13.405Z

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

Heather_Dudley · 2021-04-02T23:01:54.638Z

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

anon82467725 · 2021-04-02T23:47:16.397Z

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

Falco · 2021-04-03T14:29:24.673Z

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.

orenwolf · 2021-04-03T16:43:07.612Z

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

Falco · 2021-04-04T02:47:02.654Z

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:

Discourse Gifs component theme

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!

anon82467725 · 2021-04-04T12:12:04.101Z

Falco:

Maybe they go straight for animated avif ? It’s already live on Chrome, and will be soon everywhere modern.

How is development of that format going? How long do you think it’ll take for other companies to adopt it (including Discourse )?

Falco · 2021-04-04T12:51:38.107Z

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

Falco · 2021-04-06T20:20:40.172Z

Heather_Dudley:

On some mobile resolutions, the gear icon is obscured by the gif icon:

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

mstm · 2021-04-06T20:48:33.497Z

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

Screenshot_20210406-224442_Chrome1080×515 21.7 KB

Thanks

Richie · 2021-04-06T20:53:42.326Z

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

Steven · 2021-04-06T21:06:13.755Z

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
}

Falco · 2021-04-06T21:21:16.012Z

mstm:

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

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

DogeRTX · 2021-05-26T21:16:12.541Z

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