Tribal Core :: Online Strategy, Web Marketing - Ojai, California

There are two basic ways to display your .jpg or .gif image. The first way is to embed a relatively large image directly into the post ("embedded image"). The second way is to include a smaller "thumbnail" image, and when clicked it creates a pop-up window with the larger version of the image ("pop-up image").

If your image is big, like a photo from a digital camera, you'll need to resize it using your graphics editing program. Depending on the template for your website, the image that you create for your blog post should generally be no wider than 450 pixels at 72 dpi. This will work well for both embedded images and pop-up images.

1. Create a new entry, or Edit an existing entry
2. Select Upload File from the menu on the left (its a popup window)
3. Select Browse, and choose an image from your hard drive
4. For Choose a Destination, always select <Site Root> and type: images
5. Select Upload
6. Select the "Show me the HTML" radio button
7. Leave "create a thumbnail" unchecked
8. Select Embedded Image
9. When it shows you the HTML code, remove align="left"
10. Select the HTML in the box, Copy it (Ctrl+C on a PC)
11. Don't close the window yet, in case you didn't copy it properly
12. Go back to the main window
13. Put your cursor in the post where you want your image.
14. Paste the HTML code (Ctrl+V on a PC)
15. Add/modify any advanced options, below
16. Save or Preview your post

advanced options

• 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="blue widget description" This is important for sight-impaired visitors, text-only browsers, some cell phones and others with limited access.

• align the image. The default HTML code is currently set to align="left", which means that text will appear on the right of the image, and wrap around it. If your embedded image is 450 pixels or so, you could center it in the column, by changing the tag to align="center", or simply delete the align="" tag entirely.

• 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="4" , or eliminate the border altogether, border="0"

• If you place an embedded image, it could come before or after a paragraph of descriptive text. Remember that a search engine won't recognize the text on a graphic, so including some descriptive text will get better results on searches.
  

1. Create a new entry, or Edit an existing entry
2. Select Upload File from the menu on the left (its a popup window)
3. Select Browse, and choose an image from your hard drive
4. For Choose a Destination, always select <Site Root> and type: images
5. Select Upload
6. Select the "Show me the HTML" radio button
7. Select the "create a thumbnail" checkbox
8. Keep "Constrain proportions" checked
9. Resize the Width only, Height will resize automatically. Recommended Width: 80 pixels for portrait (tall) images and 100 pixels for landscape (long) images
10. Select Popup Image
11. Select the HTML in the box, Copy it (Ctrl+C on a PC)
12. Don't close the window yet, in case you didn't copy it properly
13. Go back to the main window
14. 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)
15. Paste the HTML code (Ctrl+V on a PC)
16. Add/modify any advanced options, below
17. 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"

Issue: if you post a few thumbnails next to each other, they may stagger down like steps.

This is not intuitive and hard to read, but it is an easy fix. When you have two or more pop-up images next to each other, as one set of tags ends, the other begins. The end of the first and beginning of the second are in yellow below.

<a href="http://www.ojaigarden.com/images/img_0957s1.shtml" onclick="window.open ('http://www.ojaigarden.com/images/img_0957s1.shtml', 'popup', 'width=449, height=337, scrollbars=no, resizable=no, toolbar=no, directories=no, location=no, menubar=no, status=no, left=0, top=0'); return false"><img src="http://www.ojaigarden.com/images/img_0957s-thumb.jpg" width="100" height="75" align="left" hspace="5" vspace="5" border="1" alt=" " /></a>

<a href="http://www.ojaigarden.com/images/IMG_0960s1.shtml"
onclick="window.open ('http://www.ojaigarden.com/images/IMG_0960s1.shtml', 'popup', 'width=449, height=337, scrollbars=no, resizable=no, toolbar=no, directories=no, location=no, menubar=no, status=no, left=0, top=0');
return false"><img
src="http://www.ojaigarden.com/images/IMG_0960s-thumb.jpg" width="100"
height="75" align="left" hspace="5" vspace="5" border="1" alt=" " /></a>

BUT, the way that HTML works is that if you have 1 or 7 or 1000 spaces between tags, that counts as one space. So a single space gets added between each sets of tags, and thus the formatting on the pictures displays poorly.

So simply remove the extra spaces between the tags, and voila:

<a href="http://www.ojaigarden.com/images/img_0957s1.shtml" onclick="window.open ('http://www.ojaigarden.com/images/img_0957s1.shtml', 'popup', 'width=449, height=337, scrollbars=no, resizable=no, toolbar=no, directories=no, location=no, menubar=no, status=no, left=0, top=0'); return false"><img src="http://www.ojaigarden.com/images/img_0957s-thumb.jpg" width="100" height="75" align="left" hspace="5" vspace="5" border="1" alt=" " /></a><a href="http://www.ojaigarden.com/images/IMG_0960s1.shtml" onclick="window.open ('http://www.ojaigarden.com/images/IMG_0960s1.shtml', 'popup', 'width=449, height=337, scrollbars=no, resizable=no, toolbar=no, directories=no, location=no, menubar=no, status=no, left=0, top=0'); return false"><img src="http://www.ojaigarden.com/images/IMG_0960s-thumb.jpg" width="100" height="75" align="left" hspace="5" vspace="5" border="1" alt=" " /></a>