Aggiungi Imgur Uploader su MyBB

19 Luglio 2013 Provatoo.NET

Ciao ragazzi,

nonostante avvento dei social network per condividere foto Imgur si oppone prepotentemente come image hosting. Se nel nostro forum in MyBB non vogliamo appesantire il database, appoggiarsi su un image hosting è la scelta migliore! Per agevolare i nostri utenti, apprezzeranno sotto editor, uploader per Imgur. Ecco come fare:

Crea le tue API https://imgur.com/register/api_anon

Con aiuto di Notepad++ crea il file imgur.php con il seguente codice:

<html>
<head>
<title>Upload to Imgur</title>
</head>
</html>
<div><img src="images/imgur.png" border="0" /></div>
<br /><br />
<button onclick="document.querySelector('input').click()">Select file...</button>
<input style="visibility: collapse; width: 0px;" type="file" onchange="upload(this.files[0])">

<script>
    window.ondragover = function(e) {e.preventDefault()}
    window.ondrop = function(e) {e.preventDefault(); upload(e.dataTransfer.files[0]); }
    function upload(file) {

        /* Is the file an image? */
        if (!file || !file.type.match(/image.*/)) return;

        /* It is! */
        document.body.className = "uploading";

        /* Lets build a FormData object*/
        var fd = new FormData(); // I wrote about it: https://hacks.mozilla.org/2011/01/how-to-develop-a-html5-image-uploader/
        fd.append("image", file); // Append the file
        fd.append("key", "your key"); // Get your own key http://api.imgur.com/
        var xhr = new XMLHttpRequest(); // Create the XHR (Cross-Domain XHR FTW!!!) Thank you sooooo much imgur.com
        xhr.open("POST", "http://api.imgur.com/2/upload.json"); // Boooom!
        xhr.onload = function() {
            var code = '[img]' + JSON.parse(xhr.responseText).upload.links.original + '[/img]';
            var editor = eval('opener.' + 'clickableEditor');
            editor.performInsert(code);
            javascript:window.close()
        }
        // Ok, I don't handle the errors. An exercice for the reader.

        /* And now, we send the formdata */
        xhr.send(fd);
    }
</script>

<!-- Bla bla bla stuff ... -->

<style>
    body {text-align: center; background-color: #181817; overflow-x:hidden; overflow-y:auto;}
    div { background-color: rgb(43, 43, 43); border-bottom: 4px solid rgb(68, 68, 66); margin: -8px;}
    p {display: none}
    .uploading p {display: inline}
</style>
<br /><br />
<p><img src="images/loader.gif" border="0" /></p>

Carica questo file nel root del tuo forum MyBB
Cambia la tua key e scrivi 1, all’interno del file imgur.php (linea 25)
In allegato, troverai le immagini loader.gif e imgur.png caricale nella cartella d’installazione di MyBB
Mentre imgurbut.png caricalo nel percorso jscripts/editor_themes/default/images/ e jscripts/editor_themes/office2007/images/
Apri jscripts/editor.js e trova:

{type: 'button', name: 'img', sprite: 'image', insert: 'image', extra: 1, title: this.options.lang.title_image},

Aggiungi dopo:

{type: 'button', name: 'imgur', insert: 'imgur', image: 'imgurbut.png', title: 'Carica su Imgur'},

Ora trova:

insertIMG: function()
    {
        image = prompt(this.options.lang.enter_image, "http://");

        if(image)
        {
            this.performInsert("[img]"+image+"[/img]", "", true);
        }
    },

Dopo aggiungi:

insertImgur: function()
    {
        MyBB.popupWindow('imgur.php', 'imgur', 240, 200);
    },

Trova:

case "image":
                this.insertIMG();
                break;

Aggiungi dopo:

case "imgur":
                this.insertImgur();
                break;

Ora non ti resta che goderti uploader di Imgur 😀

Scarica le immagini che ho citato –> [download id=”143″]