Utiliser imgur comme hébergeur d'image

par Ea Dim 13 Sep 2015 - 18:48

Utiliser Imgur comme hébergeur d'image

Cette astuce permet de remplacer le module de télécharger et d'hébergement d'image sur Servimg, par le service d'hébergement d'image d'Imgur.

 Avantages

 Limites

- Peut rendre l'envoi d'image plus rapide ;

- Permet d'envoyer également des fichier au format apng, pdf et xcf en plus de bmp, jpg, png, gif, tiff (les fichiers tiff, bmp, pdf et xcf sont convertis en png, et les png plus grand que 756ko sont converti automatiquement en jpg) ;

- Permet en prenant l'URL Imgur et en retirant l'extension (par exemple .jpg, .png, .gif) d'arriver à une page où on voit le nombre de vue, des statistiques ainsi que différents codes de différentes dimensions de l'image.

- Vous n'avez plus la stabilité de Servimg, mais celle d'Imgur. En cas de cession d'activité d'Imgur, Forumactif ne pourra pas récupérer vos images ;

- Il y a une limite de base du nombre maximum d'hébergement par jour, elle est actuellement d'environ 1250 (voir la page d'imgur avec ses limites) ;

- Il n'y a pas moyen de donner une URL (pour réhéberger une image).

Installation

Création du script

Panneau d'administration  Modules  HTML & JAVASCRIPT - Gestion des codes Javascript

Assurez-vous que la gestion des codes Javascript soit activée, puis créez un nouveau javascript ayant pour titre "Imgur comme hébergeur d'image" et pour placement "Sur toutes les pages" (plus d'informations sur la gestion des scripts).

Code:: ;window['FormData'] && $(function(){$(function(){ var imgur_client_id = '##VOTRE_CLIENT_ID##'; // remplacer par celui reçu en créant l'application via http://api.imgur.com/oauth2/addclient var current = 0, uploaded, xhrs, file_selector, button = $('.sceditor-button-servimg').off().click(function(){ if(current) return finish(); if(!file_selector) file_selector = $('<input type="file" multiple/ accept="image/*">').css({position:'absolute', top:-100}).appendTo('body').change(function (e) { var files = e.target.files, fd, len; uploaded = [], xhrs = []; for (var i = 0, len = files.length; i < len; i += 1) { if (files[i].type.indexOf('image/') && files[i].type !== 'application/pdf') continue; current++; fd = new FormData(); fd.append('image', files[i]); (function(xhr){ var num = i, xhr = jQuery.ajaxSettings.xhr(); xhrs.push(xhr); xhr.open('POST', 'https://api.imgur.com/3/image'); xhr.setRequestHeader('Authorization', 'Client-ID '+imgur_client_id); xhr.onreadystatechange = function () { if (xhr.readyState !== 4) return; current--; if (xhr.status === 200) { var res = JSON.parse(xhr.responseText); uploaded[num] = res.data.link; } if(!current) finish(); }; xhr.send(fd); })(); } if(current) button.css({background:'url(https://i.imgur.com/EMsOJtZ.gif) no-repeat'}); }); file_selector.click(); return false; }).children(); var finish = function(){ for(var i=0; i < xhrs.length; i++) { if(xhrs[i].readyState == 4) continue; xhrs[i].onreadystatechange = function(){}; xhrs[i].abort(); } for(var i=0; i < uploaded.length; i++) { if(uploaded[i] === undefined) continue; $('body').find('.sceditor-button-image').click().end().find('.sceditor-insertimage').find('#image').val(uploaded[i]).end().find('input.button').click(); $('#text_editor_textarea').sceditor('instance').insertText('\n'); } button.removeAttr('style'); current = 0; file_selector.wrap('<form>').closest('form').get(0).reset(); file_selector.unwrap(); return false; }; })});

A la ligne 3 du script, il est nécessaire de remplacer l'élément ##VOTRE_CLIENT_ID## par l'ID du client de votre compte Imgur (voir étape suivante) :

Créer son compte Imgur

Pour pouvoir remplacer ##VOTRE_CLIENT_ID##, il faut aller sur ce lien pour enregistrer une demande d'utilisation du service d'Imgur.

Utiliser imgur comme hébergeur d'image 13-03-22

Créer une API sur Imgur

Si vous avez (déjà) un compte Imgur, il vous suffit de vous connecter à ce dernier et vous rendre sur ce lien :

Utiliser imgur comme hébergeur d'image 13-03-23

Une fois être connecté et que vous êtes sur la page "Register an Application", vous devez remplir le formulaire comme suit :

Voir illustration :

Les deux choses importantes à mettre, sont :

Dans "Authorization type" choisir "Anonymous usage without user authroization",
Dans "Authorization callback URL" mettre l'adresse de votre forum.

Une fois le formulaire bien rempli et envoyé, vous arriverez (et vous le recevrez aussi par email) sur une page qui vous donne votre "Client ID" :

Voir illustration :

C'est ce code qu'il faudra replacer dans le script plus haut, donc pour cet exemple, je devrais modifier la ligne du script comme cela :

Code:: var imgur_client_id = 'bb58c8c1e[caché]';

N'oubliez pas de cliquer sur le bouton Valider pour sauvegarder les modifications.