I thought I would do a quick post on how to insert an image into your WordPress post. I understand that this really belongs over at Blogging Extreme.com” and it will eventually be posted there. However, I’m not exactly sure how many of you take time to visit that site. So I’ll take the liberty of posting here and then moving it over to Blogging Extreme at a later time.

WordPress ……. I think, starting with 3.0 ( I may be in error on that as I don’t always upgrade with every release ) gives you the option of inserting the featured image directly into your post. Now, how cool is that? I was really jazzed about the ability of taking my image on the homepage and using it to insert into the post so that I no longer had to do the banners or write the code for that matter. While the banners look cool I get hit by Google for using large images …….. slows things down a bit much for Google I guess.

Surprise!

When I went to insert my first image right after I upgraded my Blog at the first of February, I was hit with disappointment. It looked like S$&T. All I needed was a little tweak here and there and I would be on my way. If I remember correctly, I worked on it for about 4 hours and never could get it to work right. I was pressed for time so I had to move on.

After Five Months

The other day I was working on a site build and came up with some code for styling that I decided to work with and the above image insertion is the result after I toyed with it for about an hour.

The Solution

First let’s take a look at how this looks when you have WordPress insert the image. Here is the link to a standard insertion.

Now part of the problem with the standard insertion is my choice of image size, which is 170 x 115. This is almost like a trademark size image for me and my Blogs. Most templates provide a size that is a little too square for me. I like more of a rectangular shape. Blog Hopping has shown me that most Bloggers use different sizes for their post images, so you might have to do some adjusting of the margins top setting to properly seat the image within the text, which as you will see in the code below is set to 8px.

Here is a copy of the standard code that WordPress automatically inserts:

<a href="http://bloggersmarket.com/wp-content/uploads/2011/06/bm-170-10291.jpg"><img src="http://bloggersmarket.com/wp-content/uploads/2011/06/bm-170-10291.jpg" alt="" title="bm-170-1029" width="170" height="115" class="alignleft size-full wp-image-3054" /></a>

Here is a copy of the standard code re-written:

<a href="http://bloggersmarket.com/wp-content/uploads/2011/06/bm-170-10291.jpg"><img src="http://bloggersmarket.com/wp-content/uploads/2011/06/bm-170-10291.jpg" alt="" title="bm-170-1029" width="170" height="115" class="alignleft size-full wp-image-3054" style="margin: 8px 10px 0px 0px; padding: 1ex; border: 1px solid gray;" /></a>

All I did was add this line ( which took me forever it seems to define ):

<style="margin: 8px 10px 0px 0px; padding: 1ex; border: 1px solid gray;" /></a>

Where I went wrong:

One of my problems was that I failed to add the two 0px's to my code at the end of my margin settings. Seeing as how the settings were zero I just failed to include them. This will work with a website, however I had to define these margin settings within my WordPress post to get the desired effect.

I wanted a border for my images and could never get it to work with standard padding definitions. Once I added the 1ex for my padding, the border looked really sharp.

A Final Word

When you go to use this code, the only part that you should have to monkey with if the first setting in the margin, which I have set to 8px in my example. If you set this from 2 to 20px you should be able to get any image to properly seat within your text. A last note; be careful of this margin setting, if you don't set it just right it will look very different in different browsers.