# General > The Literature Network >  Pictures / Images How-to

## Sitaram

I have uploaded a jpg photo to my website, and am attempting to display it in the body of a post. I see others successfully doing this. 


*PROBLEM SOLVED*
[-img-]http://toosmallforsupernova.org/Sitaram.jpg[/-img-]



Remove dashes to activate code.

----------


## Logos

Hey! now is that _you_ Sitaram?

----------


## Sitaram

Yes.... I put it in that photo album thread.... thats me when I was young(er)... The photo on the wall is when I was 17

----------


## baddad

Oh.....my.......GOD!!! The voice of religious reason now has a face!!! Yahoooo....

----------


## Isagel

Hi! How did you do it? I have just bought a scanner, and I might try and post a picture. It looks so much better when you can show it embedded like that, instead of a seperate attachment. 

Nice to see you!

----------


## Sitaram

> Hi! How did you do it? I have just bought a scanner, and I might try and post a picture. It looks so much better when you can show it embedded like that, instead of a seperate attachment.


Here is how I did it:

Step 1: Get a photo of yourself. You can even purchase a disposable camera and have them developed as jpg images and emailed to you. Or, you can have a photo scanned. Or you can find someone with a digital camera to take your picture.

Step 2: You need to upload your photo to some website. 

OR




> Get a free account at photobucket.com & upload your photos there from your computer, it gives you the 3 different types of HTML code you will ever need right under every picture you upload so all you'll ever need to do is copy & paste the code to wherever you want.



Step 3: Take the following line of code:
*[-img-]http://toosmallforsupernova.org/Sitaram.jpg[/-img-]*

3.a) paste it into a post in this forum,
3.b) remove the dashes from -img- and /-img- _(I must include these dashes to disable the BB code, so that it will be visible to you. Once I remove the dashes, this line of code is no longer displayed in the post, but is actually executed, and displays my photo.)_

3.c) subsitute your website address for http://toosmallforsupernova.org
3.d) substitute the file name of your uploaded jpg image for Sitaram.jpg

----------


## Jay

Put simply:
1) you need the picture on the web and you need a link of the picture (if you don't have a site of your own and if you don't want to get your own photobucket account, I can play a storage room)
2) put the link into [img] tags, ie [img]your link goes here[/img]

----------


## kathycf

I noticed some folks have had some problems posting their personal pictures here. Without trying to be too presumptuous, I put some information together about that. (I copied most of it from another post I made  :Wink:  )

Posting your images goes like this:
Choose a free hosting site, such as photobucket: http://www.photobucket.com/
They do require registration, but you can always give them an email you don't use, (they don't spam anyways) and you can organize all your pictures into albums by category. I like photobucket, they are easy to use. Imageshack and tinypic are two other sites that you can use that don't require registration.
http://tinypic.com/

http://imageshack.us/

Upload your image to the host. If you use photobucket, they give you the necessary code to post in forums. Looks like this. (BTW,that is my Murray  :Smile: )

