HOWTO: Posting pictures; Linking to a specific post

[dodecahedron]

Want to illustrate your forum posts with beautiful pictures?
Want to show off your CD Speed graph of your drive doing 86x CAV?
Distraught by the Quality Check with 123,456,789 errors, or the ScanDisc with 67.8% red, and want to share?

Don't know how to insert pictures into your posts?

Well, fear no more...help is here:


First, you need a web server to which you can upload pictures. If you don't have that, then you can't post pictures here. Assuming you have one, do the following:

1. Capture the screen. You can use a graphics program that has a screen capture feature. Or press PrintScreen to copy the screen to the clipboard and then paste it into Windows Paint, or press Alt-PrintScreen to copy just the current window.

2. Trim out the unnecessary areas of the screen capture, and save the file. If you are using Windows Paint, your best bet is to save as .gif format, and just live with the ugly color substitutions it makes. If you have a better graphics program, save as .png format.
[edit: Paint, on Windows XP at least, does support .png]

3. FTP the file to your web server.

4. Paste the URL into your post, surrounded by the image tags. It will look something like this (with your actual URL substituted for this sample, of course):

Code: Select all

[img]http://www.yourwebserver.com/pic_dir/screen_shot.gif[/img]


That's all there is to it. The picture will show up where you placed the image tags.

Thanks go to cfitz

[glock20rocks]

Thanks go to cfitz

I thought that look familiar...

[cfitz]

Thanks dodecahedron. Let me add a couple more points.

First, try to present your image with good quality but in a small package out of respect for our dial-up readers. For posting screen shots, Portable Network Graphics (.png) or Graphics Interchange Format (.gif) are usually the best choices of format for saving your image file. They are well suited to screen shots, because screen shots typically have limited numbers of colors, sharp edges, and large runs of uniform color that both PNG and GIF can compress to relatively small sizes while maintaining sharpness and clarity.

In contrast, the JPEG format is typically better for posting photographs, because photographs generally have large numbers of colors, many small details, and smoother transitions from one feature to another that JPEG can compress with better efficiency.

The differences can be dramatic. A screen shot saved as .png may be only 6 KBytes in size, and reproduce perfectly, while the same screen shot saved as .jpg may be ten times as large and still be fuzzy and unclear with visible compression artifacts. Just the opposite holds true for photographs where the PNG and GIF formats may require much larger files to reproduce with the same fidelity, if they can at all (GIF is limited to 256 unique colors).

If you have the time and inclination, you might want to try saving your image in multiple formats with different compression settings to see what makes the smallest legible image, because there is no one best format for all images. If you don't have the time, then stick with PNG as your first choice for screen shots and medium to high compression JPEG as your first choice for photographs.

Second, when uploading your image to your server, avoid using special characters such as spaces, brackets, etc in your URL. To be safe, stick with the characters that can be used unencoded, as specified by RFC 1738:

alphanumerics ( a-z, A-Z, 0-9 )
special characters ( "$", "-", "_", ".", "+", "!", "*", "'", "(", ")", "," )
reserved characters ( ";", "/", "?", ":", "@", "=", "&" )

And within this set, use the reserved characters only for their intended use (e.g. the "/" as a directory separator).

All other characters must be URL encoded. To URL encode a character write it as a percent sign followed by the two hexadecimal digits needed to represent that character's code (e.g. ASCII code).

Here are several examples:

Code: Select all

space = %20
[ = %5B
] = %5D
# = %23
< = %3C
> = %3E


Too much of a hassle? I agree, and thus recommend sticking with the alphanumerics and special characters listed above. That way you don't need to worry about URL encoding.

cfitz

[Bhairav]

Can anyone put up the name of a good webserver to post pics to? theforumisdown and ipaska only allow uploads to be viewed at certain servers incl. hardforums and GenMay.
Any ideas?

[dhc014]

Most ISP's provide some web space for their users.

[MediumRare]

Thanks for the "How to...".

Maybe a note should be added to emphasize why png (or gif) is the format of choice for most screen shots posted here- for size and quality. cfitz (who else) said it more nicely than I can: http://www.cdrlabs.com/phpBB/viewtopic.php?t=8802 (I don't know how to refer to a specific post in the thread). The image size is not an academic issue either, especially for those of us on a dial-up modem. A thread with numerous large images takes a long time to load and won't be read as much as others...

G

[cfitz]

Good suggestion, MediumRare. I incorporated some discussion about PNG/GIF/JPG image formats in my earlier post in this thread:

http://www.cdrlabs.com/phpBB/viewtopic. ... 0164#50164

