BRIT NERF Forum Index
Join! (free) SearchFAQMemberlistUsergroupsLog in
How to add images to forum posts

 
This topic is locked: you cannot edit posts or make replies.    BRIT NERF Forum Index » Q&A and New members View previous topic
View next topic
How to add images to forum posts
Author Message
SSGT
Nerf Addict


Joined: 12 Jan 2013
Posts: 1275
Fav. Blaster: 'Rave-N' CS-18, Elite Alpha Trooper (EAT) CS-12
Location: Durham



Post How to add images to forum posts  Reply with quote
Since it's a question that's come up a few times recently. Razz

Unfortunately you can't upload images directly to the forum itself. You need to host the image on a separate image hosting site and link to it with BBCode. Below are the most commonly used hosting sites and their main features along with detailed step-by-step instructions, for each of the listed hosting sites, for uploading and resizing images (max image size on the forum is 640x480) on those sites and which codes to use on each site to add images to your posts. There is an example image and code at the end of each set of instructions. Partly to show you what they should look like and partly just as an experiment to see how long each hosting site will host the image for. Razz

The two recommended options are imgur and postimage (neither require a separate account) but other options, such as flickr and photobucket, are also listed for those who may already have an account with/prefer one of these alternatives. Imgur is more powerful but postimage is easier to use for newcomers, especially when using the "Add image to post" link below the text box used to write posts on the forum (although this defaults to posting a 180x135 hotlinked thumbnail).

imgur (recommended)
  • No account required for uploads (option to log in with facebook, twitter, Google, Yahoo or separate account - this is highly recommended as it makes posting 640x480 size images, in accordance with forum rules, much easier).
  • As of February 2015, images will no longer be deleted unless requested and there is no longer a cap on number of images you can upload.
  • Can upload directly from clipboard (VERY good for screenshots).
  • Mobile app available.

Spoiler:


Head over to imgur.com (if you have/want an account log in/sign up now - highly recommended as noted above) and select “New post” in the top left corner.



Select how you want to upload your image. You can drag and drop, browse your device or paste an image (useful for screenshots) or URL. In this case I’ll be uploading from files on my computer by selecting “Browse”.



Browse through your device and select the image(s) you want to upload (you can upload more than one at once).



Once the image is selected, choose “Open” and the image(s) will be uploaded into a post.



Once the image is uploaded you’ll be presented with this screen.



If you have an account:

Select "Images" from the drop-down box by your username in the top-right corner.



Find and select the image you want to link to.



You will be presented with the following screen. IMPORTANT: Ensure that "Large Thumbnail" is selected in the "Sizes" box in the bottom-right corner (the current selection is highlighted in green). This will ensure the image you post is scaled down to no more than 640 pixels wide.



