Giphy button in editor has stopped working

Go down

Solved Giphy button in editor has stopped working

Post by IvotitaQ on May 7th 2019, 6:20 am

Technical Details


Forum version : #ModernBB
Position : Member
Concerned browser(s) : Google Chrome
Screenshot of problem : https://i.servimg.com/u/f54/19/78/45/66/screen10.png
Who the problem concerns : All members
When the problem appeared : A week ago
Forum link : https://www.fororeinasdemexico.com/

Description of problem



I found this code months ago in this link.

http://fmdesign.forumotion.com/t994-gifactif-giphy-button-for-the-editor

Code:
(function() {
  // return if gifactif has been initialized
  if (window.gifactif) {
    if (window.console && console.warn) {
      console.warn('gifactif has already been initialized');
    }
    return;
  }
 
 
  // setup global object
  window.gifactif = {
    key : 'dc6zaTOxFJmzC', // PUBLIC BETA KEY
    limit : 26, // max image results
    delay : 200, // delay before searches commence (200ms)
    auto_close : true,
 
    // general language settings
    lang : {
      searching : 'Searching...',
      not_found : 'No results found.. <img src="http://illiweb.com/fa/i/smiles/icon_sad.gif" style="margin:0;vertical-align:middle;"/>'
    },
 
    // dropdown markup
    dropDown : $(
      '<div>'+
        '<input type="text" id="gifactif_search" placeholder="Search for a GIF..." style="width:90%;"/>'+
        '<div id="gifactif_results" onscroll="gifactif.scrolling(this);"><div id="gifactif_images"></div></div>'+
        '<div id="giphy_attribution_mark"></div>'+
      '</div>'
    )[0],
 
 
    // initial setup of the SCEditor command
    init : function () {
      if ($.sceditor && window.toolbar) {
 
        // set the gifactif command
        $.sceditor.command.set('gifactif', {
 
          tooltip : 'Find a GIF',
 
          // Dropdown and general functionality for gifactif
          dropDown : function (editor, caller, callback) {
            gifactif.reset();
            gifactif.editor = editor;
            gifactif.callback = callback;
            editor.createDropDown(caller, 'gifactif', gifactif.dropDown);
 
            $('#gifactif_search', gifactif.dropDown)[0].focus(); // focus the search area
          },
 
 
          // WYSIWYG MODE
          exec : function(caller) {
            var editor = this;
 
            $.sceditor.command.get('gifactif').dropDown(editor, caller, function(gif) {
              editor.insert('[img]' + gif + '[/img]');
            });
          },
 
 
          // SOURCE MODE
          txtExec : function(caller) {
            var editor = this;
 
            $.sceditor.command.get('gifactif').dropDown(editor, caller, function(gif) {
              editor.insertText('[img]' + gif + '[/img]');
            });
          }
 
        });
 
 
        // add gifactif to the editor toolbar
        toolbar = toolbar.replace('image,', 'image,gifactif,');
 
        // add CSS for button image and dropdown
        $('head').append(
          '<style type="text/css">'+
            '.sceditor-button-gifactif div { background-image:url(http://i35.servimg.com/u/f35/18/21/60/73/giphy10.png) !important; }'+
            '.sceditor-button-gifactif:after, .sceditor-button-gifactif:before { content:""; }'+ // Forumactif Edge override
            '#gifactif_results { width:300px; margin:10px auto; min-height:30px; max-height:300px; overflow-x:hidden; overflow-y:auto; }'+
            '.gifactif_imagelist { line-height:0; column-count:2; column-gap:3px; }'+
            '.gifactif_imagelist img { margin-bottom:3px; cursor:pointer; width:100%; }'+
            'html #giphy_attribution_mark { background:url(http://i35.servimg.com/u/f35/18/21/60/73/powere11.png) no-repeat 50% 50% transparent !important; height:22px !important; width:100%; !important; min-width:200px !important; display:block !important; visibility:visible !important; opacity:1 !important; }'+
          '</style>'
        );
      }
 
    },
 
 
    // search for a GIPHY gif
    search : function (query) {
      if (gifactif.timeout) {
        gifactif.abort(); // abort ongoing searches and requests
      }
 
      if (query) {
 
        // set a small timeout in case the user is still typing
        gifactif.timeout = window.setTimeout(function() {
          gifactif.reset(true, gifactif.lang.searching);
          gifactif.query = encodeURIComponent(query);
 
          gifactif.request = $.get('http://api.giphy.com/v1/gifs/search?q=' + gifactif.query + '&limit=' + gifactif.limit + '&rating=pg-13&api_key=' + gifactif.key, function(data) {
            // update global data such as page offsets for scrolling
            gifactif.request = null;
            gifactif.offset = data.pagination.offset + gifactif.limit;
            gifactif.offset_total = data.pagination.total_count;
 
            gifactif.reset(true); // reset HTML content
            gifactif.addGIF(data); // send data to be parsed
          });
 
        }, gifactif.delay);
 
      } else {
        gifactif.reset(true);
      }
    },
 
 
    // abort ongoing searches and requests
    abort : function () {
      if (gifactif.timeout) {
        window.clearInterval(gifactif.timeout);
        gifactif.timeout = null;
      }
 
      if (gifactif.request) {
        gifactif.request.abort();
        gifactif.request = null;
      }
    },
 
 
    // add gifs to the result list
    addGIF : function (data, loadMore) {
      // setup data and begin parsing results
      var gif = data.data,
          i = 0,
          j = gif.length,
          list = $('<div class="gifactif_imagelist" />')[0];
 
      if (j) {
        for (; i < j; i++) {
          list.appendChild($('<img id="' + gif[i].id + '" src="' + gif[i].images.fixed_width.url + '" />').click(gifactif.insert)[0]);
        }
      } else if (!loadMore) {
        gifactif.reset(true, gifactif.lang.not_found);
      }
 
      // add results to the result list
      $('#gifactif_results', gifactif.dropDown).append(list);
    },
 
 
    // listen to the scrolling so we can add more gifs when the user reaches the bottom
    scrolling : function (that) {
      if (that.scrollHeight - that.scrollTop === that.clientHeight) {
        gifactif.loadMore();
      }
    },
 
 
    // load more results once the user has scrolled through the last results
    loadMore : function () {
      if (gifactif.offset < gifactif.offset_total) {
        gifactif.request = $.get('http://api.giphy.com/v1/gifs/search?q=' + gifactif.query + '&offset=' + gifactif.offset + '&limit=' + gifactif.limit + '&rating=pg-13&api_key=' + gifactif.key, function(data) {
          gifactif.request = null;
          gifactif.offset = data.pagination.offset + gifactif.limit;
          gifactif.offset_total = data.pagination.total_count;
 
          gifactif.addGIF(data, true); // send data to be parsed
        });
      }
    },
 
 
    // inserts the gif into the editor
    insert : function () {
      // add the gif to the editor and close the dropdown
      gifactif.callback('http://media0.giphy.com/media/' + this.id + '/giphy.gif');
 
      if (gifactif.auto_close) {
        gifactif.editor.closeDropDown(true);
        gifactif.reset();
      }
    },
 
 
    // reset the dropdown fields
    reset : function (resultsOnly, newContent) {
      $('#gifactif_results', gifactif.dropDown).html(newContent ? newContent : '');
 
      if (!resultsOnly) {
        $('#gifactif_search', gifactif.dropDown).val('');
      }
    }
  };
 
 
  // bind keyup event to search input
  $('#gifactif_search', gifactif.dropDown)[0].onkeyup = function(e) {
    var k = e.keyCode;
 
    // ignore specific key inputs to prevent unnecessary requests
    if (k && (k == 16 || k == 17 || k == 18 || k == 20 || k == 37 || k == 38 || k == 39 || k == 40)) {
      return;
    } else {
      gifactif.search(this.value);
    }
  };
 
  // initilize gifactif
  $(gifactif.init);
}());

