Home  •  Forum  •  Blogs  •  E-Mail  •  Support Categories
MyBasicISP Categories Finance Travel Real Estate Games Autos Entertainment
Blogging On MyBasicISP
Tips and Helps for blogging on the MyBasicISP portal.

Working with Images

Here are some helpful tips for inserting an image into blog post that is wider than the post column will allow. Typically, this will cause the image to become cut off because it is wider than the blog layout will allow.

1) When you place an image, scale it smaller then make the image a hyperlink to the original URL source.

I made this post as an example:  http://mybasicisp.net/blogs/basicblog/2010/01/27/Lifes-a-Bear!/

To do this, insert the image to your post using the Insert Image control.

insertImage.png

Select your image then drag the corner image control to scale your image smaller.

imageScale.png

With your image still selected, choose the Create Link control. Paste in the URL for the original image. You may want to select "New Window (_blank)" under the Target drop-down-list to launch the picture link in a new window.

imageLink.png

2) Leave image large and add scroll bars.

Insert image using Insert Image or Insert Image from Editor. Do not scale.

Click on the HTML tab of the post editor and look for the IMG tag for the image that needs scroll bars. Place the <IMG /> element within a <DIV> element like this:

<DIV style="OVERFLOW-X: auto; WIDTH: 100%;"><IMG border=0 alt=burritocat.jpg src="http://www.mybasicisp.net/files/Kurticus/Cats/burritocat.jpg" width=960 height=730></DIV>

The style applied to the DIV element is the key. WIDTH:100% will make sure the DIV element is as wide as the parent element allows it to be. OVERFLOW-X:auto will add the horizontal scroll bar if the contents are wider than the DIV container.

I noticed the horizontal scrollbar caused a vertical scroll bar as well so in my example, I also added OVERFLOW-Y: hidden; to the style so the vertical scroll bar would not show.

See http://mybasicisp.net/blogs/basicblog/2010/01/27/Is-This-a-Cute-Bear-or-What/ for an example.

3) Try writing your blog posts using Windows Live Writer.

This tool has some nice advanced image control utilities such as the ability to place a small sized preview in the blog that links to a larger version.

This bear image was dragged to the Live Writer editor from a web page. Then the corner was dragged to scale it smaller. That’s it – Live Writer does the rest.  http://download.live.com/writer

Comments