%100 Çalışan Imgur ile Resim Ekle Butonu - Baskı Önizleme

%100 Çalışan Imgur ile Resim Ekle Butonu - Baskı Önizleme

+- MyBB Depo Forum (https://mybbdepo.com)
+-- Forum: MyBB 1.6 Depo (https://mybbdepo.com/mybb-1-6-depo-forumu)
+--- Forum: MyBB 1.6 Modifikasyon & Eklenti Deposu (https://mybbdepo.com/mybb-1-6-modifikasyon-eklenti-deposu-forumu)
+---- Forum: MyKod Filtreleri (https://mybbdepo.com/mykod-filtreleri-forumu)
+---- Konu Başlığı: %100 Çalışan Imgur ile Resim Ekle Butonu (/100-calisan-imgur-ile-resim-ekle-butonu-konusu.html)

Sayfalar: 1 2 3

%100 Çalışan Imgur ile Resim Ekle Butonu - iCarly - 16-07-2014

Merhaba arkadaşlar,

Aşağıda verdiğim linkte "EmreKarakaya" yöneticimizin hazırladığı konuda eksiklikler olduğunu görerek bu konuyu açmak istedim.

Kod:

http://mybbdepo.com/mybb-imgur-ile-entegre-etmek-konusu.html

Öncelikle;

Kod:

https://imgur.com/register/api_anon

Adresine giriyoruz ve üye isek giriş yapıyoruz, değilsek üye oluyoruz. Üye olduktan sonra tekrar aynı adrese gidip (imgur.com/register/api_anon) uygulamamızı oluşturuyoruz.

Application name: Buraya istediğiniz uygulama ismi. (Forum adınız, forum ismi, nickiniz vb.)

Authorization type: En önemli yer, EmreKarakaya abimizin verdiği imgur.php dosyası buradaki 2. şıktaki olduğu için sanırım çalışmıyor. (Ben çalıştıramadım açıkçası). Biz burada 3. şık olan "Anonymous usage without user authorization" şıkkını seçiyoruz. Bunun nedeni imgur'a üye olmayan herkesin normal olarak resim yükleyebilmesi olarak düşünüyorum.

Authorization callback url: Buraya

Kod:

https://imgur.com

yazıyoruz.

Application website: İsterseniz sitenizin adresini yazabilirsiniz.

E-mail: E-posta adresimizi yazıyoruz.

Description: Uygulamanız hakkında kısa bilgi. (forum resim yükle, resim yükle vb.)

Doğrulama kodunu yazıp "submit" butonuna basıyoruz ve karşımıza gelen ekrandaki "Client ID"yi kopyalıyoruz.

Şimdi burada "EmreKarakaya" abimizin verdiği "imgur.rar" dosyasındaki "imgur.php" dışındaki dosyaları ana dizine (index.php , images klasörlerinin vb. olduğu yer) yolluyoruz. Daha sonra yine abimizin verdiği "editor.js" değişim işlemlerini yapıyoruz.

Alıntı:[*]jscripts/editor.js Dosyasını Açın.Aşağıdaki Kodu Bulun

Kod:

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

Altına Aşağıdaki Kodu Ekleyin

Kod:

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

[*]Aşağıdaki Kodu Bulun

Kod:

insertIMG: function()     {         image=prompt(this.options.lang.enter_image, "http://");         if(image)         {             this.performInsert("[img]"+image+"[/img]", "", true);         }     },

Altına Aşağıdaki Kodu Ekleyin.

Kod:

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

[*]Aşağıdaki Kodu Bulup

Kod:

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

Altına Aşağıdaki Kodu Ekleyin.

Kod:

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

Şimdi ise aşağıda size verdiğim kodu "imgur.php" adlı bir dosya oluşturup içine yapıştırın;

Kod:

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>Imgur ile Resim Yükle</title>

</head>

</html>

<div><img src="images/imgur.png" border="0" /></div>

<br /><br />

<button onclick="document.querySelector('input').click()">Dosya Seç...</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

        var xhr = new XMLHttpRequest(); // Create the XHR (Cross-Domain XHR FTW!!!) Thank you sooooo much imgur.com

        xhr.open("POST", "https://api.imgur.com/3/image.json"); // Boooom!

        xhr.onload = function() {

            var code = '[img]' + JSON.parse(xhr.responseText).data.link + '[/img]';

            var editor = eval('opener.' + 'clickableEditor');

            editor.performInsert(code);

            javascript:window.close()

        }

        // Ok, I don't handle the errors. An exercice for the reader.

        xhr.setRequestHeader('Authorization', 'Client-ID Buraya Client ID yapıştır');

        /* 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>

Bu koddaki "Buraya Client ID yapıştır" kısmına Client ID'nizi yapıştırıyorsunuz fakat dikkat!

'Client-ID << bunu silmiyoruz örnekclientid57564655fbfddvdvdv');

Kaydediyoruz ve imgur.php dosyamızı da ana dizinimize yolladıktan sonra işlemimiz tamamlanmış oluyor Gülümseme

Gülümseme

Resim ile anlatım da yaptım isteyenler için. Sonuç görüntü de ekliyorum. Biraz uzun oldu özür dilerim Mahcup

Mahcup

Bu arada "EmreKarakaya" abimize ve aşağıda verdiğim kaynak linke teşekkürlerimi sunuyorum. Kolay gelsin.

Kaynaklar:

Kod:

http://www.emrekarakaya.com.tr

Kod:

http://hackercity.org/topic/1372-mybb-imgur-upload/

Resim ile anlatım ve Sonuç:

resim

resim

resim

resim

Buradan sonrası (öncesi de var tabi) yazılı anlatımda var oradan bakabilirsiniz.

Sonuç Ekran Görüntüsü:

resim

resim

Arkadaşlar saatlerdir bu konuyu açmak için uğraşıyorum umarım beğenirsiniz ve işinize yarar. Herkese kolay gelsin, iyi forumlar Gülümseme

Gülümseme

Cvp: %100 Çalışan Imgur ile Resim Ekle Butonu - merttuncers - 16-07-2014

teşekkürler Açık Ağızlı Gülümseme

Açık Ağızlı Gülümseme

Cvp: %100 Çalışan Imgur ile Resim Ekle Butonu - B-S-A - 16-07-2014

Anlatım için teşekkürler Gülümseme

Gülümseme

Cvp: %100 Çalışan Imgur ile Resim Ekle Butonu - iCarly - 16-07-2014

(16-07-2014, Saat:01:34)merttuncers Adlı Kullanıcıdan Alıntı: teşekkürler

(16-07-2014, Saat:01:39)B-S-A Adlı Kullanıcıdan Alıntı: Anlatım için teşekkürler

Sağ olun tabi ki tekrar belirtmek istiyorum, "EmreKarakaya" abimizin desteği sayesinde yapabildik bu uygulamayı da Gülümseme

Gülümseme

Tekrardan kendisine teşekkürler buradan Gülümseme

Gülümseme

Cvp: %100 Çalışan Imgur ile Resim Ekle Butonu - Toretto - 16-07-2014

Teşekkürler Güzel Paylasım Olmuş Süper

Süper

Cvp: %100 Çalışan Imgur ile Resim Ekle Butonu - iCarly - 16-07-2014

Ben teşekkür ederim herkese okuduğunuz için Mahcup

Mahcup

Cvp: %100 Çalışan Imgur ile Resim Ekle Butonu - DOGANORAL - 16-07-2014

Editör Kayboldu Açık Ağızlı Gülümseme

Açık Ağızlı Gülümseme

çözüm nedir

Cvp: %100 Çalışan Imgur ile Resim Ekle Butonu - iCarly - 16-07-2014

(16-07-2014, Saat:02:55)DOGANORAL Adlı Kullanıcıdan Alıntı: Editör Kayboldu çözüm nedir

Hocam editor.js dosyasında bir hata yapmışsınızdır. Diğerleriyle alakası olamaz Mahcup

Mahcup

orjinal editor.js dosyanızı anlatımı bir daha uygulayarak düzenleyin birde öyle deneyin Mahcup

Mahcup