Everything worked correctly for a long time, but a week ago it no longer works, it just keeps looking but it does not give results of the gifs.

I hope you can help me, because in the forum I found the code nobody writes messages.


Last edited by IvotitaQ on May 9th 2019, 6:12 am; edited 1 time in total
IvotitaQ
IvotitaQ
New Member

Posts : 2
Reputation : 2
Language : English - Spanish

https://www.fororeinasdemexico.com/

Back to top Go down

Solved Re: Giphy button in editor has stopped working

Post by skouliki on May 7th 2019, 10:23 am

hello

this forum is set is in read-only mode
i tested the code, it is not working properly you are right
i have another issue with the image resizer code ( if i remove the code then the members cant see any images at all) from this site so maybe the codes, in general, need an update but unfortunately, the creator is no longer log in


Last edited by skouliki on May 7th 2019, 2:57 pm; edited 1 time in total
skouliki
skouliki
Manager
Manager

Female Posts : 7170
Reputation : 1023
Language : English,Greek
Location : Greece

http://iconskouliki.forumgreek.com

Back to top Go down

Solved Re: Giphy button in editor has stopped working

Post by TonnyKamper on May 7th 2019, 1:50 pm

I can confirm both also aren't working anymore on my sites @skouliki  Oh my god
TonnyKamper
TonnyKamper
Forumember

Female Posts : 565
Reputation : 45
Language : Dutch/English
Location : The Netherlands

http://www.nederlandheelt.nl/forum

Back to top Go down