If you go with another host, they will give you an url for your picture. Copy the url (only the url part... looks like this ""http://myimagehostmypic.jpg"") and paste it into your post using the insert image button (it looks like a little picture of a mountain.) There you go, all set.  :Smile:

----------


## Logos

Very helpful, thanks Kathy, I'm sure many will appreciate this  :Smile:

----------


## miss tenderness

Darling Kathy:this is so nice of u :Smile: 


thanks

----------


## RJbibliophil

Yay! I for one know how to post pics, (got someone smart to explain it) but I really like screen prints!  :Banana:

----------


## kathycf

heh, that is a good screenshot, or as we say in another forum site I visit "screenies" .

I hope folks find the information useful. The other thing about photobucket is you can transfer an image by url into your album. What that translates into is say you are doing an image search for kittens, you find a picture you like. You copy the location of the image ...the url... and then you use that option in photobucket. (no, I don't work for them, I just like the service  :Wink:  )

This can be good if you are playing some of the image games in the forum, then you won't be hotlinking (a direct link to the image). Why is this good, you might ask? Hotlinking steals bandwidth from the website you link the image from. The people who have the website pay for a certain amount of bandwidth (the "traffic" that goes through a site) and if that goes over their quota they have to pay extra. Just a little more info.  :Smile: 




> Darling Kathy:this is so nice of u
> 
> 
> thanks


You are very welcome.  :Smile:

----------


## kathycf

An additional bit of information for working with images
I use this free program frequently to crop, resize and edit my photographs. I also use it to create my own avatars from images that I have resized.
IrfanView image editor:
Several languages for user interface
Can convert images from one type to another, for example: bmp to jpg
Can resize images without loss of quality.
Plug in filters to add special effects


http://www.irfanview.com/

Picasa is a very good tool (also free) for editing photographs, and you can custom crop and add special effects.

http://picasa.google.com/

Another feature of image hosts such as photobucket is that they can generate several types of code for you, for example html if you want to use your image on a site such as myspace or if you have a website but don't wish to host your pictures there, or img code like you would use here at the litnet or another forum for posting images. 
Looks like this:



Another thing you can do is generate code for thumbnails (small pictures linked to the original large picture that show you the original when you click on it) This can come in handy if you have a large photo you want to share, but don't want it to take up a lot of space in your post. Clicking on the image opens up another page in your browser so you can view the picture.
Example:

----------


## Stanislaw

photoshop is a nice tool if you like to spend money...or have no qualms about piracy...  :Biggrin:  

heh, good idea for a tutorial though!  :Thumbs Up:

----------


## kathycf

> photoshop is a nice tool if you like to spend money...or have no qualms about piracy...  
> 
> heh, good idea for a tutorial though!


I never used photoshop,actually, although I have heard some good things about it. I guess I am too cheap to spend the money.  :Wink:  Irfanview has a lot of other features besides those that I mentioned, and for my needs works well.( I am only an amateur photographer.)

Hmm, piracy? Doesn't that involve saying "arrh" a lot, and making people walk the plank?  :Brow:

----------


## mono

> Choose a free hosting site, such as photobucket: http://www.photobucket.com/
> They do require registration, but you can always give them an email you don't use, (they don't spam anyways) and you can organize all your pictures into albums by category. I like photobucket, they are easy to use. Imageshack and tinypic are two other sites that you can use that don't require registration.


Indeed, I use http://www.photobucket.com/ and swear by it, also hearing good things of http://www.imageshack.us/ and http://www.tinypic.com/ - all very user-friendly. Most, too, accept video downloads, as well, for those with digital camcorders - lots of fun.

----------


## Stanislaw

> I never used photoshop,actually, although I have heard some good things about it. I guess I am too cheap to spend the money.  Irfanview has a lot of other features besides those that I mentioned, and for my needs works well.( I am only an amateur photographer.)
> 
> Hmm, piracy? Doesn't that involve saying "arrh" a lot, and making people walk the plank?


heh...only when they ask question!  :Biggrin:  

there also be some good opensource stuff over at sourceforge...or scourgeforce, I can never remember the spelling.


...and so to say...though I cannot condone it...(heh, gotta say that for legal purposes)...there be the joy o bit torrent!  :Biggrin:

----------


## miss tenderness

here i'm trying

----------


## miss tenderness

it worked!!!!

thank u Kathy 


and my darlingests 

Sara and Majed

my sis's little angels :Smile:

----------


## kathycf

> it worked!!!!
> 
> thank u Kathy 
> 
> 
> and my darlingests 
> 
> Sara and Majed
> 
> my sis's little angels


I'm glad I could help. :Smile:  

If anyone has any more questions about posting their images, feel free to leave a question here, or you can PM me if you want.

Kathy
*edit* thanks also to mono, Stanislaw for the info regarding photoshop and the video hosting that photobucket offers. Also to Logos and RJ (yes, sorry I am too lazy to type out all of RJ's name).

----------


## Stanislaw

oh hey...another file hosting service...for free...

www.filelodge.com

tis not bad.

----------


## kathycf

> oh hey...another file hosting service...for free...
> 
> www.filelodge.com
> 
> tis not bad.


Nice, thanks Stanislaw. From FileLodge:



> File Lodge is a free file hosting provider especially designed to look after you and your files....We offer a huge 500MB of file storage and support almost all file extensions, such as jpg, gif, mpg, avi, wmv, doc, pdf, mp3 etc...
> Bandwidth is unlimited.


Excellent!

----------


## kathycf

Here is an example of posting an image using Imageshack. 
ImageShack 
This site is good if you don't want to bother registering anywhere. (you do have the option though, you get a few perks if you do.) You select an image to upload and they give you the information to post it. 
I have an example of what that looks like.


The picture below is the result. I used the top code that has the checkmark, the second code didn't work here. Alternatively, you can use the url and enclose it with the img tags ( the little picture thing --insert image-- looks like a mountain when you make your post.)

----------


## kathycf

Another mini-lesson:
You can transfer an image by url into your photobucket account. This makes getting images in a snap. You don't have to download and then upload them, so you save a little time. Most images can be added in this way, although a few may not. This is a fun way to get images for the image games here on the site, and then you will not be hotlinking (FYI, hotlinking is *not good*!)

Alright, assuming you have done an image search for something you want. I did a Google image search for "Degas" , picked the result I want, and I clicked on the "show full size image option".

Okay, so here is my image that I like:


Notice that the picture is by itself with the url of the pic in the address bar. Copy the url.

Then in my photobucket album, I click on "add images by url" and paste the url in.

 
simply add in your image then. It is convenient because you can also add in multiple images as well.



Here is my image, the way it will be displayed. It is a fairly small picture, so I did not edit it for size.



I will try to cover some of the other image hosts in a few days, for folks who don't have or want a photobucket account. I like this host though, they are very easy to use, and of course, free.  :Smile:

----------


## Nightwalk

Hello Kathy, thanks for the thread, it's been most helpful.

----------


## kathycf

> Hello Kathy, thanks for the thread, it's been most helpful.


Hi there. Glad to hear it has helped you.  :Smile:

----------


## kathycf

Just a quick note, I have noticed extra [img tags around some pictures being posted. If you are copying and pasting image code generated by your photohost (such as photobucket) the [img tag is already included. You do not need to use the img tag button when making your post (the mountain pic thingy) using code provided by your host.

You only need that img tag button if you are enclosing _the url of the image_ (the url is the part that starts with http:// )  :Smile:

----------


## Nightshade

hey Mods can we perhaps have this thread stickied???
its a helpful thread  :Nod:

----------


## kathycf

Thanks Night, I am glad you think so.  :Smile:  

If you have a very large picture (say 640x480 pixels and/or over 150kb in size or larger) and you want to post the pic but that is too big. Smaller images on a page load faster, especially for people with slow internet connections and take up less room on the page. To fix this problem, you can make a thumbnail of your picture. A thumbnail is a smaller version of your original pic and when you put it in your post people can click on it to expand the image which will cause a new browser window to open with the originally sized picture. This can be accomplished in a few ways. One, if you are using an image host (well obviously you would be, how else can you post personal photos?  :Wink:  :P Besides attaching them that is.)

----------


## kathycf

Ok, anyway....Some image hosts will generate thumbnail code for you, such as _photobucket_. If that is your host, then you would select the image you want to use, scroll to the bottom of the page and click on *generate html/img code.* This will bring you to a page with different types of code. You will then select * IMG clickable thumbnails for message boards*. Make sure to use the message board one because the html code won't work. 

What if you have a different host for your picture and they don't generate code? It takes a little longer but is not hard. Really really.  :Smile:  You will use bbcode like so: (I know my example picture is large  :Blush:  take it as an object lesson on why thumbnails are important...)



First the code for the url (the address of the image on the web, and then img codes and enclosing all that is the other url code. You would type it out exactly like the example, but of course using *your* images url--with no space in bwtween the words.  :Smile:  When using bbcode be sure to use the brackets" [" and" ]" and ending code also has a backslash in front of it. For example this is what I would do to make a word bold:



This is the end result:


This is a very large picture that my friend Kev put in his blog, but it is way too huge to post in it's original size. If somebody wishes to see his pic in all it's glory then they have the choice to click on the thumbnail. So there you have it, thumbnails 101. And yes, it is easier to have an image host that generates code for you.  :Wink:  I use photobucket.  

I can do another post on cropping and resizing as well, maybe in a few days.

----------


## Logos

The site dimensions allowed for signature line images is *(width)* 500 X *(length)* 100 pixels. That means long narrow images are best, but square pics are fine too. (For example my sigline image is 495 X 39 pixels or something.) The low_ height_ but long width dimension is so that signature lines don't get too long, 'overpower' posts and cause people reading threads to have to do a lot of scrolling down the page. (also, as per Netiquette, frowned upon in discussion forums.)

*To post an image in your signature line:*

From your user control panel "UserCP" link top left corner of screen:

Step 1: upload the image's url (starting with "http://www") from photo hosting site like photobucket (which would be the "URL link-Email & IM") one, or from your computer.

Step 2: click the "Insert Signature Picture" link under the pic to make the {SIGPIC][/SIGPIC} codes show up in the sigline text window.

Step 3: Click "Save Signature" button.

----------


## kathycf

Good call, Logos. Thank you for the information. 

Quick way to resize an uploaded image with photobucket. Click on edit and when the page loads above the image will be some editing options, one of which is "resize".

----------


## kathycf

Resizing an image tutorial. I use Irfanview, a pretty good (FREE) image editor to accomplish this. 

Here is my original image I wish to resize:


I open up the image with the editor.

I go to the resize and resampling menu. 



If I have a very detailed picture, I would probably choose the _resample_ option as it preserves image quality and detail better. Otherwise, I would go with _resizing_. This is just a screenshot from a game so I will simply resize it. I set the dimensions for what I want and enter them. An image can be made smaller or larger this way, and is an easy way to do it. 

Voila, a smaller picture.


You can also use Irfanview to enhance your pictures as well as adding a few special effects. More on this later.  :Smile: 


The languages available in Irfanview

English
German
French 
Spanish
Portuguese
Italian 
Nederlands/Dutch
Russian 
Czech
Slovak 
Japanese 
Polish
Estonian 
Slovenscina 
Chinese 
Turkish 
Swedish
Tatarish

----------


## Demona

a question! Is it possible to embed into a post a picture that is being uploaded directly from the PC?
And thanks for the thread, it is very helpful!  :Smile:

----------


## kathycf

Oh, I didn't realize this thread had been moved. Sorry it has taken me so long to see this.

One other thing is you can add an attachment to the post if you don't have an image host. The only catch is you are very limited in the size of the file attached (which is necessary, it uses the Litnet's bandwidth).

Valid file extensions: bmp doc gif jpe jpeg jpg pdf png psd txt zip

Just under the area where you make a post (er, when you are in the midst of actually making one) is a section called "Additional Options". You can click on the manage attachments button to directly upload an image. It won't display in your post, but will be available just below it. 

This is a viable option for once in while type stuff, but in my opinion if you want to post and share lots of images you are better off going with a free image host. There are several free ones, and I detail them on the first page of the thread.  :Smile:

----------


## Logos

oops, thanks kathy, forgot about that  :Tongue:

----------


## Nightshade

> Resizing an image tutorial. I use Irfanview, a pretty good (FREE) image editor to accomplish this. 
> h


Do I have to down load this to use it?

----------


## kathycf

> Do I have to down load this to use it?


Yes, you cannot use the software otherwise.  :Wink:  

Some websites DO have features you can use online, but Irfranview isn't one of them. However, it is free as I mention and it is not a big download at just about 1 mb in size.  :Smile:

----------


## kathycf

Night, if it is a problem to download stuff I can re-size some pictures for you. You can attach them to an email and send them to me (if there are several you can put them into a compressed archive using winzip or winrar). 

It is up to you, let me know via PM.

----------


## Nightshade

Never I mind I did download it and turned out the stupid picture was the right size anyway from when I used photobucket....still its an intresting application and I just used it to make a smilie tutorial for the newbie guide thread  :Nod:   :Biggrin:  :Biggrin:  Had to try out my new toy though I ened up using paint mostly.... :Biggrin:

----------


## kathycf

PhotoFiltre is another good program. It works in a similiar way to Paint, but more features and just better quality. There is a free version and it works very nicely for me when I make my armor for the games I like. 



The Gimp is another very powerful, full featured (and FREE) image editing program, but it is hard to figure out. This program has versions that run on Windows, MacOSX and Linux, and there are tutorials for using it.

Main link, with links to download for other platforms and the tutorials can be found on the left side of the page.

----------


## Nightshade

yay.....well I guess if I go for the Digital media production course next year Ive got a range of things I can use :Nod:

----------


## quasimodo1

Dear kathycf, Thank you for the information as I was sadly lacking in that skill, probably won't use it much but sometimes "a thousand words..." Since I was burried in classic academia for many years...maybe i may be of help to you sometime. quasimodo1

----------


## kathycf

You are welcome, quasimodo1, I am glad the thread was of help to you.  :Smile:

----------


## kathycf

Photobucket has it's own tutorial section with a lot of useful information. You can find that by clicking here.

----------


## Logos

This method is for uploading a picture from your computer to a forum post. This method _does not_ show the actual picture in your post--it generates a link such as "*Book.gif* (15.4 KB)" as below under *Attached Images*

.

*How-To:*

.

1: Click 

2: In "*Additional Options*" under where you type your post, click the "Manage Attachments" button.

3: A pop-up window appears--beside Upload File from your Computer click the "Browse" button.

4: Another pop-up window appears, showing the directory of your computer. Double click the yellow file folder where the pic is--it might be named "My Pictures" or something. Click once on the pic file name itself so that it shows in the File Name window, then click "Open". That second pop-up window now disappears and you're back to the first pop-up window with the pic file name now appearing.

5: Click the "Upload" button on the far right top corner of that pop-up window.

6: When the message xxxxBook.gif(15.4 KB) etc. shows, click the "Close This Window" button at the very bottom of that pop-up window.

Now you are back at your window for posting, type your post if you haven't already, then click "Submit Reply"  :Smile:

----------


## Logos

There is a lot of hotlinking 

http://altlab.com/hotlinking.html 
http://www.urbandictionary.com/define.php?term=hotlink

to images going on, so, I just wanted to remind people that it's really not too cool to do this  :Tongue:  Please try to post images in blogs/threads etc. that are hosted by any of the photo hosting sites mentioned in this thread.

----------


## Virgil

Is anyone else having difficulty with getting images and avatars to come up on lit net the last two days? I get some, but the majority of them are red X's. Is it just me?

----------


## Maryd.

I haven't notice anything Virgil.

----------


## ClaesGefvenberg

No problem over here, Virgil. 

If nobody else is having those issues, it sounds like a firewall, popup blocker or adblocker or something being a bit overambitious. Have you changed your setup lately?

/Claes

----------


## Scheherazade

*R e m i n d e r 

Please note that as of today, only images post as thumbnails will be allowed in the discussion threads. 

The pictures posted in the Photo Album or Pictures Taken By You threads can be posted in their original sizes as usual.

Images that are not in thumbnails will be removed without further notification.*

----------


## Vonny

Even in the "mythology and religion in art" thread, no more pictures?

----------


## ftil

> *R e m i n d e r 
> 
> Please note that as of today, only images post as thumbnails will be allowed in the discussion threads. 
> 
> The pictures posted in the Photo Album or Pictures Taken By You threads can be posted in their original sizes as usual.
> 
> Images that are not in thumbnails will be removed without further notification.*



I would like to get some clarification. I have noticed that there are treads such as Name the Painting, Picture Association Game, or Architecture where members have posted images in original size after this message. I assume that I can post art in original size on Mythology and Religion in Art since my tread is not a discussion tread as I have stated it in my first post. I moved art from Ovid and Metamorphosis tread for the reason of not having the discussion tread. 
I appreciate your clarification.

----------


## Varenne Rodin

It would be a bummer not to see pictures in the regular picture game threads anymore. Is there a technical reason for the change?

----------


## ftil

> It would be a bummer not to see pictures in the regular picture game threads anymore. Is there a technical reason for the change?


You can see images in original size that were posted on the game tread after this message. Therefore, I have asked for a clarification.

----------


## Mutatis-Mutandis

So, I guess no more of StLukes cool art lessons. At least without the pictures. That's a bummer. 

Why the rule change?

----------


## MystyrMystyry

I'd suspect that many Litnetters have limited bandwidth allowance and speed issues, being students and the like - so when someone posts a link to another site with an uncompressed image, though the viewer is interested to see it, it eats into their account balance thus preventing and shortcircuiting other pursuits - especially on a mobile phone. he image only needs to be a large as the res of the average monitor or smaller - most people don't surf on a 50" widescreen (though I have tried it and it definitely does make the Web a much much nicer place  :Smile:  )

----------


## Scheherazade

*There is no ban on posting images but it is required that these images should be posted in thumbnail forms so that pages download easier.

Anyone who would like to view the images in their original size can do so by clicking on the images.

As it is in the stated in my earlier post, this is a requirement for the discussion threads, not for the Games sections.*

----------


## Gilliatt Gurgle

After all this time, I figured the term "thumbnail" sinply meant a smaller image about the size of your thumb nail. (yes I'm old) After a little research I see it is more akin to a "link" or preview that directs one to a larger image. 
Given that, I will be conducting a test to see if I can figure this out :




-----Edit-----

Test results: Success and easy as pie.

Click on the image you see above and it brings up the larger, original size image.


I simply copied the "IMG thumb" image code from my Photobucket account in lieu of the "IMG Image" code.
You learn something new every day.

.


.

----------


## ftil

> After all this time, I figured the term "thumbnail" sinply meant a smaller image about the size of your thumb nail. (yes I'm old) After a little research I see it is more akin to a "link" or preview that directs one to a larger image. 
> Given that, I will be conducting a test to see if I can figure this out :
> 
> 
> 
> 
> -----Edit-----
> 
> Test results: Success and easy as pie.
> ...


I wish I were you. I only learn about computer when I need it. I prefer shortcuts.  :FRlol: 
Posting a link to the image saves a lot of time.

----------


## Maximilianus

> After all this time, I figured the term "thumbnail" sinply meant a smaller image about the size of your thumb nail. (yes I'm old) After a little research I see it is more akin to a "link" or preview that directs one to a larger image. 
> Given that, I will be conducting a test to see if I can figure this out :
> 
> 
> 
> 
> -----Edit-----
> 
> Test results: Success and easy as pie.
> ...


Figuring out the thumbnail thing, thanks to Gilliatt's tutorial I also learned something new today. I'm pretty sure there must be instructions on this somewhere on Lit Net, though I hardly ever read the how-to-use-the-site sections  :Tongue:

----------


## Mutatis-Mutandis

So, to post pictures you have to put him in a photobucket account, rather than just linking them from a sight, such as a Google image search?

----------


## stlukesguild

Linking directly to another site, known as "hotlinking", uses the bandwidth of that other site each time the image is looked at on the new site. Beyond the ethics of such, hotlinking can lead to problems. The owner of the original site form which you have linked an image may remove it. Sometimes they remove the image upon discovering the hotlink and replace it with a message telling you to "Stop Hotlinking." I have seen an instance in which the owner of the site from which an image was hotlinked employed a less subtle technique, replacing the original image with a pornographic image and a profanity laden message which then loads to your site/post.

The art site at which I am a member has HUGE severs able to accommodate vast quantities of visual imagery in posts. They allow for a direct download from your hard-drive. The problem with this, is that you lose control of the image. When posting my own art work, I use a secondary picture host such as Flickr or Photobucket to host my image allowing me to delete the image at any time, if I should so desire. I need to figure out how to use Flickr to post thumbnail with a link or find another beyond Photobucket, which has long been monitored by Puritanical censors quick to delete any nudity... even that found in Degas and William Blake.

----------

