Suppose I want to include the following image in a diary on Kos?
Once I've loaded the image into webshots, I have to get some information about it. It starts off like this:
But I have to click on that "embed links" tab.
However, notice the 100 pixels size? That's a tiny image. I don't want that. So I'd switch it to 500 pixels:
Then notice that "direct link to thumbnail" option? I'd want to copy that. The best way to do that is to click inside the text area and right click to choose "copy" -- this works on my mac using Firefox but I expect it works on most browsers.
Then, you want to do one last thing. Once you've copied that code, you'll open a new window or tab and paste it into the URL. That will look something like this:
This is the key part because it gives you the last piece of information you need-- the dimensions of the photo.
To post a photo properly, you need three elements: the url of the photo, its height and its width. People discount the last two but they're valuable because they actually help format the page.
I'll explain.
When a website loads, it needs to format itself properly based on content. When there are images included, those take longer to load and it delays the formatting. On slower connections this is a nightmare. What happens is that the page formats, and then refomats itself with every new image.
If, however, you give the image dimensions in advance the page doesn't need to do that formatting. Everything can be formatted properly long before any images load.
So please-- for everyone's sake-- find out the dimensions of your images before you post them. It only takes a moment, but it saves a lot of people a lot of grief.
Images are formatted in simple HTML tags which start with < and end with >
Therefore, the code for the image above the fold is quite simple:
<IMG SRC="http://inlinethumb37.webshots.com/44196/2893577940103337721S500x500Q85.jpg"
width="500"
height="332">
There are a few more features you can add within those tags. If you want an image to flow with the text, you can include alignment attributes as well as hspace attributes (horizontal space; vspace is vertical space). I.e., to include the image as I've done it here, inline with text, I did:
<img src="http://inlinethumb08.webshots.com/47175/2893577940103337721S200x200Q85.jpg" width="200" height="132" align="right" hspace="5">
And if you want it to point somewhere else, you can add an href tag to enclose it. I do this because the versions on my web site are almost always bigger than the ones I post here so it's nice to have people be able to see the larger versions.
<a href="http://juliesmagiclightshow.com/4036.php"><img src="http://inlinethumb08.webshots.com/47175/2893577940103337721S200x200Q85.jpg" width="200" height="132" align="right" hspace="10"></a>
Notice the end -- the slash before the A indicates a closing of the HTML. If you forget to close your tags, the diary won't work. You don't need to close an image tag because it's self contained, but since HREF (hypertext reference) is a tag that points to something else, it needs to be told when to stop pointing to something else.
I hope this was helpful to some of you.
Updated by Julie Waters at Wed Feb 16, 2011, 03:32:27 PM
Quick note: some of you have been asking what webshots is. http://webshots.com/ is a website you can use (like flickr or many others) to upload photos that are allowed to be embedded on Daily Kos. Go there, and register. Then sign in and click on the "upload" link, choose the photos you want to upload and then follow the instructions in this diary. I hope this helps.