Post by SubDevo on May 27, 2010 1:21:27 GMT -8
Add Image Upload Links to Posting Page by SubDevo
Tested in IE, FF, Opera, Safari and Chrome.
PREVIEW
This code places links to TinyPic and ImageShack (see below to add more) to your posting page and PM's. This gives your members a choice of where to upload an image if they do not have their own image host. Both of these sites allow you to upload an image (without registering) and then give you the URL to that image so you may put it in a post.
Why didn't you just make an ImageShack uploader?
I could not find any other codes that worked with IE. I wanted this to be compatible with ALL browsers.
I wanted the code to be small. I wanted to give users a choice.
This code accomplishes all of the above simply.
Why not just use the Proboards Attachments for images?
If you have attachments enabled on your forum, you may not realize that you can only have one attachment per post (1 MB limit) and there is a 2 GB total storage limit per forum. You could quickly reach this limit with an active forum and after a couple years, you will need to start deleting attachments to make more room (Especially if your members attach larger files). This kills any posts with those attachments. Using an image host uploader takes this out of the equation.
Variables:
var divider=" | "; // Divider character or HTML
Enter your desired link divider character here. You may also use any HTML (i.e. image)
Example: var divider=" <img src='URL TO IMAGE' /> "; // Divider character or HTML
var iLinks=[ // Format ["SITE URL","TEXT OR IMG HTML FOR LINK"]
["tinypic.com/","TinyPic"],
["imageshack.us/","ImageShack"] <----- NO COMMA ON LAST LINE
]; // DO NOT TOUCH
Put the site URL to the upload page in the first option and the text for the link in the second.
You may also use an image instead of text for the link. Just use this for the option:
["http://tinypic.com/","<img src='URL TO IMAGE' />"],
TIP: If you use an image for the links, you may use a single space for your divider " ".
Copy/paste a line to add more.
Make sure there is a comma after each line and NO comma after the last line in the list.
Code default includes links for TinyPic and ImageShack since they are reliable.
You may add more, of course. Here are a few that I have found that do not require you to register.
["http://imgur.com","imgur"],
["http://www.freeimagehosting.net/upload.php","FreeImageHosting"],
["http://yourimg.in/","Yourimg"]
Enjoy!!!
SubDevo
Location: Global Footer
<script type="text/javascript">
/* Add Image Upload Links to Posting Page by SubDevo */
/* Global Footer - Please leave this header intact. Do not repost. */
/* interoceandesigns.com or lsdp.proboards.com */
var divider=" | "; // Divider character or HTML
var iLinks=[ // Format ["SITE URL","TEXT OR IMG HTML FOR LINK"]
["http://tinypic.com/","TinyPic"],
["http://imageshack.us/","ImageShack"]
]; // DO NOT TOUCH
if(document.postForm&&pb_username!="Guest"){ var pf=document.postForm;
var m=(pf.subject.parentNode.parentNode).cloneNode(true),a,n="",x=-1;
var t=((pf.icon)?pf.icon:pf.color.parentNode).parentNode.parentNode;
a=m.firstChild;a.firstChild.innerHTML="Image Upload Links:";
while(iLinks[++x]){
n+="<a href='"+iLinks[x][0]+"' target='_blank'>"+iLinks[x][1]+"</a>"+divider;
} a.nextSibling.innerHTML="<font size='2'>"+n.slice(0,-divider.length)+"</font>";
t.parentNode.insertBefore(m,t);
}
</script>
EDIT (2/06/11):
Added user selectable link divider character.
Tested in IE, FF, Opera, Safari and Chrome.
PREVIEW
This code places links to TinyPic and ImageShack (see below to add more) to your posting page and PM's. This gives your members a choice of where to upload an image if they do not have their own image host. Both of these sites allow you to upload an image (without registering) and then give you the URL to that image so you may put it in a post.
Why didn't you just make an ImageShack uploader?
I could not find any other codes that worked with IE. I wanted this to be compatible with ALL browsers.
I wanted the code to be small. I wanted to give users a choice.
This code accomplishes all of the above simply.
Why not just use the Proboards Attachments for images?
If you have attachments enabled on your forum, you may not realize that you can only have one attachment per post (1 MB limit) and there is a 2 GB total storage limit per forum. You could quickly reach this limit with an active forum and after a couple years, you will need to start deleting attachments to make more room (Especially if your members attach larger files). This kills any posts with those attachments. Using an image host uploader takes this out of the equation.
Variables:
var divider=" | "; // Divider character or HTML
Enter your desired link divider character here. You may also use any HTML (i.e. image)
Example: var divider=" <img src='URL TO IMAGE' /> "; // Divider character or HTML
var iLinks=[ // Format ["SITE URL","TEXT OR IMG HTML FOR LINK"]
["tinypic.com/","TinyPic"],
["imageshack.us/","ImageShack"] <----- NO COMMA ON LAST LINE
]; // DO NOT TOUCH
Put the site URL to the upload page in the first option and the text for the link in the second.
You may also use an image instead of text for the link. Just use this for the option:
["http://tinypic.com/","<img src='URL TO IMAGE' />"],
TIP: If you use an image for the links, you may use a single space for your divider " ".
Copy/paste a line to add more.
Make sure there is a comma after each line and NO comma after the last line in the list.
Code default includes links for TinyPic and ImageShack since they are reliable.
You may add more, of course. Here are a few that I have found that do not require you to register.
["http://imgur.com","imgur"],
["http://www.freeimagehosting.net/upload.php","FreeImageHosting"],
["http://yourimg.in/","Yourimg"]
Enjoy!!!
SubDevo
Location: Global Footer
<script type="text/javascript">
/* Add Image Upload Links to Posting Page by SubDevo */
/* Global Footer - Please leave this header intact. Do not repost. */
/* interoceandesigns.com or lsdp.proboards.com */
var divider=" | "; // Divider character or HTML
var iLinks=[ // Format ["SITE URL","TEXT OR IMG HTML FOR LINK"]
["http://tinypic.com/","TinyPic"],
["http://imageshack.us/","ImageShack"]
]; // DO NOT TOUCH
if(document.postForm&&pb_username!="Guest"){ var pf=document.postForm;
var m=(pf.subject.parentNode.parentNode).cloneNode(true),a,n="",x=-1;
var t=((pf.icon)?pf.icon:pf.color.parentNode).parentNode.parentNode;
a=m.firstChild;a.firstChild.innerHTML="Image Upload Links:";
while(iLinks[++x]){
n+="<a href='"+iLinks[x][0]+"' target='_blank'>"+iLinks[x][1]+"</a>"+divider;
} a.nextSibling.innerHTML="<font size='2'>"+n.slice(0,-divider.length)+"</font>";
t.parentNode.insertBefore(m,t);
}
</script>
EDIT (2/06/11):
Added user selectable link divider character.