Two Plus Two Newer Archives - Posting pictures in a thread

Two Plus Two Newer Archives (http://archives1.twoplustwo.com/index.php)

- Computer Technical Help (http://archives1.twoplustwo.com/forumdisplay.php?f=50)

- - Posting pictures in a thread - a tutorial (long) (http://archives1.twoplustwo.com/showthread.php?t=438015)

Posting pictures in a thread - a tutorial (long)

When a well known poster made it known that he didn't know how to post images, I created an easy to follow tutorial for him. SamIAm suggested I share. Sharing is goot....
Here you go:

There are essentially 3 steps to creating a good post with images.
1) Resizing the images so they don't blow out the page
2) Hosting the images somewhere on the internet
3) Making the post and adding the images within

I'll walk through each step, breaking it down.

For our demo, we have saved the images onto our desktop and named them myrtle1 - myrtle6 (any guesses who this was originally intended for????).
http://i8.photobucket.com/albums/a40/dcasper70/s1.jpg

Note: I left some of these images larger than normal for the purpose of this tutorial. They may cause scolling (blow out the page) on monitors running lower resolution.

Re: Posting pictures in a thread - a tutorial (long)

Step 1: Resizing the images

1a) Open Paint: 
All computers running Microsoft Windows have a program called 'Paint'. That program is good enough for what we want to do, so let's open it up. If you're not running Windows, make your own tutorial....
Press the 'Start' button, scroll up to 'Programs' , then 'Accessories' , then click the item named 'Paint'. This opens the 'Paint' program.
http://i8.photobucket.com/albums/a40.../openpaint.jpg

1b) Open your picture; 
On the top menu in Paint, click 'File' , then click 'Open' .
http://i8.photobucket.com/albums/a40...70/openpic.jpg

Using the popup window, navigate to your picture. In our case, we clicked the 'Desktop' icon in the left pane. Select the image you want to work with and press the 'Open' button in the bottom right of this popup window.
http://i8.photobucket.com/albums/a40...0/openpic2.jpg

The image should now be visible in the Paint window.

1c) Resize the image: 
On the top menu in Paint, click 'Image' , then click 'Stretch/Skew' .
http://i8.photobucket.com/albums/a40...70/resize1.jpg

In the popup window Change the Horizontal and Vertical percentages to an appropriate amount. This may vary depending on the size of the original image. Trial and error are really all you can do to figure out what works. When in doubt choose a higher number, you can always go smaller with a second pass.
From experience, I knew I could go with 15-20% with this particular image.
http://i8.photobucket.com/albums/a40...70/resize2.jpg

1d) Save the image: 
On the top menu in Paint, click 'File' then click 'Save' .
http://i8.photobucket.com/albums/a40...70/savepic.jpg

As a result, you can greatly reduce the size of individual images. This will not only help improve the readability of your post, but also speed up the load time of these images when other users read your post. I created a copy of the original images so you can see how big a size difference this can make.
http://i8.photobucket.com/albums/a40...0/sizediff.jpg

Up next: Step 2: Hosting the images

Re: Posting pictures in a thread - a tutorial (long)

Step 2: Hosting the images

There are dozens of websites that will host images for you. Some of the more notable are Imageshack, SnapFish, Photobucket, and dotPhoto. They will allow you to freely upload images to their servers in the hopes that you will either click one of their ad banners or purchase hard copy photos/calendars/mugs etc from them.

For our purposes, we will use Imageshack. If all you want is to post an image in a thread, this site is quick and pain free.

2a) Go to Imageshack: (hint: just click --> this link <--)

2b) Select the image: 
Once on Imageshack's home page, click on the 'Browse' button.
http://i8.photobucket.com/albums/a40...mageshack1.jpg

Again, using the popup window, navigate to your picture. In our case, we clicked the 'Desktop' icon in the left pane. Select the image you want to upload with and press the 'Open' button in the bottom right of this popup window.
http://i8.photobucket.com/albums/a40...mageshack2.jpg

2c) Upload Image: 
Click the 'host it!' button in the center of the screen.
http://i8.photobucket.com/albums/a40...mageshack3.jpg

2d) Save Image Link!!!!!!: 
Your picture is now successfully hosted! Oh, but don't go anywhere...you will need the direct link to the image. This is in the bottom box conveniently titled 'Direct link to image'.
http://i8.photobucket.com/albums/a40...mageshack4.jpg

When you want to post the image in a 2+2 thread, you will need to supply this link. I usually just leave this window open and open another browser window for my 2+2 post. If I'm uploading multiple images, I'll cut & paste each individual link into a text document (or word document, email, whatever works...) before uploading the next image.

So now your image is hosted right here:
http://img369.imageshack.us/img369/712/myrtle6ps5.jpg
Pretty cool and easy huh?

Next up: Step 3: Making the post

Re: Posting pictures in a thread - a tutorial (long)

Step 3: Making the post

Well, you're on 2+2 and chances are you already know most of this, but just in case...

3a) Start a post: 
Either press the 'Post' link to start a new thread, or press the 'Reply' or 'Quote' links within an existing thread to begin your posting adventure.
http://i8.photobucket.com/albums/a40...0/posting1.jpg
http://i8.photobucket.com/albums/a40...0/posting6.jpg

3b) Insert the image: 
So you type along however much you feel is necessary (or not at all), and then press the
'Image' link.
http://i8.photobucket.com/albums/a40...0/posting2.jpg

Up pops a 'Prompt' window that asks you to supply the link for the hosted image (see item 2d).
http://i8.photobucket.com/albums/a40...0/posting3.jpg

Enter the link from step 2d into the space provided and hit the 'OK' button.

Your post now contains your image link enclosed in HTML image tags. Don't muck with this.
http://i8.photobucket.com/albums/a40...0/posting4.jpg

3c)Preview the post: 
This isn't required, but it's a very good idea. Check off the box marked 'I want to preview my post', then press the 'Continue' button. This will show you what your post will look like, correct or not.
http://i8.photobucket.com/albums/a40...0/posting7.jpg

3d) Post it: 
Press the 'OK, submit' button at your own risk.
http://i8.photobucket.com/albums/a40...0/posting5.jpg

Happy posting!

Re: Posting pictures in a thread - a tutorial (long)

Awesome. Thanks.

Note that with a lot of the hosting sites (like Imageshack) there's an option to resize at the same time as you host. Saves a step if you're not picky about exactly what size it shrinks it to.

Re: Posting pictures in a thread - a tutorial (long)

[ QUOTE ]
Note that with a lot of the hosting sites (like Imageshack) there's an option to resize at the same time as you host. Saves a step if you're not picky about exactly what size it shrinks it to.

[/ QUOTE ]
Good point, forgot about that. In the image in step 2b, you can see there is a 'resize image' check box along with a drop down list of size options.
For standard posts, the default '320x240 (for websites and email)' option is usually just fine.

Resizing on your own, as in Step 1, is easy and offers more control over the end result.
http://img120.imageshack.us/img120/9...ouknow1lu5.jpg

Re: Posting pictures in a thread - a tutorial (long)

I also would like to thank dcasper very much for taking the time to script such a comprehensive instruction manual.

Now, all I need is the time to do it!

Thanks Much again, d.....

Myrt....