« Overview | FAQ | How often should I post my entries? »

How do I add screenshots to my post?

This looks more complicated than it is, so bear with me...

If you know a bit of HTML and have some webspace then you can add the HTML code directly to your entry to insert any pictures you like. I would ask that you limit yourself to using Thumbnail images and linking them to any fullsize images you want to show.

However, that's not what I do, mainly as I'm too lazy.

I host all my images on a free Image host called ImageShack . You can either use the PrintScreen functionality of Windows to take a snapshot of your LSN screen and manually upload your image file to their website, or you can use their free tool called QuickShot

If you upload them manually you will be presented with a screen that looks like this. The code you want is the one marked Thumbnail For Websites.

Copy and Paste this code directly into your entry and you will have a clickable thumbnail. You can check it in the Preview option.

Notice how that image to the right has a rather ugly black bar along the bottom with the image dimensions? There is an option on the Imageshack site for removing those, although it didnt seem to work this time... Try to opt to remove them as the thumbnails look much better without them.

If you use the QuickShot program mentioned above then its even earier. I have my copy set up like this. Notice it also has the option to remove the black resolution bar from the thumbnails. With the program setup like this I just press CTRL and U together and the program does a screen capture, uploads it to ImageShack and then puts the code for the clickable thumbnail directly onto my clipboard so I can paste it right into my entry.

I have also signed up for a free ImageShack registration which means that I can visit a page at ImageShack that shows me all the pictures I've ever uploaded to them, along with all the code for inserting the screenshots. Its very useful if I accidently upload a screenshot but forget to paste the code into my entry. To use this in conjunction with QuickShot make sure you visit the Account Settings tab within the program.

I would really recommend everyone uses the QuickShot program as its just so easy to get nice looking screenshots into your entries.

The other thing you need to know how to do is to Float your images to the left or right. The images above are floated, which means that the text flows nicely round them instead of them standing out on their own.

When you paste code in from ImageShack it looks like this (Forgive the line wrapping):-

<a href="http://img520.imageshack.us/my.php?image=012920061450266is.jpg" target="_blank"><img src="http://img520.imageshack.us/img520/492/012920061450266is.th.jpg" border="0" /></a>

To make it float you need to add an extra snippet of code. You need to make it read like this:-

<a href="http://img520.imageshack.us/my.php?image=012920061450266is.jpg" target="_blank"><img src="http://img520.imageshack.us/img520/492/012920061450266is.th.jpg" style="float:left; margin: 0px 8px 0px 8px;" border="0" /></a>

Again, sorry about the line wrapping. You should be able to see the added 'style="float:left; margin: 0px 8px 0px 8px;' section . Change left to right to float the image on the other side.

Thats not the easiest of things to remember, so just cut-and-paste that extra snippet into a draft email, or a notepad document so you have it to hand. Personally I use the Signature extention below to remember these two snippets. I can then just right clck in Firefox and insert the snippet. Nice and easy.

Signature

This Clippings extention would probably aslo do the trick, but I use the Signature one above.

Post a comment

Subscribe to receive email notifications of new comments on this entry.



Subscribe Without Commenting: