Hi guys,

I run an image hosting site and have completed a very interesting module that allows forum owners to integrate image uploading with their forum - an 'UPLOAD IMAGE' button that launches a popup with the upload form.

My image hosting site is optimized specifically for posting photos, screenshots and wallpapers on forums. It resizes to a user-selected width of up to 1600px (resizing only occurs if the uploaded image exceeds the selected width). It also converts to jpeg. The default width is a comfortable 400px which is fast to load for your users and unlikely to break layouts. The major benefit to forum owners is they don't end up with 5mb of photos in a post that dialup users are viewing!

Other features include generating thumbnails for the uploads so users can just paste a 120x120 thumb with the link leading to the full image.

If anyone would like to test it I have prepared instructions for integrating it with IPB at two popular locations: invisionfree.com and forumer.com.

If you have direct access to the files then you will find it very easy to implement.

If you have direct access to your files
Add this code anywhere on your page:
<div class='quotetop'>QUOTE[/center]<div class='quotemain'>
<script language="javascript" src="http://forum.imgfree.net/uploadpop.js"></script>
<noscript>Image Hosting</noscript>
[/b][/quote]

Add this code where you would like the button to appear:
<div class='quotetop'>QUOTE[/center]<div class='quotemain'>
<input type="button" value="UPlOAD IMAGE" cssclass="codebuttons" onclick="LaunchImgFree();" />
[/b][/quote]

For InvisionFree.com (Updated to support Opera)
All you need to do to add an 'UPLOAD IMAGE' button to your forum @ invisionfree.com is add this code to your Footer in your administration control panel:
<div class='quotetop'>QUOTE[/center]<div class='quotemain'><script language="javascript" src="http://forum.imgfree.net/uploadpop.js"></script>
<noscript>Image Hosting</noscript>
<script type="text/javascript">
var b = document.getElementsByTagName("input");
var numb = b.length;
for(i=0;i<numb; i++)
{
if(b[i].name == "img")
{
// get the parent element
var c = b[i].parentNode;

br = ((c.innerHTML.indexOf("
") > 0) ? "
" : ((c.innerHTML.indexOf("
") > 0) ? "
" : "
"));

// internet explorer
var ctextarr = c.innerHTML.split(br);

// put the inner text back together with the new button
c.innerHTML = ctextarr[0] + br + ctextarr[1];
c.innerHTML += "<input type=\"button\" class=\"codebuttons\" value=\"UPLOAD IMAGE\" onclick=\"LaunchImgFree();\" title=\"Upload Image\" />";
c.innerHTML += br + ctextarr[2];
break;
}
}
</script>[/b][/quote]

For Forumer.com
If you're using IPB at Forumer then you need to follow these instructions:

Navigate to 'Html Template -> Manage HTML -> Post Screen Sections -> "Edit Single" on Post: Code Buttons & Post Text area'

Find this piece of code:
<div class='quotetop'>QUOTE[/center]<div class='quotemain'>
<input type='button' accesskey='g' value=' IMG ' onclick='tag_image()' class='codebuttons' name='img' onmouseover="hstat('img')" />
[/b][/quote]

Change it to this piece of code:
<div class='quotetop'>QUOTE[/center]<div class='quotemain'>
<input type='button' accesskey='g' value=' IMG ' onclick='tag_image()' class='codebuttons' name='img' onmouseover="hstat('img')" />
<script language="javascript" src="http://forum.imgfree.net/uploadpop.js"></script>
<noscript>Image Hosting</noscript>
<input type='button' value='UPLOAD IMG' onclick='LaunchImgFree();' class='codebuttons' />
[/b][/quote]

Screenshots

Thanks for the great mod, ben...I have never personally seen the mod in action, but have heard it works very well

*stickied*

great work, and welcome to the forums!

__________________
...some super-sweet signature

Thanks Cadence

It's been met with some really great feedback from people and I'm amazed at just how well it's been received!