1 - Create new stylesheet wit name "avtup.css" and add (repeat this step to all templates that you use)
2 - Creater new file using Notepad++ with name avatarup.php and add
2.1 - You can change 65000 with value you want. 65000 limit to 65 KB to upload.
2.2 - Upload avatarup.php to plugin folder and active the plugin
3 - Get imgur api key: https://imgur.com/register/api_anon (if you already has key, skip this step)
4 - Creater new file using Notepad++ with name avatarup.js and add
4.1 - Change yourid with key obtained in 3
4.2 - Upload avatarup.js to root/jscripts folder
5 - Open and edit usercp_avatar template
5.1 - Find
5.2 - add after
5.3 - Find
5.4 - add after
http://i.imgur.com/VD5YhHF.png
PHP Code:
.avtup {
display:inline-block;
padding:1.5px 5px;
margin:2px;
font-size:11px;
background:#eee;
border:1px solid #ccc;
color:#555;
border-radius: 6px 6px 6px 6px;
}
.avtup a span {
background-image: none !important;
padding: 0px 3px 0px 6px;
padding-left: 3px !important;
color:rgb(85, 85, 85);
}
.avtup:hover {
border-color: #bbb !important;
}
.avtup a {
background-image: none !important;
padding: 0px 3px 0px 6px;
padding-left: 3px !important;
color:rgb(85, 85, 85) !important;
text-decoration: none !important;
}
p.imgur {display: none}
.uploading p.imgur {display: inline}
2 - Creater new file using Notepad++ with name avatarup.php and add
PHP Code:
<?php
// Disallow direct access to this file for security reasons
if(!defined("IN_MYBB"))
{
die("Direct initialization of this file is not allowed.<br /><br />Please make sure IN_MYBB is defined.");
}
// Plugin info
function avatarup_info ()
{
return array(
"name" => "avatarup",
"description" => "avatarup",
"website" => "avatarup",
"author" => "avatarup",
"authorsite" => "avatarup",
"version" => "avatarup",
"guid" => "avatarup",
"compatibility" => "16*"
);
}
$plugins->add_hook("usercp_do_avatar_start", "avatarup_start");
function avatarup_start()
{
global $mybb;
if($mybb->input['imgurup'])
{
$file = "http://i.imgur.com/{$mybb->input['imgur']}";
$contentLength = strlen(@file_get_contents($file));
if ($contentLength < 65000) {
$mybb->input['avatarurl'] = "http://i.imgur.com/{$mybb->input['imgur']}";
}
else {
error("The image size exceeds the allowed limit of 65kb.");
}
}
}
?>2.1 - You can change 65000 with value you want. 65000 limit to 65 KB to upload.
2.2 - Upload avatarup.php to plugin folder and active the plugin
3 - Get imgur api key: https://imgur.com/register/api_anon (if you already has key, skip this step)
4 - Creater new file using Notepad++ with name avatarup.js and add
PHP Code:
window.ondragover = function(e) {e.preventDefault()}
window.ondrop = function(e) {e.preventDefault(); upload(e.dataTransfer.files[0]); }
function uploadavt(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 = JSON.parse(xhr.responseText).data.link;
var regExp = "/i.imgur.com/([^_]+)/?";
var match = code.match(regExp);
if (match&&match[1]){
code = match[1];}
document.getElementById('imgur').value += code;
document.getElementById('imgur2').style.display = "none";
}
// Ok, I don't handle the errors. An exercice for the reader.
xhr.setRequestHeader('Authorization', 'Client-ID yourid');
/* And now, we send the formdata */
xhr.send(fd);
}
4.2 - Upload avatarup.js to root/jscripts folder
5 - Open and edit usercp_avatar template
5.1 - Find
PHP Code:
{$headerinclude}
PHP Code:
<script type="text/javascript" src="jscripts/avatarup.js"></script>
PHP Code:
<td class="trow2" width="60%"><input type="text" class="textbox" name="avatarurl" size="45" value="{$avatarurl}" /></td>
</tr>
PHP Code:
<tr>
<td class="trow1" width="40%"><strong>Imgur:</strong></td>
<td class="trow1" width="60%">
<form enctype="multipart/form-data" action="usercp.php" method="post">
<input type="hidden" name="my_post_key" value="{$mybb->post_code}" />
http://i.imgur.com/<input type="text" id="imgur" class="textbox" name="imgur" size="30" value="" /> <span class="avtup"><a href="javascript:void(0)" onclick="document.querySelector('input.imgur').click()" title="Upload to Imgur"><span>Select file...</span></a></span><input class="imgur" style="visibility: collapse; width: 0px;" type="file" onchange="uploadavt(this.files[0])"> <p id="imgur2" class="imgur"><img src="images/spinner.gif" border="0" /></p> <input type="checkbox" name="imgurup" value="1" /> Use Imgur.
</td>
</tr>
http://i.imgur.com/VD5YhHF.png