By the way, the above is how you refer to a specific post (with the ?p=50164#50164 stuff). Each post is numbered, and specifying the post's number as shown will link you directly to that post within a thread. You can get the proper URL for a specific post by copying the link from the little page icon just to the left of the header at the top of each post:



Maybe we should have a FAQ on how to quote, how to refer to specific posts or threads, etc.

cfitz

[dhc014]

Good suggestion, MediumRare. I incorporated some discussion about PNG/GIF/JPG image formats in my earlier post in this thread:

http://www.cdrlabs.com/phpBB/viewtopic. ... 0164#50164

By the way, the above is how you refer to a specific post (with the ?p=50164#50164 stuff). Each post is numbered, and specifying the post's number as shown will link you directly to that post within a thread. You can get the proper URL for a specific post by copying the link from the little page icon just to the left of the header at the top of each post:



Maybe we should have a FAQ on how to quote, how to refer to specific posts or threads, etc.

cfitz

waaaaaa! I never knew that! Awesome!

[dodecahedron]

Good suggestion, MediumRare. I incorporated some discussion about PNG/GIF/JPG image formats in my earlier post in this thread:

http://www.cdrlabs.com/phpBB/viewtopic. ... 0164#50164

By the way, the above is how you refer to a specific post (with the ?p=50164#50164 stuff). Each post is numbered, and specifying the post's number as shown will link you directly to that post within a thread. You can get the proper URL for a specific post by copying the link from the little page icon just to the left of the header at the top of each post:



Maybe we should have a FAQ on how to quote, how to refer to specific posts or threads, etc.

cfitz

waaaaaa! I never knew that! Awesome!

yes!
and the little page icon appears in red if your'e loggin in and haven't read that post yet!

i would like to point out, however, that using a link to a particular post (rather than thread) doesn't always work (at least for me). sometime the page opens at that post, sometimes at the top of the thread.

btw, cfitz, i think you put the wrong URL.

Good suggestion, MediumRare. I incorporated some discussion about PNG/GIF/JPG image formats in my earlier post in this thread:

http://www.cdrlabs.com/phpBB/viewtopic. ... 0164#50164

this points to your first post in this thread.

[cfitz]

i would like to point out, however, that using a link to a particular post (rather than thread) doesn't always work (at least for me). sometime the page opens at that post, sometimes at the top of the thread.

It has always worked for me. Do you always include the bookmark portion (e.g. #50164) of the URL? If not, then that is what you are doing wrong. If you are including the bookmark but are still having trouble, then it is almost certain to be an issue with your browser, since the browser is what is repsonsible for navigating to the bookmark.

There is a chance that what you are seeing is normal behavior (at least for IE) that you aren't recognizing as such. In IE, the bottom of a page can not be scrolled up past the bottom of the browser window. In other words, the bottom of the page is anchored to the bottom of the window. This has the resulting effect that if a bookmark is too far down the page, relative to the size of the window in which the page is being displayed, there won't be enough page left below the bookmark to scroll the bookmark all the way to the top of the window. This may appear to be a malfunction to you. Try this example link:

http://www.cdrlabs.com/phpBB/viewtopic. ... 0272#50272

It points to the last post in a thread. If your browser window is tall enough, the post won't be at the top of the page because the bottom of the page is anchored to the bottom of the window and there isn't enough page left below the bookmark to scroll the bookmark to the top and still have the bottom of the page be at the bottom of the browser window. On the other hand, if you open up another browser window, resize it to be very short, and navigate to the same link then the post will scroll to the top since, with the now much shorter browser window, the bottom of the page is no longer the limiting factor.

Another way to view this behavior is to open a browser window, place it at the top of your screen, grab the resize handle at the bottom right of the the browser window and slide it upward to resize the window to be very short (about four lines high). Then copy and paste the above sample link to the window, and it should put the post right at the top of the browser window. Finally, grab the resize handle again and drag it down to make the browser window tall again. You will see that the bottom of the page is anchored to bottom of the window, and as you drag down the window the bottom of the page and the post as well are dragged down with the window.

This is awfully hard to explain in words, but easy enough to demonstrate. Play around with the link I supplied and see if it become clear.

Other browsers may handle the bookmarks differently. I seem to recall from many years ago when first using Mosaic that it would let you scroll the bottom of a page to the top of the browser window. But I could be wrong, it's all getting hazy now...

In any event, it should be clear now that bookmarks are the responsibility of the browser, not the server, so if you are not seeing the desired behavior, blame your browser, not CDRLabs!

btw, cfitz, i think you put the wrong URL.

Good suggestion, MediumRare. I incorporated some discussion about PNG/GIF/JPG image formats in my earlier post in this thread:

http://www.cdrlabs.com/phpBB/viewtopic. ... 0164#50164

this points to your first post in this thread.

No, that is the right URL and exactly what I intended. I was referring to the changes I made in my first post in this thread. It used to talk only about URL encoding, but now it talks about image file formats as well. I didn't just say MediumRare's suggestion was a good idea. Instead, I actually took action and updated this thread. You must think I'm too lazy to add the information here...

cfitz

[dodecahedron]

hey cfitz!
first of all thanks for going to the trouble of writing such a long post for my benefit.

It has always worked for me.

thants good to know. now i know it is an issue with my brwoser/system, not a general problem of the forum. i've always wondered (but never till now bothered to check it out).

Do you always include the bookmark portion (e.g. #50164) of the URL?

yes.

There is a chance that what you are seeing is normal behavior (at least for IE) that you aren't recognizing as such. In IE, the bottom of a page can not be scrolled up past the bottom of the browser window. In other words, the bottom of the page is anchored to the bottom of the window. This has the resulting effect that if a bookmark is too far down the page, relative to the size of the window in which the page is being displayed, there won't be enough page left below the bookmark to scroll the bookmark all the way to the top of the window. This may appear to be a malfunction to you.

i had realized that. this is not the problem.
for example, clicking the first link you gave, in the previous post, it took me to the right place (that post). clicking ths second link (in the last post) took me to the top of the page instead of the bottom. clicking it again took me to the right place. so it's a sporadic thing, like i said (and i might add that i wrote there that it doesn't always work for me, i had suspected that it might be a problem just with my system).

This is awfully hard to explain in words, but easy enough to demonstrate.

true. and although i didn't need the explanation, i appreciate your trouble nontheless.

No, that is the right URL and exactly what I intended. I was referring to the changes I made in my first post in this thread. It used to talk only about URL encoding, but now it talks about image file formats as well. I didn't just say MediumRare's suggestion was a good idea. Instead, I actually took action and updated this thread. You must think I'm too lazy to add the information here...

no, not at all, that is the last thing i'm thiking of you.
seeing as MediumRare has linked to a previous post of yours discussing images etc. assumed you had meant to link to that same post (to the particular post, rather than the thread as in MediumRare's link, considering the current discussion!). i hadn't noticed that you edited your previous post in this thread. i had read it (a few times) and didn't bother to re-read it, and so didn't noticed your editing of it. so if anyone's lazy that's me!


anyway, after some time has passed i'm going to edit this entire thread, re-write the FAQ with all the additions and get rid of all the fluff...

oh, and btw i meant to congratulate you for your work on explaining how to link to a particular post, in response to MediumRare's comment that he doesn't know. i was going to write something, but you beat me to it, and as usual wrote it much nicer than i would've, plust a pretty picture explaining it to boot! great work!!! at least i chipped in with my small bit about the little page icons being red...

[MediumRare]

Thanks for the replies, guys. What I like about this board is that people react to comments and even to parenthetical remarks. Is the information re. current message documented anywhere or did you find it by trial and error or using the source view of the page ?

G

[cfitz]

It might be documented, but I found it just by observation. The same little document icons on the index pages, when clicked, take one directly to the latest post in a thread. I figured they would have a similar function within the threads themselves, and gave it a try. Now, how did I know that the icons on the index pages were clickable? I don't recall. I suppose they just looked like they would do something and I tried one. By the way, you do know, don't you, that the little orange document icons on the index pages will jump you directly to the latest unread post in the thread?

cfitz

[dodecahedron]

Now, how did I know that the icons on the index pages were clickable? I don't recall. I suppose they just looked like they would do something and I tried one.

maybe because when you point at them with the mouse the arrow becomes a hand (in IE)...

By the way, you do know, don't you, that the little orange document icons on the index pages will jump you directly to the latest unread post in the thread?

hell yeah, use it all the time.
and btw it works that way also when they're not red...

[MediumRare]

By the way, you do know, don't you, that the little orange document icons on the index pages will jump you directly to the latest unread post in the thread?cfitz

Well I saw a text there saying something like "jump to latest post" in Opera while the page was being built up, but never clicked on it. I'm experimenting with Opera at home because of security problems with IE. I'm at work now so I can't quote the specific text. Normally I don't log in at work either unless I want to post something- so I didn't notice the colour until you mentioned it.

G