[Alpha] GIPHY Button

[elli]

A new plugin! This adds a button to the WYSIWYG editor and Quick Reply, which -- based on a search term -- serves up a random gif from GIPHY's developer API. The gif can be shuffled until the user finds one they like, then inserted into their post. Thanks to Peter, this works with both editor tabs.

If you use Slack, this was inspired by their GIPHY app.



Editor preview ("Insert GIF" next to "Insert Image"):

ellitest.proboards.com/thread/new/9

Quick Reply preview ("Reply with a GIF"):

ellitest.proboards.com/thread/24/poll

I'd love feedback! Thoughts on usability, JavaScript, improvements, etc.

github.com/ellimccale/pbp-giphy-button

[Retread]

Jan 4, 2020 19:08:03 GMT -8 elli said:

I'd love feedback! Thoughts on usability, JavaScript, improvements, etc.

When I first installed this on my test forum, the only reasons I did so were:

• I could learn something from the JS which I might use elsewhere.
  (btw, thank you so much for making this editable!)
  
• It's elli , and she always brings a lot to the table so why not try to support her and maybe help if I can.

It's still just a toy, but I like this toy! If I bring it to GN2, I'll probably restrict the use to the Coffee Shop board. But it is a ton of fun.

usability:
It works as-advertised.

improvements:
The button choices for the editor are just fine and I think providing the option for the admin to use a Custom Button Image is very thoughtful.

But I think the Quick Reply button leaves a lot to be desired. It stops looking like a button when using a theme with a black background. Rather than use the giphy-button__quick-reply class, I edited that line in the JS to use the ui-button class. That way it will always pick up the styling from whatever theme I select.

Would that be an option worth adding to the Settings page?

---

For my own curiosity:

When a gif is selected and the Insert GIF button is pressed, BBCode similar to this is inserted:

[img src="https://media2.giphy.com/media/wkgQR3TQqc0x2/200.gif?cid=b92a3d88f895a8e2b5bb748bc5bab6d83d3929958856ce80&rid=200.gif" alt=""]

I understand this part of the URL:

https://media2.giphy.com/media/wkgQR3TQqc0x2/200.gif

But what does the question mark and the part which comes after, accomplish?

?cid=b92a3d88f895a8e2b5bb748bc5bab6d83d3929958856ce80&rid=200.gif

If I strip that out, it seems to display the image just fine.

[elli]

Retread Good feedback, thank you! Glad you like it. :)

I also don't like the quick reply button. GIPHY's branding guidelines show that they prefer buttons to look like this (black bg, icon to the left, white text), but I don't think it works well in the context of themes. If I ever requested a production API key from them, they might insist, but we're not there yet, so... I think I'll make it look like a normal button for now.

Yeah, the image URL it sends is long. The parameter after ?cid= is likely some kind of tracking string ("customer ID" is what it was called at my last job). I'd guess GIPHY wants to collect data about where/how their gifs are being used, it might also be associated with my API key. But I'll look back in their data and see if they send a URL that isn't so long, because it's ugly.

[elli]

Back with an update: confirmed that ?cid= is a tracking string, used to collect data about gif usage. All image URLs have it tacked on. I've asked if they prefer it stays in place, but I'm betting the answer is "yes" (otherwise, they wouldn't have included it). We might just be stuck with long image URLs.

The Quick Reply button has been simplified to a standard PB ui-button.

I also added an unobtrusive-yet-conspicuous "Powered by GIPHY" attribution in the footer area of the dialog, which is required by their developer guidelines and I'd forgotten about. The way I did this in the script is a little iffy, but works ok for now.

And made the styles on the dialog a bit more strict, so that it will look about the same regardless of theme. Tested with some of my more customized themes, it's much more usable (previously, the content area wasn't tall enough because I'd screwed around with dialog styles in my themes).

Now all I'm worried about is the request limits set on the developer API key. It's limited to 1000 searches per day, so I guess we'll see how often this is used.

If no one has any other feedback by the end of the week, I'll make a beta release and create a thread in the Plugin Library board!

[Retread]

I also added an unobtrusive-yet-conspicuous "Powered by GIPHY" attribution in the footer area of the dialog, which is required by their developer guidelines and I'd forgotten about. The way I did this in the script is a little iffy, but works ok for now.

Yes, I would imagine that would be far more important to them than the look of the buttons.

Looks good, btw.



The only other suggestion I have is sort of splitting hairs.

The button in the Quick Reply container says: 'Reply with a GIF'
But that isn't quite what's happening, since it doesn't actually create the reply and you need to click the Post Quick Reply button afterward.

Maybe it should read: 'Insert GIF' ?

[elli]

Jan 7, 2020 13:53:45 GMT -8 Retread said:

The button in the Quick Reply container says: 'Reply with a GIF'
But that isn't quite what's happening, since it doesn't actually create the reply and you need to click the Post Quick Reply button afterward.

That's another one of GIPHY's brand guidelines. They request either "Reply with a GIF" or "Send a GIF". I think in this case, the phrasing works out ok, but a person could change it in the plugin if they wanted.

[johnkenn]

Very cool.
Any plans for a mobile version?

[Kami]

Feb 3, 2021 15:41:32 GMT -8 johnkenn said:

Very cool.
Any plans for a mobile version?

No, plugins do not work on mobile at all regardless of plugin. In the future when v6 is released, this will not be the case (there will no longer be a separate mobile version), but elli may need to update the coding to be compatible.

[elli]

Feb 3, 2021 15:41:32 GMT -8 johnkenn said:

Very cool.
Any plans for a mobile version?

As Kami pointed out, plugins are currently not compatible with the mobile version of ProBoards. Version 6 of the software will change this, so keep an eye out. I'll be updating this plugin for the new version.

Also, if you're using this now, make sure you're using the latest version! This was the development thread back when the plugin was still in Alpha. It's currently in Beta.

[Retread]

Go HERE for the most recent (Beta) version of this plugin.