HOW TO: Add pictures to your posts

I've been asked on several occasions how to add pictures to posts (besides appending with the 'Add File' feature). Well, good news: I'm going to step through the process I use. Hopefully you can take what you learn here and apply it to what you're using. When it comes to trying to describe a problem, or explain where something is, you can't beat a really good picture. Besides, they can save you a whole lot of explaining. Pictures really are worth a thousand words in this forum.

To get started, I use a program called Paint Shop Pro 6 for most of my photo editing needs. Why? Because it was free. I downloaded it off the internet several years ago, and have never felt the need to go to PhotoShop or anything else. The process I'm going to show you can be done with PhotoShop or many other photo editing software titles, but the commands and steps demonstrated here will be slightly different.

This post is going to show you the process I use, and, therefore, will be picture heavy. I think it's easier to do it this way than trying to explain it using just words. As such, the following images are all hyperlinked to larger images to save space. Click on each thumbnail to view its larger counterpart.

Here are the steps I use...
1. I open the photo I want to use in Paint Shop Pro.



2. On the menu, I select Image -> Resize.



3. I then try to select a pixel resolution somewhere below 500w x 500h. This consideration is important as some people's browsers won't display XJBikes.com's pages correctly if there's a huge picture embedded in it. If you need a larger picture, hyperlink to it so it opens in a new window (like I did above ). In this case, I chose to reduce the image by 25 percent giving me a resolution of 400w x 300h--a good size to use.



Here's the image after resizing.



4. I then select Colors -> Adjust -> Brightness/Contrast to brighten up the picture. As you can see, it's pretty dark. We're trying to convey information with these images, so it makes no sense to hide it in the shadows.



Here's the picture after the adjustments have been made.



5. This image is a little blurry, too. I select Image -> Sharpen -> Sharpen More from the menu to fix that problem.



6. It's time to save the image as a new Jpeg file. I select File -> Export -> Jpeg File. This starts a wizard to help me prepare the file.



7. This next step is important. Images saved as Jpeg's are all about compression. The trick is to reduce the size of your image file without losing its clarity. From personal experience, 30 percent compression usually yields the best balance. In this case, the file was over 360k bytes, but after compression ended up just over 17k bytes. Much quicker to download at that size.



8. Name your new image and save it to your hard drive.

That's it for photo editing. I'm off to upload the image onto the internet.



9. I log into XJBikes.com and navigate to my Photo Gallery. I click on the Upload Picture link on the left-hand menu.



10. This opens the Upload Wizard page. I select the album where I want to store my image, select my file by clicking the 'Browse' button, give my picture a meaningful title and description, and finish by including some relevant keywords for the photo search engine. After everything looks right, I click the 'Upload Picture' button.



If everything went right, the next screen you'll see will be this confirmation screen. Click the 'Finish' button to see the image you uploaded.



If you hover your mouse pointer over the image, it will display all that information you inputted when you uploaded it.



11. I'm after the location--or URL (Uniform Resource Locator)--of where this image is actually stored on the internet. I'll use this information to embed this picture into a future post. To get to that information, I right-click on the image. A menu will pop up. I then select Properties from that menu.



12. This opens a new information window with this image's properties listed. About half way down, I see its address listed, Again, I right-click, and select Select All from the pop up menu to highlight the full URL. (Note: this process will vary slightly between different browsers.)



13. Positioning my cursor over the highlighted text, I then right-click again and select Copy to copy the URL onto the operating system's clipboard.



Once we have the image's URL, I'm going to head over and start a new post in the Test Zone of the Forums.



14. After adding some text, I position the cursor where I want the image to be displayed in my post. In this case, it will go between the two lines of text I entered. I then click on the Image () button. This will open an Input Box asking me to enter the location of my desired image.



15. I position my cursor over the highlighted text and right-click. I then select Paste from the pop up menu.



16. This fills in the field with the image's URL. I then click the OK button.



If you look at the text box, you'll see there's some new text that's been added:

Code:

[img]http://xjbikes.com/modules/coppermine/albums/userpics/12072/me_cutting_out_pieces.jpg[/img]

17. To see how the post will look with the newly added image, I click on the Preview button.



Looks like I intended.



18. Feeling satisfied with the way the post looks, I click on the Submit button to publish this new post.



And there you have it. A post with a picture in it. How cool is that? And to add icing to the cake, I just realized while looking at that last picture that I'm a newly-minted Red Liner!

Well, that about wraps this How-To up. I hope you found this one helpful. Have a comment or suggestion? You know what to do...

 

BRAVO!!!

 

Don, I'm trying your turtorial, can't tell you how many frustrating minutes I've spent trying to do this.
I'll be so happy if this works ... thanks! :lol:

 

Some text before


Some text after ...
Then ....

 

this is a resize, for test purposes

Not a great shot, just for test

 

I did it!!!!!!!!

 

OK Here comes pictures of my last 15 holidays
...... just kidding ... thanks!

 

Don,

Congrats on the Red Liner. No doubt I will get there in the next 3 years or so, but I doubt it will be with as much cheering as should be given for you and your posts. Strong Work!

Jon

 

You're welcome to all of you. I'm just trying to help make this forum the best out there.

Now... didn't I see something about spelling? I may have a trick up my sleeve to help with that. Hmmm.

 

For spelling I create my message on Microsoft Word, spell check then paste it to the message board. That’s what I’m doing now!

 

Or, you can use Firefox. Firefox has a spell checker built right in, so any misspelled words that you write, will be underlined in red (just like in MSWord). Then, you can right click it, and see how to correctly spell words.

 

From the Firefox web site:

I ran across this script quite some time ago that does essentially the same thing...

I've been using it for a couple years now and it works pretty well. Sometimes it doesn't return you to the correct page, but still gets the job done none the less. Again, it requires MS Word to work correctly.

 

I fixed the image location issue for this post so they show again. Sorry for taking so long getting things sorted.