Solved Re: Giphy button in editor has stopped working

Post by APE on May 7th 2019, 2:06 pm

Yes there is a problem sadly we have no power over the code as this was made outside of forumotion.
If it was made our end we could then report it but sadly it is out of our hands Sad


Giphy button in editor has stopped working Left1212Giphy button in editor has stopped working Center11Giphy button in editor has stopped working Right112
Giphy button in editor has stopped working Ape_b110
Giphy button in editor has stopped working Ape1010
APE
APE
Administrator
Administrator

Male Posts : 14924
Reputation : 1618
Language : fluent in dork / mumbojumbo & English haha

http://chatworld.forumotion.co.uk/

Back to top Go down

Solved Re: Giphy button in editor has stopped working

Post by skouliki on May 7th 2019, 2:52 pm

i will tag the creator of both codes @Ange Tuteur but iam not sure when or if he will come soon
skouliki
skouliki
Manager
Manager

Female Posts : 7170
Reputation : 1023
Language : English,Greek
Location : Greece

http://iconskouliki.forumgreek.com

Back to top Go down

Solved Re: Giphy button in editor has stopped working

Post by SarkZKalie on May 8th 2019, 7:29 am

Replace beta key dc6zaTOxFJmzC - can be found in
Code:
 window.gifactif = {
    key : 'dc6zaTOxFJmzC', // PUBLIC BETA KEY
    limit : 26, // max image results
    delay : 200, // delay before searches commence (200ms)
    auto_close : true,
by this one
Code:
zHtcRqHdHFRZ5qcNI71Tt2nWNsNkb0rc


Giphy button in editor has stopped working Sarkzk10
SarkZKalie
SarkZKalie
Support Moderator
Support Moderator

Male Posts : 1100
Reputation : 179
Language : English

https://www.rotavn.xyz/

Back to top Go down

Solved Re: Giphy button in editor has stopped working

Post by TonnyKamper on May 8th 2019, 1:16 pm

Sweet @SarkZKalie I can confirm it's working again with your solution  :wouhou:
Maybe you'll have a solution too for the image resizer?
TonnyKamper
TonnyKamper
Forumember

Female Posts : 565
Reputation : 45
Language : Dutch/English
Location : The Netherlands

http://www.nederlandheelt.nl/forum

Back to top Go down

Solved Re: Giphy button in editor has stopped working

Post by Ange Tuteur on May 8th 2019, 5:27 pm

Hello,

I can confirm the issue is with the API key. The public beta key is no longer useable, as such you will need to replace the old key with your own API key. Note however, that your own API key is subject to rate limit constraints so I do not recommend using the same API key unless it's for production.

To get your own personal API key, go to https://developers.giphy.com/dashboard/?create=true and create a giphy account if you do not already have one. Once you've done that, click create an app and name it whatever you like and submit it. Afterwards you should be given an API key. Simply replace dc6zaTOxFJmzC in the script with your new API key.
Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13223
Reputation : 2961
Language : EN, JA, FR
Location : Macungie, PA

https://sethclydesdale.github.io/

Back to top Go down

Solved Re: Giphy button in editor has stopped working

Post by APE on May 8th 2019, 8:00 pm

great work it works great again now thanks Smile


Giphy button in editor has stopped working Left1212Giphy button in editor has stopped working Center11Giphy button in editor has stopped working Right112
Giphy button in editor has stopped working Ape_b110
Giphy button in editor has stopped working Ape1010
APE
APE
Administrator
Administrator

Male Posts : 14924
Reputation : 1618
Language : fluent in dork / mumbojumbo & English haha

http://chatworld.forumotion.co.uk/

Back to top Go down

Solved Re: Giphy button in editor has stopped working

Post by IvotitaQ on May 9th 2019, 6:11 am

@SarkZKalie wrote:Replace beta key dc6zaTOxFJmzC - can be found in
Code:
 window.gifactif = {
    key : 'dc6zaTOxFJmzC', // PUBLIC BETA KEY
    limit : 26, // max image results
    delay : 200, // delay before searches commence (200ms)
    auto_close : true,
by this one
Code:
zHtcRqHdHFRZ5qcNI71Tt2nWNsNkb0rc

Thank you so much, is working now ♥
IvotitaQ
IvotitaQ
New Member

Posts : 2
Reputation : 2
Language : English - Spanish

https://www.fororeinasdemexico.com/

Back to top Go down

Solved Re: Giphy button in editor has stopped working

Post by skouliki on May 9th 2019, 7:54 am

Problem solved & topic archived.
Please read our forum rules: ESF General Rules
skouliki
skouliki
Manager
Manager

Female Posts : 7170
Reputation : 1023
Language : English,Greek
Location : Greece

http://iconskouliki.forumgreek.com

Back to top Go down

Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum