How To Insert An Image | Real Estate Blog Image Insertion 101

I enjoy inserting images into my blog entries (as well as web pages) to break up text, hyperlink to other sources, and just plain, it looks cool! As a consequence, I am often asked how image insertion is accomplished. I am no expert, but know enough to pass along a rudimentary understanding of how image insertion works, plus I can recommend a few resources for further study. We also have a how-to on hyperlinking images, as well.

The easiest way for me to show you how to insert an image is by analyzing the code of an inserted image. You would then simply duplicate the code in your own text using your own variables. Let us start by inserting a handsome bald dude into some Loren ipsum text:

Cras et quam id risus ultricies vulputate. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque a ipsum sit amet eros lobortis cursus. Donec pulvinar purus vel massa. Praesent eu mauris vel odio malesuada nonummy. Phasellus vehicula, neque at molestie laoreet, tellus felis porta massa, sed scelerisque augue quam in sapien. Suspendisse non sapien. Suspendisse gravida quam et dolor. Nunc ante arcu, ornare eget, interdum in, laoreet eget, velit. Sed volutpat, purus ac lacinia dignissim, lacus tellus ornare nibh, et mollis justo quam ut elit. Praesent nec dui. Nam bibendum orci sit amet mauris. Sed pretium nibh ut odio. Nulla lacinia ligula quis augue. In feugiat. Nam venenatis sodales turpis. Nullam vestibulum metus eu purus. Phasellus placerat tortor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In sem. Nulla facilisi. Aliquam erat volutpat. Fusce gravida justo sit amet odio mattis lobortis. Nunc sapien enim, pharetra id, tempus a, lacinia nec, libero. Pellentesque a dolor in arcu rhoncus ultricies. Integer vitae purus. Morbi tincidunt scelerisque odio. Duis sit amet odio id odio faucibus molestie. Nulla facilisi. Quisque eget risus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer ac lectus. Maecenas.

Ok, now let's view the source code and study the html code. Here is the code of the image:

<img src="http://www.joelane.com/images/handsome-bald-dude.jpg" alt="Handsome Bald Dude" width="100" height="150" hspace="5" vspace="5" border="1" align="left" />

The code looks intimidating for those not familiar with it, but this block of code is fairly simple. Note that all variables are in "quotes."

Image Location [img src="http://www.joelane.com/images/handsome-bald-dude.jpg"]
This is fairly straight forward, but the image location is the first part of our code: http://www.joelane.com/images/handsome-bald-dude.jpg Our handsome bald dude image is aptly named handsome-bald-dude.jpg, and is located in the directory http://www.joelane.com/images/, hence the image name/location of http://www.joelane.com/images/handsome-bald-dude.jpg

Alternate Text [alt="Handsome Bald Dude"]
The next part of our code example is the alt text, the text that is displayed when your mouse hovers over the image and when a browser is not displaying images. In our case, Handsome Bald Dude.

Image Size [width="100" height="150"]
The next two variables are the width and height (in pixels) you want your image to be displayed at. As a reference point, the REW blog you are viewing is about 480 pixels wide. I have chosen 100 pixels and 150 pixels respectively. The image is actually, 400 x 600, however I reduced the size using the width and height variables. It is important to mention here that when reducing the size, reduce the width and height relative to each other to avoid distortion. In other words, I multiplied both the width and height by 25% to go from 400 x 600 to 100 x 150.

Space Surrounding The Image [hspace="5" vspace="5"]
The hspace and vspace variables are the variables for the amount of space you want around your image. In our case, we have 5 pixels of white space horizontally and vertically surrounding our image separating our image from the text.

Image Border [border="1"]
The border variable is the border that is surrounding our picture. In this case I've chose a 1 pixel border to surround the image.

Image Alignment [align="left"]
Last but not least, the alignment of the image. As in, where you want your image to be placed within the text. There are several options available for allignment (as with most of the variables discussed thus far), however, I only use the "left" and "right" alignment variables.

Conclusion
That's it. Pretty simple. You now know about image location, alternate text, the width and height, the spacing around the image, the border on the image, and how to place the image left or right.

The best way to experiment with image insertion is to take some image code and place it in some lorem ipsum text and mess with the variables. A great place to experiment with html is with the free html editor NVU. It's free and easy to use.

For further study, consider W3schools html tutorials. My personal favorite. Also, I pay $25/month to use Lynda.com's tutorials. At Lynda.com, the monthly fee includes unlimited use of over 22,000 tutorials. Yup, over 22,000 of them!

BTW, much of the image insertion can be accomplished using REW's blog image tools, however, having an understanding of how image placement works is a necessity for a tech-savvy real estate agent.

Oh, did I mention that if you win REW's blogging contest, and you weren't inserting images before today, my cut is 25% (negotiable). Just kidding (the negotiable part, that is). :)

Have fun with images in your text!

• Rate this Post!

  Select Your Rating:

  • 5 Stars (Excellent!)
  • 4 Stars
  • 3 Stars
  • 2 Stars
  • 1 Stars (Poor)

• Share this Post

  Share With A Friend:

  Your Name Your Email

  Friend's Name Friend's Email

  Optional Message

  Send

• Print
• Social Bookmarking

  Add to Bookmarks: