-
Create a new entry, or Edit an existing entry
Select Upload File from the menu on the left (its a popup window)
Select Browse, and choose an image from your hard drive
For Choose a Destination, always select <Site Root> and type: images
Select Upload
Select the "Show me the HTML" radio button
Select the "create a thumbnail" checkbox
Keep "Constrain proportions" checked
Resize the Width only, Height will resize automatically. Recommended Width: 80 pixels for portrait (tall) images and 100 pixels for landscape (long) images
Select Popup Image
Select the HTML in the box, Copy it (Ctrl+C on a PC)
Don't close the window yet, in case you didn't copy it properly
Go back to the main window
Put your cursor in the post where you want your image. If you want text to wrap around your image, put your cursor just before the first word at the beginning of a paragraph. Use align="left" or align="right" (see advanced options below)
Paste the HTML code (Ctrl+V on a PC)
Add/modify any advanced options, below
Save or Preview your post
advanced options
-
note that the code you've pasted into your post includes a link surrounding a tag. All of the following advanced options modify just the middle code for the image itself, which will look like the following. Note also the beginning and ending < ... /> to denote where this tag begins and ends.
<img src="http://www.mysite.com/images/product1.jpg" width="100" height="60" align="left" hspace="5" vspace="5" border="1" alt=" " />fill in your alt tag. Look in the HTML you pasted, you'll see a tag that says alt=" " . In between the quotes, put something descriptive about your image, such as alt="green widget description" This is important for blind visitors, text-only browsers, some cell phones and others with limited access. align the image. The default HTML code may not include an align=" " tag, or it may be currently set to align="left", which means that text will appear on the right of the image, and wrap around it. You could place the image on the right side, and have the text on the left wrapping around the image, by changing the tag to align="right" adjust the positioning. hspace="5" creates a buffer of five blank pixels on the left and right (horizontal) sides of the image. This is so text does not crowd right up to the image. vspace="5" creates a buffer of five blank pixels on the top and bottom (vertical) sides of the image. You can adjust the numbers to reposition your image relative to the text around it. change the border. The default HTML code is currently set to border="1" , which puts a thin 1-pixel black border around your image. Create a thicker border by putting a higher number, border="3" , or eliminate the border altogether, border="0"