Here's a little guide to posting photos on this blog.

You can find the basics here in this tutorial.

But what if you have a picture that is over 500 pixels wide? One solution is to make a "Popup Image" instead of an Embedded Image. This will provide a text link to the image and it will open in a new window.

But suppose you want to do an embedded image, like I have here, that's too large...

<img src="http://www.perfectduluthday.com/chesterparkfairy.jpg"width="800" height="500" />

This image is too large for the blog frame and so you can't see the right most part of it. When I look at the code it shows that the width is 800 pixels. The frame can only hold about 500 pixels so I can reduce the width to 500 to make it fit.

<img src="http://www.perfectduluthday.com/chesterparkfairy.jpg"width="500" height="500" />

Oops! I forgot to adjust the height as well. You could do some basic ratios and figure out what 800:500::500:### is, but who wants to do math? The simplest thing to do is just to eliminate the height and it will constrain proportions so that it auto-adjusts. I'll do that here.

<img src="http://www.perfectduluthday.com/chesterparkfairy.jpg"width="500" />

There we go. Another solution is just to put "100%" in for the width and it will auto-adjust to any frame it is in. I'll do that here.

<img src="http://www.perfectduluthday.com/chesterparkfairy.jpg"width="100%" />

Sometimes you want to have a smaller photo to accompany a story. You can adjust your photos to whatever width you want, making them smaller or, if needed, larger. Making photos larger is not recommended though as they will lose resolution.

<img src="http://www.perfectduluthday.com/chesterparkfairy.jpg"width="200" align="right" hspace="10" />

I can align the photo right or left by just typing align="right" or align="left" into the img html. This isn't as hard as it sounds and it can make your post look very nice having text wrap around the photo. I did the photo to the right by using align="right". I also put in the img html hspace="10". This creates a horizontal buffer of 10 pixels on either side of the photo.

<img src="http://www.perfectduluthday.com/chesterparkfairy.jpg"width="200" align="left" />

I aligned this photo to the left and didn't use the hspace on this photo and you can see what happens. The text can butt right up against the photo and sometimes it makes the text difficult to read. When you use align="left" or align="right" it is a good precaution to also use hspace="#".

Happy picture posting!