Add a little margin to your blog photos

photo without marginWhen you place a photo in a blog post do you just live with the text running right up to the edge of your image.   Would you like to have some margin, but you don’t know how to get it.   Here is an easy way to get what you want.

margin2 without marginImages can be right, left or centered. Where you want the margin depends on where the photo is going to be located.  

What we want is a quick way to make all your photos have a little white space for the eyes and brain.

There are solutions using CSS style sheets,  maybe you don’t know how to do it. Even if you do you will have to add code to your theme style sheet.    If you decide to change themes since the CSS style is associated with each individual theme you will have to go in and make changes each time you decide to change themes.   There’s got to be an easier way.

There are a couple of low tech tools availabe for anyone to use which will make your blog look better and be easier to read.

Image Resizer.   Resize is available if you have a registered version of Windows XP or greater.   You download and install it from Microsoft.  

Right click on the image and select resize. Click on the advanced button, choose the custom setting and reduce the image to a size 10 pixels less each way than you want to display on your blog.   If you want to display a 300 x 200 image then resize to 290 x 190 and save.

Paint image

  1. 1.   Open this image in Paint and select Attributes from the Image menu.  
  2. 2.   Change the size to 300 x 200   This will add 10 pixels to the right and bottom of the image.  
  3. 3.   If you are placing the image with a left justify this will be all you need to do.  
  4. 4.   Save the image.  
  5. If you are going to right justify there is one more step.

On the paint tool menu the top left corner, the one on the right is the select tool.   Chose it and draw around your image.   Now move it to the right so the margin is on the left and save.

Your images can have  white space to make your blog look more professional.   No matter what theme you chose your margins are preset  as a part of the  image.

You may have  a graphics program to do all this.   My personal favorite is Fireworks.   But if you are on the road or away from your computer and you need to edit an image for your blog this is one way to do it.

image with marginYes, it is a low tech solution.   Most bloggers would rather spend their time blogging and not having to try and figure out how to  set the CSS Style for their theme to get the same effect. This is especially true if you don’t know what you are doing under the theme hood.

Elegant from a code stand point it isn’t.   But it sure makes your blog look more elegant without the text smack up against your images.

Now scroll back up and look at the first image and compare it to the one at the bottom. The house looks a lot better down here doesn’t it.     A little margin goes a long way.

Comments

  1. What I use to great affect is the program blogjet. It has built in margins for images, lets you write offline, and save posts to your hard drive.
    As one who is constantly multitasking, this is a lifesaver.

    Tom

  2. I have looked at blogjet but didn’t try it. The Real Estate Tomato recommended it with a few exceptions. One of those being No Technorati Tags. http://realestatetomato.typepad.com/the_real_estate_tomato/2006/12/useful_tool_blo.html

    I would hate to give those up. I suppose I could edit in blogjet, post, then edit in WordPress to add the tags.

  3. For an easier way to do it. Check out the hspace and vspace attributes of the img tag. cf http://www.htmlcodetutorial.com/images/_IMG_HSPACE.html

  4. John,

    Interesting you would suggest the hspace vspace options. The WordPress 2.1 editor has that function built-in, you just set the offset pixels and wordpress does the rest.

    The downside I’ve discovered, I used to be able to reference images as images/imagename.jpg for the path. Now I have to type in the entire path all the way back from the root.

    I’m looking to see if there is some option to set for image path, but so far I haven’t found one.

Trackbacks

  1. Tobey’s New Image | Real Estate Blog Lab says:

    […] on MyBlogLog Widget Code Produces W3C ErrorsDave Smith on WordPress 2.1 Upgrade UpdateDave Smith on Add a little margin to your blog photosJim Duncan on WordPress 2.1 Upgrade […]