For a complete list of How To's follow this link.
If you're looking for something else,
check out the LABELs drop down menu.

Thursday, August 09, 2007

Pictures/images - resizing

Thank you bingeknitter so much for typing up the tutorial on posting pictures side by side. I don't actually use tables myself but I have often wondered how I could use them just for this purpose. It was very helpful.

Regarding the resizing of photos/images, I haven't tried it in the table format so I'm not sure whether the following would work, but it's worth a go...

Again, brackets should be changed to either <> appropriately.

The image URL will start with http:// and will end in jpg. or jpeg.

(table)(tr)(td)
(img src="image URL"/)
(/td)(td)
(img
src="image URL"/)(/td)
(/tr)(/table)

Inserting an img style tag between the image URL and the img src tag, should allow you to format any image or photo that you post to your blog. When you upload an image to Blogger, look at the HTML view of the image and you'll see tags that look similar to this:

(a href="http://i71.photobucket.com/albums/i146/craftybernie/P7260027.jpg")(img style="FLOAT: left; MARGIN: 0px 10px 10px 0px; WIDTH: 200px; CURSOR: hand" alt="" src="http://i71.photobucket.com/albums/i146/craftybernie/P7260027.jpg" border="0" /)(/a)

The first part is the address or the URL of the photo - this is where people will be directed to when they click on the image itself (you can change this to your blog or another website):

(a href="http://i71.photobucket.com/albums/i146/craftybernie/P7260027.jpg")

The second part is the style of the image, namely the formatting of the image -
FLOAT:LEFT; - the image is aligned to the left of the post.
MARGIN: 0px 10px 10px 0px; - there is a margin or space of 10 pixels at the
right & bottom of the image.
WIDTH: 200px; - the image is 200pixels wide (you can make the image bigger
or smaller by increasing or decreasing this figure)
(img style="FLOAT: left; MARGIN: 0px 10px 10px 0px; WIDTH: 200px; CURSOR: hand" alt=""

The last part is the actual source of the image, namely where the photo is being hosted on the internet (photobucket/flickr/picasa, etc). Do not change this!

src="http://i71.photobucket.com/albums/i146/craftybernie/P7260027.jpg" border="0" /)(/a)

No comments: