# Discourse Gifs

**URL:** https://meta.discourse.org/t/discourse-gifs/158738
**Category:** Theme component
**Tags:** official, gifs
**Created:** [July 24, 2020, 10:24pm UTC](https://meta.discourse.org/t/discourse-gifs/158738 "2020-07-24T22:24:05Z")
**Posts on this page:** 20
**Page:** 1

<div class="post-metadata">

### Author: ![Discourse](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/discourse/32/148734_2.png) [@Discourse](https://meta.discourse.org/u/Discourse)
#### Post date: [July 24, 2020, 10:24pm UTC](https://meta.discourse.org/t/discourse-gifs/158738/1 "2020-07-24T22:24:05Z")

</div>

| | | |
| --- | --- | --- |
| :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. |
| 🛠 | **Repository Link** | [https://github.com/discourse/discourse-gifs](https://github.com/discourse/discourse-gifs) |
| 📖 | **New to Discourse Themes?** | [Beginner’s guide to using Discourse Themes](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) |

Install this theme component

> [@](#):
>
> :discourse2: As this is an #official theme component maintained by the Discourse team, #Support, #Contribute > Bug, #Contribute > UX, and #Contribute > Feature requests can be made in the respective categories here on Meta, and tagged with the appropriate theme component tag. Click on a link below to get one started. 👍
> 
> [❓&nbsp; **Support**](https://meta.discourse.org/new-topic?category_id=6&tags=gifs "Ask for support on configuring and using Discourse Gifs") [🐛&nbsp; **Bug**](https://meta.discourse.org/new-topic?category_id=1&tags=gifs "A bug report means something is broken, preventing normal/typical use of the theme component") [👀&nbsp; **UX**](https://meta.discourse.org/new-topic?category_id=9&tags=gifs "Discussion about the user interface of Discourse Gifs, and how features are presented (including language and UI elements)") [💡&nbsp; **Feature**](https://meta.discourse.org/new-topic?category_id=2&tags=gifs "Discussion about how existing Discourse Gifs features can be improved or enhanced, and how proposed new features could work")

### Features

 ![image](https://global.discourse-cdn.com/meta/original/3X/6/c/6ca9aaf2440c0cd9a952456fca0737f1076cf9d1.png)

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

![recording](https://global.discourse-cdn.com/meta/original/3X/c/a/caaa41374093f847ad312d635a864900d54ba8d3.webp)

Clicking one one inserts it on your current composer, which looks like:

![shut up and take my money GIF by Product Hunt](https://global.discourse-cdn.com/meta/original/3X/4/e/4e19cae7c6bdc4291fb346aaed6b4627fb1b6996.webp)

This is heavily based on a old fork of [ReplyGif: Adding reaction GIF easily](https://meta.discourse.org/t/replygif-adding-reaction-gif-easily/33195), 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](https://developers.giphy.com/dashboard/?create=true) and click like:

 ![image](https://global.discourse-cdn.com/meta/original/3X/b/1/b12e8a7dbd809fa7388d76b56348dfd9ad7cebc1.png)

 ![image](https://global.discourse-cdn.com/meta/original/3X/f/4/f404fdd1e1f3ccde6036ca1066e1f6f56abde4e5.png)

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

 ![image](https://global.discourse-cdn.com/meta/original/3X/d/d/dd7c57e760fe23110cc4231dda5d42ab7e925bb9.png)

### Obtaining a Tenor API key

Get that key at the official Tenor site: [GIF API - Better, Faster & Free | Get Your GIFs with Tenor](https://tenor.com/gifapi)

After that visit the theme-component page in Discourse and fill up the settings, e.g:

 ![image](https://global.discourse-cdn.com/meta/original/3X/8/4/84c9ae2315ec3e9a55ea4614696755ad46cbce87.png)

### 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](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](https://meta.discourse.org/t/discourse-gifs-component/158738). |
| 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](https://developers.google.com/tenor/guides/content-filtering). |
| tenor country | Tenor: Two-Letter Country of Origin for the request. Find your country code in [Wikipedia - ISO\_3166-1](https://en.wikipedia.org/wiki/ISO_3166-1#Current_codes). |
| 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 document**
> >
> > Perform check on document:

---

<div class="post-metadata">

### Author: ![Falco](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/falco/32/179432_2.png) [@Falco](https://meta.discourse.org/u/Falco)
#### Post date: [January 14, 2021, 4:17pm UTC](https://meta.discourse.org/t/discourse-gifs/158738/115 "2021-01-14T16:17:41Z")

</div>

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](https://global.discourse-cdn.com/meta/original/3X/1/3/135c406981728db6c4223056e0499bf620fb2867.gif)

WEBP: 1.4MB  
 ![Detective Pikachu Reaction GIF](https://global.discourse-cdn.com/meta/original/3X/2/8/28f3ac5bd4c8d6ddfa9386da5c72ff17d31f01f6.webp)

MP4: 1MB

AVIF: 276.8 KB

 ![pikachu.avif|](https://global.discourse-cdn.com/meta/original/3X/3/4/344651ab35ca624c0fcefc738361542d370bb955.avif)

For everyone else I added autofocus on the search modal!

---

<div class="post-metadata">

### Author: ![David\_Grey](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/david_grey/32/175686_2.png) [@David\_Grey](https://meta.discourse.org/u/David_Grey)
#### Post date: [March 7, 2021, 2:36pm UTC](https://meta.discourse.org/t/discourse-gifs/158738/127 "2021-03-07T14:36:53Z")

</div>

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

---

<div class="post-metadata">

### Author: ![Heather\_Dudley](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/heather_dudley/32/151925_2.png) [@Heather\_Dudley](https://meta.discourse.org/u/Heather_Dudley)
#### Post date: [April 2, 2021, 6:53pm UTC](https://meta.discourse.org/t/discourse-gifs/158738/132 "2021-04-02T18:53:41Z")

</div>

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

---

<div class="post-metadata">

### Author: ![Falco](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/falco/32/179432_2.png) [@Falco](https://meta.discourse.org/u/Falco)
#### Post date: [April 2, 2021, 10:51pm UTC](https://meta.discourse.org/t/discourse-gifs/158738/133 "2021-04-02T22:51:05Z")

</div>

![image](https://global.discourse-cdn.com/meta/original/3X/0/b/0b621547b9ed8d83df25e5b9ce9c21dde7235187.png)

---

<div class="post-metadata">

### Author: ![Heather\_Dudley](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/heather_dudley/32/151925_2.png) [@Heather\_Dudley](https://meta.discourse.org/u/Heather_Dudley)
#### Post date: [April 2, 2021, 10:58pm UTC](https://meta.discourse.org/t/discourse-gifs/158738/134 "2021-04-02T22:58:16Z")

</div>

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

 ![image](https://global.discourse-cdn.com/meta/original/3X/7/5/75341af800f61906254496161d49d9f828815216.png)

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

---

<div class="post-metadata">

### Author: ![Falco](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/falco/32/179432_2.png) [@Falco](https://meta.discourse.org/u/Falco)
#### Post date: [April 2, 2021, 11:00pm UTC](https://meta.discourse.org/t/discourse-gifs/158738/135 "2021-04-02T23:00:13Z")

</div>

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

---

<div class="post-metadata">

### Author: ![Heather\_Dudley](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/heather_dudley/32/151925_2.png) [@Heather\_Dudley](https://meta.discourse.org/u/Heather_Dudley)
#### Post date: [April 2, 2021, 11:01pm UTC](https://meta.discourse.org/t/discourse-gifs/158738/136 "2021-04-02T23:01:54Z")

</div>

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

---

<div class="post-metadata">

### Author: ![anon82467725](https://avatars.discourse-cdn.com/v4/letter/a/edb3f5/32.png) [@anon82467725](https://meta.discourse.org/u/anon82467725)
#### Post date: [April 2, 2021, 11:47pm UTC](https://meta.discourse.org/t/discourse-gifs/158738/138 "2021-04-02T23:47:16Z")

</div>

Is it not possible to use Google’s [Tenor](https://tenor.com/) platform? After [Facebook acquired Giphy](https://techcrunch.com/2020/05/15/facebook-to-acquire-giphy-in-a-deal-reportedly-worth-400-million/), I stopped using it and switched over to Tenor.

---

<div class="post-metadata">

### Author: ![Falco](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/falco/32/179432_2.png) [@Falco](https://meta.discourse.org/u/Falco)
#### Post date: [April 3, 2021, 2:29pm UTC](https://meta.discourse.org/t/discourse-gifs/158738/139 "2021-04-03T14:29:24Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![orenwolf](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/orenwolf/32/119529_2.png) [@orenwolf](https://meta.discourse.org/u/orenwolf)
#### Post date: [April 3, 2021, 4:43pm UTC](https://meta.discourse.org/t/discourse-gifs/158738/140 "2021-04-03T16:43:07Z")

</div>

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

---

<div class="post-metadata">

### Author: ![Falco](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/falco/32/179432_2.png) [@Falco](https://meta.discourse.org/u/Falco)
#### Post date: [April 4, 2021, 2:47am UTC](https://meta.discourse.org/t/discourse-gifs/158738/141 "2021-04-04T02:47:02Z")

</div>

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](https://meta.discourse.org/t/discourse-gifs-component/158738/115):
>
> 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 For everyone else I added autofocus on the search modal!

---

<div class="post-metadata">

### Author: ![anon82467725](https://avatars.discourse-cdn.com/v4/letter/a/edb3f5/32.png) [@anon82467725](https://meta.discourse.org/u/anon82467725)
#### Post date: [April 4, 2021, 12:12pm UTC](https://meta.discourse.org/t/discourse-gifs/158738/142 "2021-04-04T12:12:04Z")

</div>

> [@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 😉)?

---

<div class="post-metadata">

### Author: ![Falco](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/falco/32/179432_2.png) [@Falco](https://meta.discourse.org/u/Falco)
#### Post date: [April 4, 2021, 12:51pm UTC](https://meta.discourse.org/t/discourse-gifs/158738/143 "2021-04-04T12:51:38Z")

</div>

Discourse can support it easily as soon as browser support happens: [AVIF image format | Can I use... Support tables for HTML5, CSS3, etc](https://caniuse.com/avif)

---

<div class="post-metadata">

### Author: ![Falco](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/falco/32/179432_2.png) [@Falco](https://meta.discourse.org/u/Falco)
#### Post date: [April 6, 2021, 8:20pm UTC](https://meta.discourse.org/t/discourse-gifs/158738/145 "2021-04-06T20:20:40Z")

</div>

> [@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!

 ![image](https://global.discourse-cdn.com/meta/original/3X/9/e/9e3bde7fd6afe9d632355e68d8ad7e46a1e0a6c9.png)

---

<div class="post-metadata">

### Author: ![mstm](https://avatars.discourse-cdn.com/v4/letter/m/6de8d8/32.png) [@mstm](https://meta.discourse.org/u/mstm)
#### Post date: [April 6, 2021, 8:48pm UTC](https://meta.discourse.org/t/discourse-gifs/158738/146 "2021-04-06T20:48:33Z")

</div>

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

 ![Screenshot_20210406-224442_Chrome](https://global.discourse-cdn.com/meta/original/3X/2/2/22260f0b474dba19f5b879ed70d1d214f34aca86.jpeg)  
Thanks

---

<div class="post-metadata">

### Author: ![Richie](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/richie/32/115110_2.png) [@Richie](https://meta.discourse.org/u/Richie)
#### Post date: [April 6, 2021, 8:53pm UTC](https://meta.discourse.org/t/discourse-gifs/158738/147 "2021-04-06T20:53:42Z")

</div>

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 🤣

---

<div class="post-metadata">

### Author: ![Steven](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/steven/32/187890_2.png) [@Steven](https://meta.discourse.org/u/Steven)
#### Post date: [April 6, 2021, 9:06pm UTC](https://meta.discourse.org/t/discourse-gifs/158738/148 "2021-04-06T21:06:13Z")

</div>

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

```css
:not(.category-your_category_id) .d-icon-discourse-gifs-gif-icon {
    display: none
}

```

---

<div class="post-metadata">

### Author: ![Falco](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/falco/32/179432_2.png) [@Falco](https://meta.discourse.org/u/Falco)
#### Post date: [April 6, 2021, 9:21pm UTC](https://meta.discourse.org/t/discourse-gifs/158738/149 "2021-04-06T21:21:16Z")

</div>

> [@mstm](#):
>
> Thanks @Falco , is it possible to hide the gif button while previewing the message?

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

---

<div class="post-metadata">

### Author: ![DogeRTX](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/dogertx/32/222185_2.png) [@DogeRTX](https://meta.discourse.org/u/DogeRTX)
#### Post date: [May 26, 2021, 9:16pm UTC](https://meta.discourse.org/t/discourse-gifs/158738/166 "2021-05-26T21:16:12Z")

</div>

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

[Next page](https://meta.discourse.org/t/discourse-gifs/158738.md?page=2)
