Astuces Forumactif
Vous souhaitez réagir à ce message ? Créez un compte en quelques clics ou connectez-vous pour continuer.
Membres connectés récemment
Voir tous les membres

[PHPBB3] Taille gif animé


2 participants

Voir le sujet précédent Voir le sujet suivant Aller en bas

photoclic
https://photoclic.forum-pro.fr/

Messagephotoclic Sam 7 Nov 2020 - 20:14

  • Version du forum :
    PHPBB3
  • Templates modifiés :
    oui
  • Navigateur :
    Firefox
Bonjour à tous les milouziens,

Ci-dessous un script sympa dont je ne me souviens plus de l'origine, et qui permet de mettre dans ses messages des gifs animés de la même façon que des smileys.
L'ajout du bouton permettant cela est inclus dans le script.

Code:

//Bouton pour gifs animés sur réponse rapide
          (function() {
          'GIFACTIF - GIPHY PLUGIN FOR THE FORUMACTIF SCEDITOR';
          'REPOSITORY : https://github.com/SethClydesdale/gifactif';
          'SEARCH API BY : https://github.com/Giphy/GiphyAPI';
        
        
          // 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 : 'F6JCzxVGCsPAZ6NIAk7SzeSkAAycX8OL', // PUBLIC BETA KEY
            limit : 26, // max image results
            delay : 200, // delay before searches commence (200ms)
            auto_close : true,
        
            // general language settings
            lang : {
              searching : 'Recherche en cours...',
              not_found : 'Aucun résultat trouvé.. <img src="https://2img.net/i/fa/i/smiles/icon_sad.gif" style="margin:0;vertical-align:middle;"/>'
            },
        
            // dropdown markup
            dropDown : $(
              '<div>'+
                '<input type="text" id="gifactif_search" placeholder="GIF à rechercher..." 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 : 'Rechercher un GIF animé',
        
                  // 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(https://2img.net/i/fa//i/smiles/icon_biggrin.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(https://i.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);
        }());

    $(function(){$(function(){
    $('.sceditor-button-gifactif').insertAfter('.sceditor-button-emoticon');
    })});


L'aide demandée ici concerne la taille des gifs animés.

Serait-il possible de leurs imposer une largeur et une hauteur maximale de 100px.

Merci pour votre aide.


Dernière édition par photoclic le Dim 8 Nov 2020 - 13:33, édité 1 fois
Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Dim 8 Nov 2020 - 4:23

Hello Serge,
effectivement il est très sympa comme script.

Encore une belle œuvre de mon ami Ange Tuteur pour ton information:
https://fmdesign.forumotion.com/t994-gifactif-giphy-button-for-the-editor#20290

Alors pour l'affichage sur les messages, ce sera ce style Serge:

Dans la feuille de style:
Affichage/Images et Couleurs/Couleurs/Feuille de style

Ajoutes ceci:

Code:

.postbody .content img[src*="giphy.com"]{max-width:100px;max-height:100px;}

Penses a cliquer sur le bouton [PHPBB3] Taille gif animé Sans_t10

J'avais du temps ce matin alors..... MDR .

Pour le bloc contenant les images trouvées, tu peux ajouter ceci:
Code:

#gifactif_results div img{max-width:50px;max-height:50px;border-radius:100%;}

photoclic
https://photoclic.forum-pro.fr/

Messagephotoclic Dim 8 Nov 2020 - 13:33

Bonjour Philippe,

Merci pour le rappel de la référence d'Ange Tuteur; j'aurais du m'en douter :-)

ça fonctionne à merveille, ainsi que le bonus !

Un grand merci l'ami tape la

Confinons nous comme il faut Ha ha ha
Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Dim 8 Nov 2020 - 14:21

De rien Serge,
Hello


Sujet résolu et déplacé dans le forum adéquate  

A bientôt pour une prochaine demande  clin oeil

Voir le sujet précédent Voir le sujet suivant Revenir en haut

Créer un compte ou se connecter pour répondre

Vous devez être membre pour répondre.

S'enregistrer

Rejoignez notre communauté ! C'est facile !


S'enregistrer

Connexion

Vous êtes déjà membre ? Aucun soucis, cliquez ici pour vous connecter.


Connexion

 
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum