Posting Images
If you blog you will probably want to post images. Using this theme’s styles I will explain how this is best accomplished to that you will retain validity. There are three ways to position images when posting: Floated left, floated right, and center aligned. Images can be posted in in the body of the post or in the excerpt. To post images in the excerpt, you must use the “Optional Excerpt” textarea — found on your “Write Post” page below the image uploader.
Right-Floating Images
To post the right-floated image as seen above, please use the following mark-up. Note the “right” class:
<img class="right" src="img-path/img-file.jpg" width="180" height="150" alt="" />
Left-Floating Images
Now here’s an example of a left-floated image. This is basically done the same exact way, except the “left” class is used. I suggest you have enough text to float the image in. It’s looks better this way. I also suggest the image posted is the image’s actual size. Posting an 800×600 pixel image and showing it small is not fair to your users as they will still have to download the large file. This will slow your blog’s performance.
To post the left-floated image as seen above, please use the following mark-up. Note the “left” class:
<img class="left" src="img-path/img-file.jpg" width="180" height="150" alt="" />
Centering Images
Now there is a center-aligned image. This is useful for larger images positioned between bodies of text. Large image should not 690 pixels wide. If they will be excerpt posted, they really should not exceed 490 pixels wide. Here’s an example of the same image as above, center aligned:
To post the center-align image as seen above, please use the following mark-up. Note the “center” class:
<img class="center" src="img-path/img-file.jpg" width="180" height="150" alt="" />
Adding Borders to Linked Images
There is a special border class for linked images should you want to use if. To use it, right-floated to the right and made into a link — like that shown to the right — you will need to combine your classes.
To post the right-floated and bordered image link as seen above, please use the following mark-up. Note the use of both the “right” and “border” classes:
<a href="http://the-target-url.com/" title="Optional Tool Tip"> <img class="border right" src="img-path/img-file.jpg" width="180" height="150" alt="Required for linked images!" /> </a>
Alt Attribute Use
If you look at the mark-up examples above you may notice the alt="" attribute. Alt for alternate. This is a required attribute used to assist some disabled users such as the blind. In the examples you may notice I left this attribute empty or “null.” This is intentional because I assessed the image as noted that alternate text would not lend itself to assisting the user. In fact it would probably confuse the user. To make such an image assessment for yourself, you might want to read an earlier article of mine called The Alt and Accessibility.
