Discourse Gifs component

[Falco (Rafael dos Santos Silva)]

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:

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

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:

After that visit the theme-component page in Discourse and fill up the settings:

	Repository	Discourse-Gifs
	Install Guide	How to install a theme or theme component
	New to Discourse Themes?	Beginner’s guide to using Discourse Themes

[Full30 (Robert)]

Installed

(twenty characters)

[Bill]

Nice! I was using the other version of this, I will give this one a shot.

[Falco (Rafael dos Santos Silva)]

Just added a custom icon in the composer and enabled it here on Meta.

[Bill]

It’s been working well for me. Loads faster than the other one. It doesn’t allow you to scroll through a larger selection of GIFs like the other one did, I assume that’s one of the reasons it loads faster. That’s ok because I prefer the faster load speed over the unlimited selection of GIFs.

[Falco (Rafael dos Santos Silva)]

It loads faster because it uses a way more efficient format than the other. The preview window also uses a smaller resolution than the ones that end up in the composer. We also set static posters while it’s loading. It’s a couple of techniques to make all faster.

Regarding having more options, we have the logic and API ready to allow for infinite scrolling just need to get the UI in place.

[dodesz (Don)]

Hi @Falco,

Thank you for this component seems pretty cool .

Works great on desktop but is that possible to make it more friendly on mobile view especially on iOS?

I don’t test it on android yet.

iOS: because it’s mp4 it open all gif on result sometimes the gif on result gone black background and not playable.
The posted gifs not moving… it shows only an image.

[Falco (Rafael dos Santos Silva)]

Yeah @pmusaraj just reported this to me. iOS is sure weird. On desktop and android it works well. Will try to fix what iOS is doing.

[itsbhanusharma (Bhanu Sharma)]

[Falco (Rafael dos Santos Silva)]

@dodesz It is fixed on iOS on the iPhone now. The fix only affects new videos, so you may need to edit old posts.

The fix doesn’t work on newer iPadOS devices yet. That is something for tomorrow.

[dodesz (Don)]

Thank you so much @Falco you’re awesome it almost impossible I know that is freaking hard to do it so yeah huge
Works great

Only one thing I noticed when I search first time a gif it works great after if I search other term than it freezes everything.

[sam (Sam Saffron)]

@dodesz

if I search other term than it freezes everything

Which browser are you using? Not able to repro this here.

(note the flashing party while typing is a known issue with the discourse composer, not something we can easily fix sadly)

[dodesz (Don)]

Hi Sam,

The issue is on iOS.

I tried to upload a screen video but too big.

So I type Happy in search than wait while loading completely the gifs. Than start delete characters to search another. And it frozen. Only works is full refresh the page.

[sam (Sam Saffron)]

I think that is enough info for @Falco he was battling with iOS today and is not quite done with his fixes.

[dodesz (Don)]

Thank you so much your awesome guys

[dodesz (Don)]

One more thing after post a gif it downloading all images (actually it downloads the full mp4 video gif) from tenor somehow I guess and break the gif.

So I just added media.tenor.com to disable image download domains setting. It seems now working well

[Falco (Rafael dos Santos Silva)]

Yes, because of the hack for iOS devices it triggers the download feature now. So you must add the tenor domain to the exception list.

[Falco (Rafael dos Santos Silva)]

I fixed playback in iPadOS.

And while I can reproduce the freeze @dodesz, but since Safari is outright crashing there is not much I can do as it is not a simple exception but the browser is completely locking up. I made the markup simpler to reduce the number of elements, but it still crashes after 5 searches or so.

[Bill]

I noticed freezing as well. It was on this website while I was editing a thread with a GIF. The whole browser tab froze twice on me, after I deleted the GIF in the composer it stopped freezing. I’m on the latest version of Firefox with Windows 10 desktop.

[PaulinaMX]

In this forum it works perfectly, but not in mine, it just appears as a motionless image in the post.