Giphy Integration [Deleted]

Dannymh

Active member
Dannymh submitted a new resource:

Giphy Search integration and toolbar - Bring Giphy Search into your forums to bring flavour and fun to posts

Bringing Giphy Search functionality to your forums.

This tool creates a new toolbar button in the editor and quick reply allowing you to search giphy and push a Giphy image into your post.

The amount of returned images in a search is configurable by you (minimum 1, maximum 100, the end user, you can also put in a rating limit to keep the returned images within the guidelines of Giphy (y,g, pg, pg-13 or r) or leave it blank to allow any.

You must use an API key from Giphy, the plugin ships...

Read more about this resource...
 
You can see it on my live site silvertails.net but no official demo other than that.

Just tried but I have a few questions:

When clicking on "load more", it redirects to your home page but how do I load more gifs because when typing "NHL", I only have a few gifs but I want more...
Editor button is customizable?
 
Just tried but I have a few questions:

When clicking on "load more", it redirects to your home page but how do I load more gifs because when typing "NHL", I only have a few gifs but I want more...
Editor button is customizable?
Im still building the "load more function" my website users are my lab rats :) was hoping to have that done by now, but my son has kept me away from my computer.

Will try to have that part implemented by tomorrow
 
Just tried but I have a few questions:

When clicking on "load more", it redirects to your home page but how do I load more gifs because when typing "NHL", I only have a few gifs but I want more...
Editor button is customizable?
So on my site I limit the results to 20, you can set up to 100 to be returned, it will only find what is available from giphy for that key word, if there are not 20 its done.
They limit you to 100 total in a search result query.

The idea of load more is that you can limit the results to x per page, say 10, then hit Load More.. it will then do a search with an offset of 10, then 20 and so on reloading each time. It will unlikely let us go past 100 but I am going to try and push that boundary.

The load more request came from the first person to buy this this afternoon so I am trying to be as responsive as possible to requests
 
Hi,

I can't really speak to the other one as I simply haven't purchased it. From reading it the difference looks like the other Adon just inserts a random image selected from the text in the post.

My Addon is a button in the Rich Text Editor, which when clicked, loads a modal window where you can search for a giphy image using the giphy search API. It then lets you select the one you want and by prssing on it, it is inserted into your post.

You can set different parameters, such as the amount of giphy images to be returned and the rating, i.e r rated etc. You can select the https or http method and I am currently programming in a LoadMore function that will let you offset and skim through more images until you find the one you want.

They look like both Addons use the API just different parts. I looked at the other addon yesterday and decided not to get it as a random image wasnt what I wanted, I wanted to search So I spent some hours programming it today for my own site and decided it was worth sharing with the community.

Hope that helps
 
Thanks for that, Sold! purchasing now.
No Problems at all. Im not great at design just the coding side, so feel free to style it some more.

I am adding more features as time permits. Its nearly 1AM here at the moment though so, probably wont do anymore tonight. I will be adding new features and design changes fairly rapidly over the next few days. Should be simple changes though and only require replacing of files or perhaps some template changes.

Either way I will push out changes via the file download link and send emails as those new changes happen. Any issues let me know.
 
@Dannymh

How do I translate your plugin?

Thanks

Hi I was just about to release a new version when ou asked this. So I quickly changed it to now use phrases. You should be able to change the Phrases under Admin >> Appearance >> Phrases all the phrases start with silvertails_giphy_

So you should be able to find them and they should make sense. I just pushed out the product update to you via fetch App
 
Dannymh updated Giphy Search integration and toolbar with a new update entry:

New Functionality and Changes

Update 0.0.5
- ADDED: Failure message when no results are found
- ADDED: Go Back/Previous Results (can page forward and back now)
- CHANGED: All language strings have now been moved to phrases, so that they can be localised
- CHANGED: Templates changed to be a little better
- CHANGED: Other Style enhancements
- CHANGED: Mobile screen size detection reduces thumbnail size to 100 for better experience and modal is sized based on screen size.
- FIXED: Inline styling of results now falls inside...

Read the rest of this update entry...
 
I have a suggestion to figure out a way to use FontAwesome for the editor toolbar icon. As the theme I am using it uses FA for the editor icons and the icon for Giphy isn't showing.
 
I have a suggestion to figure out a way to use FontAwesome for the editor toolbar icon. As the theme I am using it uses FA for the editor icons and the icon for Giphy isn't showing.
This can be achieved now if you have a look at the admin >> appearance >> template modifications >> Silvertails giphy integration >> Extra.css

Edit the modification and change the css for the button to use FA however I don't know what FA icon would work best for this as there isn't a giphy one

Something like this as an example
Remove the following (or check the paths are correct)
Code:
html .redactor_toolbar li a.redactor_btn_stgiphy {
    background: #000000;
        text-align: center;
        background:url(styles/default/Silvertails/Giphy/giphyicon.png) no-repeat top left;
        border-radius: 2px;
}

html .redactor_toolbar li a.redactor_btn_stgiphy:hover {
    background: #000000;
        text-align: center;
        background:url(styles/default/Silvertails/Giphy/giphyicon.png) no-repeat top left;
        border-radius: 2px;
}

And replace with something like
Code:
html .redactor_toolbar li a.redactor_btn_stgiphy:before {
content: "\f036";
}

You will want a different FA though
 
Last edited:
@Dannymh Is there anything we can do about the size of the results box relative to the scrolling area?

giphy 2.webp

Also, the Load More button isn't showing up on mobile because you can't scroll down the images to see the bottom.
 
@Dannymh Is there anything we can do about the size of the results box relative to the scrolling area?

View attachment 129758

Also, the Load More button isn't showing up on mobile because you can't scroll down the images to see the bottom.
I've been trying to get the best size possible and it's a bit tough. I'll try to widen in and make it a little less high that way it should give a better appearance.
The modal for redactor is a little limiting

I'll tweak it a little today as well as seeing if I can put the inner div styling into a template instead of hard coding it
 
I've been trying to get the best size possible and it's a bit tough. I'll try to widen in and make it a little less high that way it should give a better appearance.
The modal for redactor is a little limiting

I'll tweak it a little today as well as seeing if I can put the inner div styling into a template instead of hard coding it
You're doing a great job so far. Keep up the good work.
 
Back
Top Bottom