Click on the button next to either "BBCode (message boards & forums)" or "Linked BBCode (message boards)" depending on whether or not you want the image you post to link to the full size version when clicked (especially useful if there's some small detail in the image that might not be visible when scaled down to 640x480 for the forum).




Paste that link into your post and it will look something like this (if you selected "BBCode (message boards & forums)":

Code:
[img]http://i.imgur.com/posmzuWl.jpg[/img]


...or this (if you selected "Linked BBCode (message boards)":

Code:
[url=http://i.imgur.com/posmzuW][img]http://i.imgur.com/posmzuWl.jpg[/img][/url]



If you don't have an account:

Hover over the image and a copy link will appear. DO NOT use this link, instead click on the drop-down box next to the link. If you want to resize your image to 640x480 pixels (you aren't allowed to post anything larger on this forum) select on "Edit image" and resize and save the image. If it is already 640x480, or you want to keep the full size image and only post a smaller version, instead select "Get share links".



Select "Copy" next to the link beneath "BBCode (Forums)". The code is then copied to your device's clipboard.



Paste that link into your post and it will look something like this:

Code:
[img]http://i.imgur.com/posmzuW.jpg[/img]


If the image you uploaded is larger than 640x480, or if you aren't sure how large it is, then you will need to add the letter "l" (lowercase L) to the end of the image link but before the image's file extension (i.e. just before .jpg or .png etc.). This changes the link to a "large thumbnail" which will be no larger than 640 pixels wide (imgur used to handle this better, with an option to link to a large thumbnail in the share options on their site, but now this appears to be the best way to do it):

Code:
[img]http://i.imgur.com/posmzuWl.jpg[/img]


If you want the image to link to the full size version when clicked then highlight the image code in your post and select "URL" from the options at the top of the forum's posting box and enter the URL of the full size image as per the code below and you have an image which, when clicked, will take you to the full size version:

Code:
[URL=http://imgur.com/posmzuW][img]http://i.imgur.com/posmzuWl.jpg[/img][/URL]


Result:

You should end up with something that looks like this (if you made a linked image it'll also link to the full size version as it does below):





postimage.org (recommended)
  • No account required for uploads (option to sign up/log in with dedicated account).
  • No cap to the number of images you can upload and they claim that "you will never have to worry about your images being removed for inactivity” (images posted in September 2014 are still live).
  • Semi-integrated into the forum (there is a link entitled "Add image to your post" below the box into which you enter your post which opens the postimage.org homepage in a new window).
  • Extremely fast and simple to upload images to the forum when using the integrated forum link (although this defaults to posting a 180x135 hotlinked thumbnail).

Spoiler:


Head over to the postimage homepage (either directly or by clicking on the "Add image to post" link underneath the text box used to enter your post, although the latter defaults to posting a 180x135 hotlinked thumbnail). You can create an account if you want to but it's not essential (the method is the same with or without an account).



Unless you are sure the image you are uploading is smaller than 640x480 (or as long as you don't mind posting a very small 180x135 size image that links to the full size image when clicked) select "640x480 (for message boards)" from the drop-down list. This is important as you won’t be able to change the size of the image later (other than to that really small 180x135 thumbnail).



Ensure that "Family safe" is selected (if you're uploading something that isn't "family safe" we probably don't want it on the forum), ensure that the expiry drop-down is set to "No expiration" (if you used the "Add image to your post" forum link you don't have to worry about this) and select "Choose images".



Browse through your device and select the image(s) you want to upload (you can upload more than one at once).



If you used the "Add image to your post" forum link the code will be automatically entered into your post and the following won't apply.

Uploading one image:

Once the upload finishes you’ll be redirected to this screen.



If you selected 640x480 from the drop-down box earlier, or if the image you were uploading was less than 640x480 anyway, click on the button next to the code for "Hotlink for forums:". If you didn't you'll have to use the button next to "Thumbnail for forums:" instead.



Paste that link into your post and it will look something like this:

Code:
[url=https://postimg.org/image/o5y8gnr0j/][img]https://s21.postimg.org/iujbvy4xz/EAT.jpg[/img][/url][url=https://postimage.org/]free upload[/url]



You should delete this…

Code:
[url=https://postimage.org/]free upload[/url]


…from the end of the code you paste as it adds an unnecessary link to your post. Alternatively you could use the "Direct link:" button instead of "Hotlink for forums:" and add the image tags yourself by highlighting the link in your post and either selecting "Img" from the top of the forum's posting box or by pressing Alt+P.

Uploading multiple images:

Once the upload finishes you’ll be redirected to this screen.



If you selected 640x480 from the drop-down box earlier, or if the image you were uploading was less than 640x480 anyway, open the drop-down menu and select "Hotlink for forums". If you didn't you'll have to use "Thumbnail for forums" instead. Leave the bottom drop-down menu set to "1 Column".



Click on the button to the right of the code box to copy the contents.



Paste that link into your post and it will look something like this:

Code:
[url=https://postimg.org/image/drs1i2bbp/][img]https://s18.postimg.org/drs1i2bbp/EAT_1.jpg[/img][/url]

[url=https://postimg.org/image/evc5u0vyt/][img]https://s18.postimg.org/evc5u0vyt/EAT.jpg[/img][/url]


[url=https://postimage.org/]upload images free[/url]


You should delete this…

Code:
[url=https://postimage.org/]free upload[/url]


…from the end of the code you paste as it adds an unnecessary link to your post. Alternatively you could select "Direct link" instead of "Hotlink for forums" and add the image tags yourself by highlighting the individual image links in your post and either selecting "Img" from the top of the forum's posting box or by pressing Alt+P.

Result:

You should end up with code that looks something like this for each image:

Code:
[url=https://postimg.org/image/evc5u0vyt/][img]https://s18.postimg.org/evc5u0vyt/EAT.jpg[/img][/url]


Which will give you something that looks like this:





flickr
  • Need a Yahoo account (you can technically log in with Google or facebook but you have to make a Yahoo account on top of that).
  • Apps available.
  • 1TB free storage.

Spoiler:


Once you have an account, and log in, head over to the flickr homepage and select the upload to cloud logo at the top-right of the screen.



Select how you want to upload your image. You can either drag and drop or browse your computer. In this case I’ll be uploading from files on my computer by selecting “Choose photos and videos to upload”.



Browse through your device and select the image(s) you want to upload.



Once the image is selected you’ll see this screen. Select “Upload 1 photo” (or however many images you are uploading) in the top right corner of the screen…



…and then select “Upload” on the popup dialogue box.



Once the image is uploaded you’ll be presented with this screen.



Click the image and you’ll come to this screen. Select the “Share this photo” icon (it’s the middle icon i.e. an arrow pointing right) in the bottom right corner.



This popup will appear. By default it’ll show a direct link to the image on flickr, select BBCode instead.



If it isn't already, open the drop-down box of sizes and select “Medium 640 x 480” size or smaller (640x480 is the max. allowed size on this forum).



Copy the code highlighted below the image size box.



Paste that link into your post and you’ll have an image which, when clicked, will take you to the full size version:

Code:
[url=https://flic.kr/p/psiHv3][img]https://farm4.staticflickr.com/3846/15393891072_a87f4f1796_z.jpg[/img][/url][url=https://flic.kr/p/psiHv3]DSC_0586[/url] by [url=https://www.flickr.com/people/127492002@N06/]red6194[/url], on Flickr


You should delete this text and URL code at the end of the image code (after the first [/url] tag)...

Code:
[url=https://flic.kr/p/psiHv3]DSC_0586[/url] by [url=https://www.flickr.com/people/127492002@N06/]red6194[/url], on Flickr


...to remove unwanted guff from your posts. If you do that it’ll look more like this:

Code:
[url=https://flic.kr/p/psiHv3][img]https://farm4.staticflickr.com/3846/15393891072_a87f4f1796_z.jpg[/img][/url]



If you don’t want to link to the full size image on the flickr page, delete everything outside of the IMG tags:

Code:
[img]https://farm4.staticflickr.com/3846/15393891072_a87f4f1796_z.jpg[/img]




Photobucket
  • Need either a facebook or dedicated Photobucket account.
  • 2GB free storage (+8GB if you download and log into their app).
  • Need to manually resize photos either before or after uploading.

Spoiler:


Once you have an account, and log in, head over to the photobucket homepage and select “Upload” (there are two links, it doesn’t matter which you use).



Select how you want to upload your image. In this case I’ll be uploading from files on my computer by selecting “Choose photos & videos”.



Browse through your device and select the image you want to upload.



Once the image is selected, choose “View Uploads”.



Once the image is uploaded you’ll be presented with this screen. Select and open the image by clicking on it.



If you know your image is 640x480 pixels or smaller, you can go straight to the “SHARE THIS PHOTO” list at the right of the image. If it is larger than 640x480, or you are unsure, hover over the image and select “Edit” from the options bar that appears.



You will be presented with this screen.



Select “Resize” and you’ll be given this screen along with the current resolution.



If it isn’t already, change the resolution to 640x480 (or less) and select “Apply”.



Unless you want to do any other editing you can now tick the “Replace Original” box (unless you need the full size image to link to this is highly recommended as Photobucket has a limit on storage size rather than just number of images) and select “Save”.



You’ll be directed back to this screen and the image will have been saved at the new resolution.



To the right of the image is a list of links entitled “SHARE THIS PHOTO”. Select the “IMG” link and it will be copied to your computer’s clipboard.



Paste that link into your post and you have an image which, when clicked, will take you to the Photobucket page:

Code:
[URL=http://s1290.photobucket.com/user/red6194/media/DSC_0586_zps1139909c.jpg.html][IMG]http://i1290.photobucket.com/albums/b532/red6194/DSC_0586_zps1139909c.jpg[/IMG][/URL]



Alternatively, select the “Direct” link instead of the “IMG” link and post that in IMG tags instead if you don’t want to link to the Photobucket page:
Code:
[IMG]http://i1290.photobucket.com/albums/b532/red6194/DSC_0586_zps1139909c.jpg[/IMG]




tinypic
  • No account required for uploads (although images uploaded without an account may be deleted after 90 days of no views).
  • 1600 pixel size (width or height) and 100MB size limit (forum limit is 640x480 pixels but you may want to upload a larger version to link to).
  • Very simple to use.

Spoiler:


(This is the same with or without an account)
Head over to the tinypic homepage. You can create an account if you want to but it's not essential (the method is the same with or without an account).



Select “Choose File”, browse through your device and select the image you want to upload.



If the image isn’t already, open the “Resize:” drop-down box and select “Message Board (640x480)” size or smaller. This is important as you won’t be able to change the size of the image later.


Add any tags that you want to the select “UPLOAD NOW!”.



Fill in the captcha/solvemedia text and select “UPLOAD NOW!”.



Once the upload finishes you’ll be redirected to this screen.



Under “Share This Image” select and copy the code under “IMG Code for Forums & Message Boards”.



Paste that into your post and you’re done:

Code:
[IMG]http://i64.tinypic.com/259a79y.jpg[/IMG]




Updated: 02/11/2016

_________________
Trust me, I'm an engineer! Very Happy

Antonius wrote:
Compoooter bits make shiny Nerf blaster go whoosh!


Last edited by SSGT on Sun Nov 06, 2016 1:23 pm; edited 35 times in total
Mon Sep 29, 2014 10:46 pm View user's profile Send private message
Big_Poppa_Nerf.
Senior Member


Joined: 27 Dec 2013
Posts: 518
Fav. Blaster: I have lots of fav. blasters!
Location: West Midlands



Post Reply with quote
Well written and very informative. Thanks SSGT.

I may be an IT techy, but Britnerf is the first forum i have been active on in almost 15 years. The last forum i was active on used HTML.

I'm 30 now but feel a hella of lot older!! I spent a lot of Uni days programming in Pascal. Don't ask, i really don't remember any of it as it pretty much died the year i learnt it and I have never had an opportunity to put it into practice. The only stuff that really sticks with me is VB and C. C is also a dead programming language, its C+ now.........

I digress.

Thanks again SSGT.

_________________
Regards

Big Poppa Nerf.


OldNoob wrote:

The Flymo is half price too because nobody loves it.
Mon Sep 29, 2014 11:36 pm View user's profile Send private message
tbr
Veteran Member


Joined: 23 May 2014
Posts: 307
Location: Blackpool



Post Another possible option Reply with quote
I personally use dropbox for my image hosting, people may use dropbox (for it's awesome syncing etc) and not realise that it's also an option for image hosting (if the images are in your public folder).
Tue Sep 30, 2014 9:20 am View user's profile Send private message Send e-mail
SSGT
Nerf Addict


Joined: 12 Jan 2013
Posts: 1275
Fav. Blaster: 'Rave-N' CS-18, Elite Alpha Trooper (EAT) CS-12
Location: Durham



Post Reply with quote
I noticed that. The reason I ruled it out is, to enable a Public folder to be able to host images, you need a Pro account. Like a few people, I use Dropbox but not enough for a Pro account. All of the options listed here are free (although some have paid upgrade options). This guide is mainly for people new to the forum who have literally no idea how to add images to posts (although they may already have an image hosting account). That said it is a very good option for someone with a Dropbox Pro account and is actually pretty simple to do.

I could add Google+ but it's a pain in the arse especially for people who are new to image hosting. Up until now I've been using Picasa Web Albums and it's been pretty damn good. However, with Google pushing everything towards Google+ (and now they've even started automatically redirecting from Picasa to G+ photos), it might not be a viable option for much longer.

I might look into Onedrive though. If you have a Win8 PC you will also have a Onedrive account and folder.

EDIT:
Currently Onedrive will not allow image hosting other than embedded HTML (and you can't get the direct link to parse in IMG tags either).

You can with Google Drive though, and it has most of the benefits of Dropbox.

_________________
Trust me, I'm an engineer! Very Happy

Antonius wrote:
Compoooter bits make shiny Nerf blaster go whoosh!


Last edited by SSGT on Tue Sep 30, 2014 10:37 am; edited 1 time in total
Tue Sep 30, 2014 10:16 am View user's profile Send private message
tbr
Veteran Member


Joined: 23 May 2014
Posts: 307
Location: Blackpool



Post Reply with quote
SSGT wrote:
The reason I ruled it out is, to enable a Public folder to be able to host images, you need a Pro account.


Erm....I havn't got a pro account and I use it to host my images. Not sure if it's something that I was grandfathered into as I have had a dropbox account for quite some time.

Oh and I forgot to say that your original post is brilliant BTW, hiding the different methods in spoiler tags was a genius idea for readability.
Tue Sep 30, 2014 10:39 am View user's profile Send private message Send e-mail
SSGT
Nerf Addict


Joined: 12 Jan 2013
Posts: 1275
Fav. Blaster: 'Rave-N' CS-18, Elite Alpha Trooper (EAT) CS-12
Location: Durham



Post Reply with quote
Thanks. It was actually Boff who suggested using spoiler code on the Jargon Buster thread a while ago. It's definitely better than having to scroll through every guide to get to the one you want.

tbr wrote:
Erm....I havn't got a pro account and I use it to host my images. Not sure if it's something that I was grandfathered into as I have had a dropbox account for quite some time.


That might be it actually. I tried to do it myself but couldn't enable a public folder. Then I found this. I've only had an account for about a year so it looks like they've changed how they do things before then. I'll have a play around and see if there's a way around it, but I'm guessing there won't be.

EDIT:
OK, I've found a little trick that seems to work from any Dropbox folder. It's not as intuitive as other options but I'll add it to the list when I get the time. I probably won't be using Dropbox as my main account though, not with only 2GB of space (plus it's already full of team project stuff).

_________________
Trust me, I'm an engineer! Very Happy

Antonius wrote:
Compoooter bits make shiny Nerf blaster go whoosh!


Last edited by SSGT on Mon Oct 31, 2016 5:42 pm; edited 1 time in total
Tue Sep 30, 2014 11:04 am View user's profile Send private message
tbr
Veteran Member


Joined: 23 May 2014
Posts: 307
Location: Blackpool



Post Reply with quote
SSGT wrote:
I probably won't be using Dropbox as my main account though, not with only 2GB of space


I'm lucky enough to have expanded my free space to 9.88Gb by taking advantage of various free upgrades. When they first debuted auto camera uploads they were giving free space away and I think I got about 3Gb out of that Smile
Tue Sep 30, 2014 12:25 pm View user's profile Send private message Send e-mail
UKNerfWar
Site Owner


Joined: 08 Feb 2012
Posts: 2430
Fav. Blaster: Swarmfire
Location: London



Post Reply with quote
Props to SSGT for this guide. It is something that I have had on my list for a while now but never got around to.

Thanks buddy.

_________________
Check out my YouTube Channel.

Visit the UK Nerf blog.

I also have a Website

[quote="OldNoob:38837"]Remember if a mod guide has no performance test figures to back it up, look for a better one![/quote]
Tue Sep 30, 2014 1:19 pm View user's profile Send private message Visit poster's website
SSGT
Nerf Addict


Joined: 12 Jan 2013
Posts: 1275
Fav. Blaster: 'Rave-N' CS-18, Elite Alpha Trooper (EAT) CS-12
Location: Durham



Post Reply with quote
Updated layout and instructions/images to reflect changes to the hosting sites since 2014.

Instructional images retaken and uploaded in 1280x960 so should look a little better when scaled down to 640x480 than the previous images which were 1366x768 scaled down to 640x360 (maybe that's wishful thinking).



_________________
Trust me, I'm an engineer! Very Happy

Antonius wrote:
Compoooter bits make shiny Nerf blaster go whoosh!
Wed Nov 02, 2016 3:37 pm View user's profile Send private message
Display posts from previous:    
This topic is locked: you cannot edit posts or make replies.    BRIT NERF Forum Index » Q&A and New members All times are GMT
Page 1 of 1

 
Jump to: 
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum

Card File  Gallery  Forum Archive
Powered by phpBB © 2001, 2005 phpBB Group
Design by Freestyle XL / Flowers Online.
Create your own free forum | Buy a domain to use with your forum