Wordpress has the ability to embed images into postings. You should give your site a little pizazz by adding images to your posts. However, the default behavior of these images is to just sit out there on their own. Not particularly appealing.
By adding a simple CSS attribute to your tag you can improve the placement of the images by having your blog text wrap around your images.
Here are two examples. The first example places an image in line with your post, between paragraphs.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque in metus. Mauris odio ante, lacinia in, feugiat ut, fringilla ac, sem. Quisque consequat. Mauris ultrices pede ac nunc. Nunc ut nisi. Curabitur urna odio, iaculis at, tincidunt at, eleifend nec, est. Praesent feugiat eros non ante. Nunc a libero. Curabitur sagittis, velit ac sodales mollis, lacus mi bibendum neque, id sagittis risus ligula nec metus. Duis nec purus vitae magna scelerisque mattis.
Donec eget leo. In tincidunt interdum arcu. Maecenas viverra, metus ut iaculis tempus, erat risus rhoncus est, ultrices porttitor elit est a magna. Cras interdum pede suscipit urna. Ut tortor nulla, tempus a, malesuada eu, tempus non, augue. Aenean sollicitudin dignissim urna. Aenean in nisi. Morbi mollis. Nullam sagittis, libero vel venenatis condimentum, nisi eros facilisis arcu, id vehicula tellus orci ac diam. Mauris condimentum, ligula in tempus scelerisque, sem erat luctus lectus, nec posuere lectus libero id massa. Morbi a orci pharetra nulla congue blandit. Nam eget leo. Etiam aliquam, odio malesuada laoreet accumsan, nisl erat ornare eros, id blandit dui tortor sed justo. Donec nibh. In non lorem vitae sapien convallis vulputate.
This second example, places the image in the same location but I add an attribute to the image anchor.
Integer a erat. Sed sed ante. Nam eros justo, consectetuer id, fringilla vel, mollis in, lacus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec vel lorem. Pellentesque vitae quam. Phasellus tellus. Vestibulum ut nunc. Phasellus quam. Curabitur felis velit, suscipit lacinia, posuere ut, nonummy vitae, odio. Ut rhoncus lacus sed eros. Fusce lacinia velit eu nulla semper aliquet. Proin molestie quam eget justo. Ut egestas volutpat nisl. Suspendisse eu diam non libero varius tempus. Nulla condimentum enim et eros. Vivamus ac tortor ac ipsum gravida fermentum. Suspendisse potenti. Quisque diam.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi a massa ut sem dignissim imperdiet. Vivamus viverra tempus eros. Aliquam mattis porttitor justo. Aliquam ligula neque, sagittis a, pretium at, dictum ac, libero. Quisque tempor mauris at risus facilisis lobortis. Etiam tempus, leo eget vulputate convallis, mauris nisl condimentum nibh, in facilisis nisl risus scelerisque quam. Nunc nec augue et risus tristique feugiat. Vestibulum ut metus. Sed nibh.
In the second example, my image tag looks like this.
< img src="sampleimage.jpg" alt="20070704-IMG_2038" width="160" height="240" border="0" class="alignleft" />
Note that I have class=“alignleft” The alignleft class is defined in the default Wordpress template. When you apply this to an image, it will push the image to the left side and run the text around it to the right. The Wordpress style sheet also defines an alignright and aligncenter class which does the obvious.
This should give you enough information to add the finishing touches on your blog entry. Don’t let your images stand alone anymore.
[tags]Wordpress, Tutorial, CSS[/tags]
